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

quase pronto

Browse Source
This commit is contained in:
Rodrigo 2022-10-11 15:21:16 -03:00
parent e2fee4ac58
commit e3aeb4c152
2 changed files with 107 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -20,7 +20,7 @@
<figcaption class="corpoPt1"> <figcaption class="corpoPt1">
<h2>Lorem Ipsum</h2> <h2>Lorem Ipsum</h2>
<h1>Dolor sit amet</h1> <h1>Dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.</p>
</figcaption> </figcaption>
</figure> </figure>
<figure class="corpoPt2"> <figure class="corpoPt2">
@ -46,6 +46,19 @@
</figcaption> </figcaption>
</figure> </figure>
</section> </section>
<section class="corpoPt4Mobile">
<div>
<figure class="retangulo1">
<img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">
</figure>
<figure class="retangulo2">
<img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado">
</figure>
</div>
<figure class="retangulo3">
<img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto">
</figure>
</section>
<section class="corpoPt4"> <section class="corpoPt4">
<figure class="retangulo1"> <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">

98
style.css
View File

@ -3,7 +3,7 @@ body{
padding: 0; padding: 0;
border: 0; border: 0;
font-family: inter; font-family: inter;
background: #E5E5E5; background: #FFFFFF;
} }
main figure{ main figure{
margin-block-start: 0; margin-block-start: 0;
@ -50,7 +50,7 @@ main figure{
} }
.corpoPt1 p{ .corpoPt1 p{
margin-top: 28px; margin-top: 28px;
width: 65%; width: 40%;
font-size: 16px; font-size: 16px;
} }
@ -83,6 +83,15 @@ section figure figcaption p{
margin-left: 11%; margin-left: 11%;
margin-right: 11%; margin-right: 11%;
} }
.quadrado1 {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.quadrado2 {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.quadrado3 {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.quadrado1 img{ .quadrado1 img{
margin-top: 47px; margin-top: 47px;
margin-bottom: 38px; margin-bottom: 38px;
@ -102,11 +111,13 @@ section figure figcaption p{
width: 100%; width: 100%;
justify-content:center; justify-content:center;
gap: 2%; gap: 2%;
} }
.corpoPt4 figure { .corpoPt4 figure {
width: 29%; width: 29%;
margin-top: 62px; margin-top: 62px;
position: relative;
} }
.corpoPt4 figure img{ .corpoPt4 figure img{
width: 100%; width: 100%;
@ -118,7 +129,7 @@ section figure figcaption p{
width: 100%; width: 100%;
justify-content: center; justify-content: center;
gap: 0.8%; gap: 0.8%;
background: #E5E5E5; background: #FFFFFF;
} }
.corpoPt5 figure{ .corpoPt5 figure{
@ -130,6 +141,18 @@ section figure figcaption p{
font-size: 16px; font-size: 16px;
margin-bottom: 65px; margin-bottom: 65px;
} }
.box1{
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.box2{
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.box3{
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.box4{
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.box1 img{ .box1 img{
margin-top: 51px; margin-top: 51px;
width: 24%; width: 24%;
@ -152,6 +175,7 @@ section figure figcaption p{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
background: #FFFFFF;
} }
.corpoPt6 p{ .corpoPt6 p{
font-size: 16px; font-size: 16px;
@ -163,7 +187,7 @@ section figure figcaption p{
.corpoPt6 h1{ .corpoPt6 h1{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
width: 21%; width: 22%;
margin-block-start: 0; margin-block-start: 0;
margin-block-end: 0; margin-block-end: 0;
} }
@ -195,12 +219,44 @@ footer{
.retanguloMobile{ .retanguloMobile{
display: none; display: none;
} }
.corpoPt4Mobile{
display: none;
background: #E0E0E0;
}
@media(max-width:1024px){ @media(max-width:1024px){
.corpoPt1 h2{
font-size: 20px;
}
.corpoPt1 h1{
font-size: 28px;
}
.corpoPt1 p{
text-align: center;
font-size: 16px;
width: 86%;
}
.box1 figcaption p{
font-size: 14px;
}
.box2 figcaption p{
font-size: 14px;
}
.box3 figcaption p{
font-size: 14px;
}
.box4 figcaption p{
font-size: 14px;
}
.corpoPt3{ .corpoPt3{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
} }
.corpoPt6 h1{
font-size: 24px;
}
section figure { section figure {
text-align: center; text-align: center;
width: 84%; width: 84%;
@ -253,7 +309,39 @@ footer{
} }
.retanguloMobile{ .retanguloMobile{
display: flex; display: flex;
margin-bottom: 50px ; margin-bottom: 50px;
}
.corpoPt4Mobile{
display: flex;
flex-direction: column;
}
.corpoPt4Mobile div{
background: #E0E0E0;
display: flex;
flex-direction: row;
justify-content: center;
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;
} }
} }