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

4k ja pronto

Browse Source
This commit is contained in:
Rodrigo 2022-10-11 13:26:53 -03:00
parent 473c18cf50
commit e2fee4ac58
3 changed files with 103 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
imagens/Rectangle 15 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

10
index.html
View File

@ -47,13 +47,13 @@
</figure> </figure>
</section> </section>
<section class="corpoPt4"> <section class="corpoPt4">
<figure> <figure class="retangulo1">
<img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado"> <img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">
</figure> </figure>
<figure> <figure class="retangulo2">
<img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado"> <img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado">
</figure> </figure>
<figure> <figure class="retangulo3">
<img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto"> <img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto">
</figure> </figure>
</section> </section>
@ -84,11 +84,13 @@
</figure> </figure>
</section> </section>
<section class="corpoPt6"> <section class="corpoPt6">
<img class="retanguloMobile" src="imagens/Rectangle 15 (2).png" alt="imagem de retangulo">
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p> Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
<img src="imagens/Rectangle 15.png" alt="imagem de retangulo"> <img class="retanguloDesktop" src="imagens/Rectangle 15.png" alt="imagem de retangulo">
</section> </section>
</main> </main>
<footer> <footer>

98
style.css
View File

@ -178,8 +178,12 @@ footer{
align-items: center; align-items: center;
} }
.divRodape{ .divRodape{
margin-top: 38px ; margin-top: 38px;
gap: 21.5px; gap: 21.5px;
width: 5%;
}
.divRodape img{
width: 23%;
} }
.paragrafoRodape{ .paragrafoRodape{
color:#BDBDBD; color:#BDBDBD;
@ -187,4 +191,96 @@ footer{
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 38px; margin-bottom: 38px;
}
.retanguloMobile{
display: none;
}
@media(max-width:1024px){
.corpoPt3{
flex-direction: column;
align-items: center;
gap: 24px;
}
section figure {
text-align: center;
width: 84%;
background: #FFFFFF;
}
.imagem2{
width: 58%;
}
.corpoPt5{
margin-top: 129px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.corpoPt5 figure{
width: 89%;
}
.divRodape{
width: 25%;
}
.corpoPt6 p{
width: 84%;
}
.corpoPt6 h1{
width: 76%;
}
.retangulo2{
order: 1;
}
.retangulo1{
order: 2;
}
.retangulo3{
order: 3;
}
.corpoPt6 img{
width: 100%;
order: 1;
height: 414px;
}
.corpoPt6 p{
order: 3;
}
.corpoPt6 h1{
order: 2;
}
.retanguloDesktop{
display: none;
}
.retanguloMobile{
display: flex;
margin-bottom: 50px ;
}
}
@media(min-width: 2500px){
.corpoPt1 h2{
font-size: 64px;
margin-bottom: 18px;
}
.corpoPt1 h1{
font-size: 96px;
}
.corpoPt1 p{
font-size: 32px;
}
section figure figcaption p{
font-size: 32px;
}
.corpoPt5 figure p{
font-size: 32px;
}
.corpoPt6 p{
font-size: 32px;
}
.corpoPt6 h1{
font-size: 64px;
}
.paragrafoRodape{
font-size: 20px;
}
} }