RodrigoJorge/challenge-landing-page-Rodrigo-Jorge
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redundancias eliminadas e classes na ordem correta final

Browse Source
This commit is contained in:
Rodrigo 2022-10-12 21:15:55 -03:00
parent f773cdf2dc
commit 9139520d73
2 changed files with 75 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -61,15 +61,17 @@
</figure> </figure>
</section> </section>
<section class="corpoPt4"> <section class="corpoPt4">
<figure class="retangulo1"> <div>
<img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado"> <figure class="retangulo1">
</figure> <img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">
<figure class="retangulo2"> </figure>
<img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado"> <figure class="retangulo2">
</figure> <img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado">
<figure class="retangulo3"> </figure>
<img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto"> <figure class="retangulo3">
</figure> <img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto">
</figure>
</div>
</section> </section>
<section class="corpoPt5"> <section class="corpoPt5">
<figure class="box1"> <figure class="box1">

122
style.css
View File

@ -110,15 +110,20 @@ section figure figcaption p{
.corpoPt4{ .corpoPt4{
background: #E0E0E0; background: #E0E0E0;
display: flex; display: flex;
flex-direction: row;
width: 100%; width: 100%;
justify-content:center; }
gap: 2%; .corpoPt4Mobile{
display: none;
background: #E0E0E0;
} }
.corpoPt4 div{ .corpoPt4 div{
position: relative; position: relative;
gap: 2%;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
} }
.corpoPt4 figure { .corpoPt4 figure {
width: 29%; width: 29%;
position: relative; position: relative;
@ -198,6 +203,9 @@ section figure figcaption p{
.corpoPt6 img{ .corpoPt6 img{
width: 71%; width: 71%;
} }
.retanguloMobile{
display: none;
}
footer{ footer{
margin-top: 116px ; margin-top: 116px ;
background: #000000; background: #000000;
@ -220,21 +228,7 @@ footer{
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 38px; margin-bottom: 38px;
} }
.retanguloMobile{
display: none;
}
.corpoPt4Mobile{
display: none;
background: #E0E0E0;
}
@media(max-width:1024px){ @media(max-width:1024px){
.imagemCorpoMobile{
display: flex;
width: 100%;
}
.imagemCorpoPt1{
display: none;
}
.cabecalho { .cabecalho {
height: 101px; height: 101px;
} }
@ -242,6 +236,13 @@ footer{
margin-top: 18px; margin-top: 18px;
width: 52%; width: 52%;
} }
.imagemCorpoMobile{
display: flex;
width: 100%;
}
.imagemCorpoPt1{
display: none;
}
.corpoPt1 h2{ .corpoPt1 h2{
font-size: 20px; font-size: 20px;
} }
@ -253,6 +254,36 @@ footer{
font-size: 16px; font-size: 16px;
width: 86%; width: 86%;
} }
.imagem2{
width: 58%;
}
.corpoPt3{
flex-direction: column;
align-items: center;
gap: 24px;
}
section figure {
text-align: center;
width: 84%;
background: #FFFFFF;
}
.corpoPt4Mobile div figure{
width: 42%;
}
.corpoPt4Mobile div figure img{
width: 100%;
}
.corpoPt4Mobile figure{
width:100%;
background: #E0E0E0;
}
.corpoPt4Mobile figure img{
width:86%;
}
.corpoPt4{
display: none;
}
.box1 figcaption p{ .box1 figcaption p{
font-size: 14px; font-size: 14px;
} }
@ -265,23 +296,14 @@ footer{
.box4 figcaption p{ .box4 figcaption p{
font-size: 14px; font-size: 14px;
} }
.corpoPt3{ .retangulo2{
flex-direction: column; order: 1;
align-items: center;
gap: 24px;
} }
.retangulo1{
.corpoPt6 h1{ order: 2;
font-size: 24px;
} }
.retangulo3{
section figure { order: 3;
text-align: center;
width: 84%;
background: #FFFFFF;
}
.imagem2{
width: 58%;
} }
.corpoPt5{ .corpoPt5{
margin-top: 129px; margin-top: 129px;
@ -301,18 +323,10 @@ footer{
order: 3; order: 3;
} }
.corpoPt6 h1{ .corpoPt6 h1{
font-size: 24px;
width: 76%; width: 76%;
order: 2; order: 2;
} }
.retangulo2{
order: 1;
}
.retangulo1{
order: 2;
}
.retangulo3{
order: 3;
}
.corpoPt6 img{ .corpoPt6 img{
width: 100%; width: 100%;
order: 1; order: 1;
@ -338,22 +352,6 @@ footer{
width: 100%; width: 100%;
gap: 2%; gap: 2%;
} }
.corpoPt4Mobile div figure{
width: 42%;
}
.corpoPt4Mobile div figure img{
width: 100%;
}
.corpoPt4Mobile figure{
width:100%;
background: #E0E0E0;
}
.corpoPt4Mobile figure img{
width:86%;
}
.corpoPt4{
display: none;
}
.paragrafoRodape{ .paragrafoRodape{
width: 63%; width: 63%;
text-align: center; text-align: center;
@ -374,6 +372,14 @@ footer{
section figure figcaption p{ section figure figcaption p{
font-size: 32px; font-size: 32px;
} }
.corpoPt4 div{
position: relative;
gap: 2%;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
.corpoPt5 figure p{ .corpoPt5 figure p{
font-size: 32px; font-size: 32px;
} }