"ENGINEERING Who Tabs"
Bootstrap 4.1.1 Snippet by harunpehlivan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="tabs"> <input class="switch" type="radio" title="ABOUT" name="switch" id="tardis" checked=""> <input class="switch" type="radio" title="HP IT GROUP " name="switch" id="doctor"> <input class="switch" type="radio" title="GOOGLEMAP" name="switch" id="dalek"> <div class="tab-links"> <label for="tardis" id="tardis-tab" class="tab">ABOUT</label> <label for="doctor" id="doctor-tab" class="tab">HP IT GROUP</label> <label for="dalek" id="dalek-tab" class="tab">GOOGLE YANDEX MAP</label> </div> <div class="panels"> <div id="tardis-panel" class="panel active"> <img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222c3847ad9.jpg" align="left" alt="ABOUT"> <h2>HARUN PEHLİVAN</h2> <p> IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT </p> <p>22/07/1984 Çorum'da dünyaya bebek bakışlarmla sesimle merhaba dedim bir elimden Annem bir elimden Babam tuttu şefkatleriyle beni bu hale getirdiler Allah cc onlardan ebediyen razı olsun aslen Samsun'un Havza ilçesi halen Amasya'nın Suluova ilçesinde ikamet etmekteyim.</p><p>"Ne olacağıma değil yeteneklerimin, becerilerimin ve ne yapabilirim'in peşinde koşarım"</p><p>"Sonsuz hamd olsun gerçekleştiremediğim ütopyam olmadı"</p> <a href="https://harunpehlivantebimtebitagem.carrd.co" rel="noopener noreferrer" target="_blank">E-CV</a> <a href="http://harunpehlivan.fm.tc" rel="noopener noreferrer" target="_blank"> TTGRT TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU </a> </div> <div id="doctor-panel" class="panel"> <img src="https://cdn-cms.f-static.com/uploads/1017556/400_5c46c25028340.png" align="left" alt="HP IT GROUP GLOBAL PROFESYONEL IT GROUP"> <h2>HP IT GROUP GLOBAL PROFESYONEL IT GROUP</h2> <p> <dt>2008</dt> <dd><a href="http://tebimtebitagem.ticiz.com" rel="noopener noreferrer" target="_blank">TERCUMAN INFORMATICS CENTER</a></dd> <dt>2012</dt> <dd><a href="https://harunpehlivantebimtebitagem.business.site" rel="noopener noreferrer" target="_blank">TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</a></dd></p><p>"Gündem belirlemek güncel global olmak için yeni fikirlerle yetenek ve beceriyle uzmanlıkla eğitimle bilimle teknikle AR-GE proje ile adımızla markamızla kimliğimizle profilimizle kalitemizle standardımızla konseptimizle ilkemizle etiğimizle ama özümüzden taviz vermeden"</p> </div> <div id="dalek-panel" class="panel"> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" align="left" alt="GOOGLESİTE"> <h2>GOOGLE YANDEX MAP</h2> <p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4968.659535992046!2d35.657568!3d40.829449!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x11196fc28c1118f0!2zVEVSQ1VNQU4gQsSwTMSwxZ7EsE0gTUVSS0VaxLAgVEVSQ1VNQU4gRcSexLBUxLBNIELEsEzEsE0gVEVLTsSwSyBBUkHFnlRJUk1BIEdFTMSwxZ5UxLBSTUUgTUVSS0VaxLA!5e1!3m2!1str!2sus!4v1548592284721" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></p> <p><iframe src="https://www.google.com/maps/embed?pb=!4v1548592350380!6m8!1m7!1s_35aUW3xmI21YrK9ORdzbA!2m2!1d40.82947259615927!2d35.65739945801781!3f57.57!4f-0.39000000000000057!5f1.3946584482860698" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></p> ,<p><iframe src="https://yandex.com.tr/map-widget/v1/-/CCutFQ-~" width="560" height="400" frameborder="1" allowfullscreen="true"></iframe> </p> <p><iframe src="https://yandex.com.tr/map-widget/v1/-/CCuFQJ7A" width="560" height="400" frameborder="1" allowfullscreen="true"></iframe></p> </div> </div> </div>
.tabs .switch { position: absolute; z-index: 1; } .tabs .tab { background-color: #00203c; color: #fff; cursor: pointer; display: inline-block; padding: 10px; position: relative; z-index: 2; } #tardis:checked ~ .tab-links #tardis-tab,#doctor:checked ~ .tab-links #doctor-tab,#dalek:checked ~ .tab-links #dalek-tab { background-color: #fff; color: #000; cursor: default; } .tabs .panels { background-color: #fff; padding: 20px; } .tabs .panel { bottom: -9999; display: inline-block; left: -9999; opacity: 0; position: absolute; } #tardis:checked ~ .panels #tardis-panel,#doctor:checked ~ .panels #doctor-panel,#dalek:checked ~ .panels #dalek-panel { left: 0; opacity: 1; position: relative; } body { background-color: #00203c; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; padding: 20px; } h2 { color: #00203c; } p { color: #00203c; margin-bottom: 15px; } img { margin: 0 15px 15px 0; width: 18%; } .tabs .tab:hover { background-color: #6f8ea9; color: #000; }

Related: See More


Questions / Comments: