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

2
index.html
View File

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

122
style.css
View File

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