"Tab Pane"
Bootstrap 4.1.1 Snippet by anvictor

<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 ----------> <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 ----------> <!-- Section Exames --> <section id="exames"> <div class="hero-image"> <div class="container h-100"> <div class="row h-100"> <div class="col-md-12 justify-content-center align-items-center"> <h1 class="text-center my-3">Nossas <span class="text-light border-bottom border-light">Especialidades</span></h1> <div class="hero-text"> <nav> <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><img src="./node_modules/bootstrap/img/001-cardiology.png" alt=""></a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><img src="./node_modules/bootstrap/img/003-ecocardiografia.png" alt=""></a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"><img src="./node_modules/bootstrap/img/eye.png" alt=""></a> <a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false"><img src="./node_modules/bootstrap/img/002-ultrasonography.png" alt=""></a> </div> </nav> <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent"> <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <h5 class="text-center text-uppercase text-light">Cardiologia</h5> Cardiologia é a especialidade médica que se ocupa do diagnóstico e tratamento das doenças que acometem o coração bem como os outros componentes do sistema circulatório. O médico especialista nessa área é o cardiologista. <p class="font-weight-bold">Exames:</p> <ul> <li style="list-style-type: circle">Cardiologia</li> <li style="list-style-type: circle">Eletrocardiograma</li> <li style="list-style-type: circle">Ecocardiograma</li> </ul> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <h5 class="text-center text-uppercase text-light">Ecocardiografia</h5> A ecocardiografia ou ecocardiograma com Doppler abrange os métodos de diagnóstico da estrutura e do funcionamento do coração baseados no uso de ultrassom, ou seja, as ondas acústicas com frequência de mais de 20 mil Hz, geralmente em torno de 2 a 4 MegaHertz. </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <h5 class="text-center text-uppercase text-light">Oftalmologia</h5> A oftalmologia é uma especialidade da medicina que estuda e trata as doenças relacionadas ao olho, à refração e aos olhos e seus anexos. O médico oftalmologista realiza cirurgias, prescreve tratamentos e correções para os distúrbios de visão. <p class="font-weight-bold">Cirurgias:</p> <ul> <li style="list-style-type: circle">Catarata</li> <li style="list-style-type: circle">Cirurgia refrativa (miopia, astigmatismo, hipermetropia)</li> <li style="list-style-type: circle">Blefaroplastia</li> </ul> <p class="font-weight-bold">Exames:</p> <ul> <li style="list-style-type: circle">Mapeamento de retina</li> <li style="list-style-type: circle">Tonometria</li> <li style="list-style-type: circle">Curva tensional diária</li> </ul> </div> <div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab"> <h5 class="text-center text-uppercase text-light">Ultrassonografia</h5> A ultrassonografia ou ecografia é um método diagnóstico muito recorrente na medicina moderna que utiliza o eco gerado através de ondas ultrassônicas de alta frequência para visualizar, em tempo real, as estruturas internas do organismo. <div class="d-sm-flex"> <p class="font-weight-bold">Exames:</p> <ul> <li style="list-style-type: circle">Abdômen total</li> <li style="list-style-type: circle">Abdômen Superior</li> <li style="list-style-type: circle">Vias Urinárias</li> <li style="list-style-type: circle">Próstata </li> <li style="list-style-type: circle">Tireoide</li> <li style="list-style-type: circle">Mamas</li> </ul> <ul> <li style="list-style-type: circle">Transvaginal</li> <li style="list-style-type: circle">Pélvico</li> <li style="list-style-type: circle">Articulações e membros superior</li> <li style="list-style-type: circle">Ombro, Braço, Cotovelo, Antebraço, Punho, Mao </li> <li style="list-style-type: circle">Articulações membros inferior</li> <li style="list-style-type: circle">Coxa, Joelho, Perna, Tornozelo, Calcâneo, Pé</li> <li style="list-style-type: circle">Parede abdominal</li> <li style="list-style-type: circle">Partes Moles</li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </section>
#exames { height: 100%; .hero-image { background-image: linear-gradient(rgba(60, 177, 255, 0.9), rgba(60, 177, 255, 0.9)),url(../img/hero_image_02.png); height: 100%; position: relative; } nav > .nav.nav-tabs{ border: none; color:#fff; border-radius: 10px; } nav > div a.nav-item.nav-link, nav > div a.nav-item.nav-link.active { border: none; padding: 18px 25px; color:#fff; background: transparent; } .tab-content{ background: #fdfdfd; line-height: 25px; border: 1px solid #ddd; padding:30px 25px; } nav > div a.nav-item.nav-link:hover, nav > div a.nav-item.nav-link:focus { border: none; background: #FFF; color:#fff; border-radius:0; transition:background 0.20s linear; } .tab-content { background: transparent; line-height: 25px; border: none; } nav > div a.nav-item.nav-link.active { background-color: #FFF; } }

Related: See More


Questions / Comments: