feat(telas maiores) últimas alterações das telas maiores com isso finalizando o desafio
docs(fiz um comentário no fim do html fazendo explicações)
This commit is contained in:
parent
17d0701a78
commit
7c0e364627
24
index.html
24
index.html
@ -142,22 +142,22 @@
|
||||
|
||||
<footer class="footer">
|
||||
<nav class="redes-sociais">
|
||||
<div class="centralizar">
|
||||
<div class="centralizar" width="100%">
|
||||
<a href="/">
|
||||
<img src="imagens/Group (2).png" alt="logo instragan">
|
||||
<img src="imagens/Group (2).png" alt="logo instragan" width="11%">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="imagens/facebook-logo.png" alt="logo facebook">
|
||||
<img src="imagens/facebook-logo.png" alt="logo facebook" width="11%">
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src="imagens/youtube 2.png" alt="logo youtube">
|
||||
<img src="imagens/youtube 2.png" alt="logo youtube" width="11%">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="display:none">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||
<p class="copy">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||
</p>
|
||||
<img src="imagens/0001-00.png" alt="copyright" width="90%">
|
||||
<img class="copy-responsivo" src="imagens/0001-00.png" alt="copyright" width="100%">
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -169,4 +169,16 @@
|
||||
|
||||
|
||||
</body>
|
||||
<!--finalizei o desafio as 15:20 do 13/10/2022. Explicação: todos os meus commit foram dado direto na main não peguei a ideia do git flow
|
||||
e pelo curto prazo pra entrega decide focar direto no projeto. A covention commit consegui entender um pouco por isso tentei usar mas não
|
||||
sei se usei da maneira certa. Meu css esta extenso porque não consegui usar direito porcetagem
|
||||
fui fazendo breakpoiter com @media decidindo os pontos de partida, e fazendo em pixel as medidas.
|
||||
procurei ser o mais fiel possivel ao figman não ficou uma copia exata, mas acredito que fiz um bom trabalho.
|
||||
Com certeza deixei passar coisas despercebidas ou adicionei coisas desnecessarias e os códigos não devem estar limpos,porém, com o tempo
|
||||
e prática vou assimilando as coisas e ficará algo mais bonito. No mais estou feliz em ter completado e estar entregando.
|
||||
|
||||
Desde já agradeço a quem estiver corrigindo.
|
||||
|
||||
OBRIGADO
|
||||
-->
|
||||
</html>
|
||||
185
style.css
185
style.css
@ -196,8 +196,11 @@ h3{
|
||||
@media (max-width:1024px){
|
||||
.img-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
.copy{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.texto1{
|
||||
display: flex;
|
||||
@ -220,6 +223,7 @@ h3{
|
||||
|
||||
font-size: 100%;
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
.pcs img{
|
||||
@ -369,6 +373,10 @@ h3{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy-responsivo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-compra{
|
||||
|
||||
margin-top: 178px;
|
||||
@ -384,8 +392,6 @@ h3{
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.card-compra2{
|
||||
|
||||
margin-top: 129px;
|
||||
@ -398,27 +404,62 @@ h3{
|
||||
height: 332px;
|
||||
}
|
||||
|
||||
.cards p{
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
}
|
||||
|
||||
.artigo{
|
||||
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.imagem_desfocada{
|
||||
margin-top: 30px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1200px){
|
||||
.paragrafo1{
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.card p{
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cards p{
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.artigo p{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1500px){
|
||||
.paragrafo1{
|
||||
font-size: 18px;
|
||||
}
|
||||
.card p{
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.cards p{
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.artigo p{
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2000px){
|
||||
@ -432,6 +473,7 @@ h3{
|
||||
}
|
||||
.paragrafo1{
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
|
||||
@ -442,8 +484,13 @@ h3{
|
||||
|
||||
}
|
||||
|
||||
.fundo-cinza{
|
||||
margin-top: 450px;
|
||||
}
|
||||
|
||||
.card p{
|
||||
font-size: 22px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.cards{
|
||||
@ -453,14 +500,21 @@ h3{
|
||||
|
||||
.cards p{
|
||||
font-size: 22px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 35px;
|
||||
}
|
||||
.artigo{
|
||||
|
||||
width: 700px;
|
||||
|
||||
}
|
||||
|
||||
.artigo p{
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -472,14 +526,15 @@ h3{
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: 70px;
|
||||
font-size: 60px;
|
||||
}
|
||||
.sub-titulo{
|
||||
font-size: 100px;
|
||||
font-size: 80px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.paragrafo1{
|
||||
font-size: 30px;
|
||||
font-size: 29px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.card{
|
||||
@ -487,7 +542,12 @@ h3{
|
||||
height: 400px;
|
||||
}
|
||||
.card p{
|
||||
font-size: 27px;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.fundo-cinza{
|
||||
margin-top: 500px;
|
||||
}
|
||||
|
||||
.cards{
|
||||
@ -496,14 +556,25 @@ h3{
|
||||
}
|
||||
|
||||
.cards p{
|
||||
font-size: 27px;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.artigo{
|
||||
margin-top: 400px;
|
||||
width: 1000px;
|
||||
}
|
||||
h4{
|
||||
font-size: 43px;
|
||||
|
||||
}
|
||||
.artigo p{
|
||||
font-size: 25px;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.imagem_desfocada{
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -513,9 +584,15 @@ h3{
|
||||
max-width: 1500px;
|
||||
height: 300px;
|
||||
}
|
||||
h3{
|
||||
font-size: 70px;
|
||||
}
|
||||
.sub-titulo{
|
||||
font-size: 90px;
|
||||
}
|
||||
.paragrafo1{
|
||||
|
||||
font-size:35px;
|
||||
font-size:38px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.card{
|
||||
@ -524,9 +601,13 @@ h3{
|
||||
|
||||
}
|
||||
|
||||
.fundo-cinza{
|
||||
margin-top: 600px;
|
||||
}
|
||||
|
||||
.card p{
|
||||
font-size: 35px;
|
||||
line-height: 45px;
|
||||
font-size: 38px;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.cards{
|
||||
@ -537,25 +618,89 @@ h3{
|
||||
}
|
||||
|
||||
.cards p{
|
||||
font-size: 35px;
|
||||
font-size: 38px;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
|
||||
.artigo{
|
||||
margin-top:500px;
|
||||
width: 1600px;
|
||||
|
||||
}
|
||||
h4{
|
||||
font-size: 60px;
|
||||
font-size: 65px;
|
||||
}
|
||||
.artigo p{
|
||||
font-size: 35px;
|
||||
line-height: 45px;
|
||||
margin-top: 20px;
|
||||
font-size: 43px;
|
||||
line-height: 49px;
|
||||
}
|
||||
.imagem_desfocada{
|
||||
margin-top: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:3600px){
|
||||
h3{
|
||||
font-size: 85px;
|
||||
}
|
||||
.sub-titulo{
|
||||
margin-top: 10px;
|
||||
font-size: 105px;
|
||||
}
|
||||
.paragrafo1{
|
||||
font-size: 45px;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
.card{
|
||||
max-width: 800px;
|
||||
height: 650px;
|
||||
|
||||
}
|
||||
|
||||
.card p{
|
||||
font-size: 45px;
|
||||
line-height: 60px;
|
||||
|
||||
}
|
||||
|
||||
.fundo-cinza{
|
||||
margin-top: 900px;
|
||||
}
|
||||
|
||||
.cards{
|
||||
margin-top: 100px;
|
||||
max-width: 900px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.cards p{
|
||||
font-size: 45px;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.artigo{
|
||||
margin-top: 700px;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 90px;
|
||||
}
|
||||
|
||||
.artigo p{
|
||||
font-size: 50px;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.imagem_desfocada{
|
||||
margin-top: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user