Skip to content

Commit

Permalink
ajustes
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabjoao
gabjoao committed Oct 7, 2023
1 parent dafa1c6 commit 262d905
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 38 deletions.
61 changes: 27 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,14 @@

<div class="logo">
<h1>SERENE</h1>
<img src="./media/sol.png" alt="">
<img src="./media/sol.png" alt="Logo Serene">
</div>



<div class="icones">
<img src="./media/perfil.png" alt="">
<img src="./media/carrinho.png" alt="">
<img src="./media/perfil.png" alt="Perfil">
<img src="./media/carrinho.png" alt="Carrinho de compras">
</div>
</header>

Expand All @@ -71,14 +71,14 @@ <h1>SERENE</h1>

<picture class="frete">

<img src="./media/frete.png" alt="">
<img src="./media/frete.png" alt="Frete Grátis">
<p>frete <font color="FCEEA8">grátis</font> </p>

</picture>

<picture class="atendimento">

<img src="./media/celular.png" alt="">
<img src="./media/celular.png" alt="Atendimento 24h">
<p>atendimento <font color="FCEEA8">24h</font></p>

</picture>
Expand All @@ -88,16 +88,12 @@ <h1>SERENE</h1>
</div>

<div class="content2">

<p class="CTA">conheça os nossos produtos</p>

<a href="#pg2">
<p class="seta">^</p>
</a>


<div class="desconto">
<img src="./media/desconto.png" alt="">
<img src="./media/desconto.png" alt="Desconto">
<p>25% OFF na primeira compra</p>

</div>
Expand All @@ -106,23 +102,20 @@ <h1>SERENE</h1>
</section>

<section id="pg2">

<div class="texts">
<div class="texts1">
<p>a</p>
<div class="logo">
<h4>SERENE</h4>
<img src="./media/sol.png" alt="">
<img src="./media/sol.png" alt="Logo Serene">
</div>
</div>

<p id="textContent">é a escolha preferida dos dermatologistas em todo o mundo, com mais de duas décadas de excelência no mercado. Nossas fórmulas eficazes oferecem resultados notáveis para a sua pele</p>
</div>


<div class="sliderContainer">
<div class="slider">

<div class="slides">
<!--Botões de troca de slide-->
<input type="radio" name="radioBtn" id="radio1">
Expand All @@ -132,19 +125,19 @@ <h4>SERENE</h4>

<!--Imagens do slider-->
<div class="slide1">
<img src="./media/produto1.jpg" alt="">
<img src="./media/produto1.jpg" alt="Produto 1">
</div>

<div class="slide">
<img src="./media/produto2.jpg" alt="">
<img src="./media/produto2.jpg" alt="Produto 2">
</div>

<div class="slide">
<img src="./media/produto3.jpg" alt="">
<img src="./media/produto3.jpg" alt="Produto 3">
</div>

<div class="slide">
<img src="./media/produto4.jpg" alt="">
<img src="./media/produto4.jpg" alt="Produto 4">
</div>

<div class="navAuto">
Expand All @@ -153,9 +146,8 @@ <h4>SERENE</h4>
<div class="autoBtn3"></div>
<div class="autoBtn4"></div>
</div>

</div>

<div class="navManual">
<label for="radio1" class="manualBtn"></label>
<label for="radio2" class="manualBtn"></label>
Expand All @@ -171,20 +163,17 @@ <h1>Nos acompanhe nas redes sociais e veja o que estão falando!</h1>

<div class="container">
<div class="cards">

<div class="card" id="card1">
<div class="perfil">
<picture>
<div></div>
</picture>

<div class="perfilTxts">
<h2>@gabjoaoz</h2>
<h3>Cliente com pele seca</h3>
</div>
</div>


<p>“Estou absolutamente apaixonado pelos produtos Serene! Minha pele nunca esteve tão radiante e saudável. As fórmulas são incríveis e fazem uma grande diferença. Uso há meses e continuo impressionado com os resultados.”</p>

<div class="estrelas">
Expand All @@ -201,7 +190,6 @@ <h3>Cliente com pele seca</h3>
<picture>
<div></div>
</picture>

<div class="perfilTxts">
<h2>@maxm3</h2>
<h3>Cliente com pele sensível</h3>
Expand Down Expand Up @@ -231,7 +219,6 @@ <h3>Cliente com pele madura</h3>
</div>
</div>


<p>"Sou uma cliente fiel da Serene há anos. Esses produtos são meu segredo de beleza. Não trocaria por nada. Eles mantêm minha pele jovem e saudável.”</p>

<div class="estrelas">
Expand All @@ -248,10 +235,18 @@ <h3>Cliente com pele madura</h3>
<section id="pg4">
<h1>Siga @sereneskin</h1>
<div class="iconsContainer">
<img src="./media/instagram.png" alt="" id="instagram">
<img src="./media/github.png" alt="" id="github">
<img src="./media/linkedin.png" alt="" id="linkedin">
<img src="./media/gmail.png" alt="" id="gmail">
<a href="https://www.instagram.com/gabjoaoz/" target="_blank">
<img src="./media/instagram.png" alt="" id="instagram">
</a>
<a href="https://github.com/gabjoao" target="_blank">
<img src="./media/github.png" alt="" id="github">
</a>
<a href="https://www.linkedin.com/in/joão-gabriel-de-almeida-ribeiro-41629b256/?originalSubdomain=br" target="_blank">
<img src="./media/linkedin.png" alt="" id="linkedin">
</a>
<a href="mailto: joao.25.ribeiro01gmail.com" target="_blank">
<img src="./media/gmail.png" alt="" id="gmail">
</a>
</div>
<div class="linha">
<svg xmlns="http://www.w3.org/2000/svg" width="1112" height="12" viewBox="0 0 1112 12" fill="none">
Expand All @@ -265,7 +260,7 @@ <h3>Problemas?
Entre em contato com a central de ajuda!
centraldeajuda@serene
(42) 555-2302</h3>

<div class="content1">
<div class="logo">
<h4>SERENE</h4>
Expand All @@ -274,15 +269,13 @@ <h4>SERENE</h4>

<p>é uma marca fictícia. Todos os direitos reservados &copy; João Gabriel 2023.
Qualquer semelhança com uma marca ou produto real é pura coincidência.</p>

</div>

<p>Crédito às imagens: https://pixabay.com/pt/ <br>
Crédito aos ícones: https://icons8.com.br/icons
<br>
Todos os direitos reservados.</p>


</footer>
</main>
</body>
Expand Down
Binary file removed media/ft.jpg
View file
Binary file not shown.
18 changes: 14 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ html {
height: 50px;
border-radius: 50%;
background:
radial-gradient(farthest-side,#9A8A37 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#9A8A37);
radial-gradient(farthest-side,#9A8A37 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#9A8A37);
-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
animation: load 1s infinite linear;

Expand Down Expand Up @@ -632,7 +632,7 @@ header .menuIcon:hover, .icones img:hover{
}

#pg3 .container{
width: 1360px;
width: 1200px;
height: 551px;
flex-shrink: 0;
border-radius: 20px;
Expand All @@ -642,7 +642,7 @@ header .menuIcon:hover, .icones img:hover{
}

#pg3 .container .cards{
width: 1360px;
width: 1200px;
height: 551px;
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -806,6 +806,16 @@ header .menuIcon:hover, .icones img:hover{
box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

#pg4 a{
transition: all;
transition-duration: .2s;
transition-delay: .25ms;
}

#pg4 a:hover{
scale: 110%;
}

#instagram{
width: 52px;
height: 52px;
Expand Down

0 comments on commit 262d905

Please sign in to comment.