<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;
}
}
