11 de abr. de 2022

TESTE

<style>

.nav_tabs{

width: 800px !important;

height: 400px !important;

margin: 100px auto !important;

background-color: #fff !important;

position: relative !important;

}

.nav_tabs ul{

list-style: none !important;

}

.nav_tabs ul li{

float: left !important;

font-family: Sofia !important;

font-size: 18px !important;

color: #808080 !important;


}

.nav_tabs label{

/* Informações botao */

width: 60px auto !important;

padding: 12px !important;

background-color: none !important; 

/*border-style: solid !important;

border-width: 1px !important;

border-radius: 5px !important;

border-color: #222222 !important; */ 

color: none !important; 

display: block !important;

cursor: pointer !important;

text-align: center !important;

}


.rd_tabs:checked ~ label{

/* Quando clica no botao */

background-color: #FFFAFA !important;

/*

background-color: #FFFACD !important;

background-color: ##DCDCDC !important; */

border-style: none !important;

border-width: 1px !important;

border-radius: 5px !important;

/* border-color: #FF4500 !important; */ 

}

.rd_tabs{

display: none !important;


}


.content{

/*border-top: 5px solid #FF4500 !important;

background-color: #fff !important; */

display: none !important;

position: absolute !important;

height: 320px !important;

width: 600px !important;

left: 0px !important;


}

.content article{

padding: 10px !important;

}


.rd_tabs:checked ~ .content{

display: block !important;

}

</style>


<nav class="nav_tabs">

<ul>

<li>

<input type="radio" name="tabs" class="rd_tabs" id="tab1" checked>

<label for ="tab1">Composição</label>

<div class="content">

<article>

Pro Cycle Tônico, Trichoxidil, Bioex Capilar, Fatores de Crescimento, Calendula, Capixyl, Arct Alg.

</article>

</div>

</li>

<li>

<input type="radio" name="tabs" class="rd_tabs" id="tab2">

<label for ="tab2">Modo de Usar</label>

<div class="content">

<article> 

Aplicar no couro cabeludo 2x ao dia.

</article>

</div>

</li>

<li>

<input type="radio" name="tabs" class="rd_tabs" id="tab3">

<label for ="tab3">Benefícios</label>

<div class="content">

<article>

Estimula crescimento capilar; 

Revitaliza e fortalece os fios;

Ativa a circulação periférica do couro cabeludo favorecendo a nutrição;

Promove brilho nos fios;

</article>

</div>

</li>

<li>

<input type="radio" name="tabs" class="rd_tabs" id="tab5">

<label for ="tab5">Tabela Nutricional</label>

<div class="content">

<article>

</article>

</div>

</li>

</ul>

</nav>

Nenhum comentário:

Postar um comentário