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

RodrigoJorge #1

Merged
RodrigoJorge merged 13 commits from RodrigoJorge into main 2022-10-13 00:50:18 +00:00
Conversation 0 Commits 13 Files Changed 21 +107 -6
2 changed files with 107 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e3aeb4c152 - Show all commits

15
index.html
View File

@ -20,7 +20,7 @@
<figcaption class="corpoPt1">
<h2>Lorem Ipsum</h2>
<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>
</figure>
<figure class="corpoPt2">
@ -46,6 +46,19 @@
</figcaption>
</figure>
</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">
<figure class="retangulo1">
<img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">

98
style.css
View File

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