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

Feat/Media-Querrys #12

Merged
Rhayllon_Daudt merged 2 commits from Feat/Media-Querrys into develop 2022-10-13 19:30:03 +00:00
Conversation 0 Commits 2 Files Changed 2 +122 -21
2 changed files with 122 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4aeff89d7c - Show all commits

124
assets/styles/main.css
View File

@ -41,7 +41,7 @@ body{
.top-infocard-text{ .top-infocard-text{
width: 40%; width: 40%;
padding: 72px 0; margin: 72px 0;
} }
.top-infocard-subtitle{ .top-infocard-subtitle{
@ -66,7 +66,7 @@ body{
.top-infocard-image{ .top-infocard-image{
width: 17%; width: 17%;
padding: 0 0 178px; margin: 0 0 178px;
} }
.top-cards{ .top-cards{
@ -74,7 +74,7 @@ body{
grid-template-columns: repeat(3, 18%); grid-template-columns: repeat(3, 18%);
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
padding: 0 0 80px; margin: 0 0 80px;
} }
.top-card{ .top-card{
@ -109,13 +109,13 @@ body{
justify-content: center; justify-content: center;
gap: 38px; gap: 38px;
position: relative; position: relative;
top: 62px; top: 62px;
} }
.mid-banner-image{ .mid-banner-image{
width: 100%; width: 100%;
} }
.bottom-cards{ .bottom-cards{
display: grid; display: grid;
@ -131,8 +131,8 @@ body{
align-items: center; align-items: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
gap: 15px; gap: 16px;
padding: 36px 32px 65px; padding: 36px 32px 64px;
} }
.bottom-card-image{ .bottom-card-image{
@ -154,6 +154,7 @@ body{
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
gap: 50px; gap: 50px;
margin: 0 0 116px;
} }
.bottom-section-text{ .bottom-section-text{
@ -173,10 +174,6 @@ body{
line-height: 24px; line-height: 24px;
} }
.bottom-section-image{
padding: 0 0 116px;
}
.bottom-section-image-desktop{ .bottom-section-image-desktop{
width: 71%; width: 71%;
} }
@ -194,6 +191,7 @@ body{
flex-direction: column; flex-direction: column;
width: 21%; width: 21%;
align-items: center; align-items: center;
text-align: center;
} }
.footer-icons{ .footer-icons{
@ -242,4 +240,104 @@ body{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
}
@media screen and (min-width: 1025px) {
.top-banner-mobile,
.bottom-section-image-mobile{
display: none;
}
}
@media screen and (max-width: 1024px) {
.top-banner-desktop,
.bottom-section-image-desktop{
display: none;
}
.header-link{
width: 55%;
}
.top-infocard-text{
width: 86%;
margin: 72px 0 64px;
}
.top-infocard-subtitle{
font-size: 20px;
line-height: 24px;
}
.top-infocard-title{
font-size: 28px;
line-height: 34px;
}
.top-infocard-image{
width: 58%;
margin: 0 0 91px;
}
.top-cards{
display: grid;
grid-template-columns: repeat(1, 85%);
gap: 20px;
justify-content: center;
margin: 0 0 80px;
}
.top-card{
padding: 36px 26px 28px;
gap: 24px;
}
.mid-banners{
margin: 0 0 112px;
}
.mid-banner-wrapper{
display: grid;
grid-template-columns: repeat(2, 43%);
justify-content: center;
column-gap: 14px;
row-gap: 24px;
position: relative;
top: 32px;
}
.area2{
grid-area: 1/1/1/1 ;
}
.area3{
grid-area: 2/1/4/3;
}
.bottom-cards{
display: grid;
grid-template-columns: repeat(1, 89%);
gap: 16px;
justify-content: center;
margin: 0 0 98px;
}
.bottom-card-image{
display: block;
width: 29%
}
.bottom-section{
flex-direction: column-reverse;
margin: 0 0 87px;
}
.bottom-section-image,
.bottom-section-image-mobile{
width: 100%;
}
.bottom-section-text{
width: 85%;
text-align: center;
}
.bottom-section-text-title{
font-weight: 600;
font-size: 24px;
line-height: 29px;
}
.page-footer{
padding: 32px 0;
}
.page-footer-content{
width: 63%;
align-items: center;
}
} }

19
index.html
View File

@ -25,11 +25,12 @@
</header> </header>
<main> <main>
<div> <div>
<figure> <figure>
<img class="top-banner top-banner-desktop" src="./assets/images/top-banner-desktop.png" alt="Imagem de um notebook" /> <img class="top-banner top-banner-desktop" src="./assets/images/top-banner-desktop.png" alt="Imagem de um notebook" />
</figure> <img class="top-banner top-banner-mobile" src="./assets/images/top-banner-mobile.png" alt="Imagem de um notebook">
</div> </figure>
</div>
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
@ -75,15 +76,15 @@
<div class="mid-banners"> <div class="mid-banners">
<div class="mid-banner-wrapper"> <div class="mid-banner-wrapper">
<figure> <figure class="area1">
<img class="mid-banner-image" src="./assets/images/mid-image-01.png" alt="Notebook meio aberto primeiro angulo" /> <img class="mid-banner-image" src="./assets/images/mid-image-01.png" alt="Notebook meio aberto primeiro angulo" />
</figure> </figure>
<figure> <figure class="area2">
<img class="mid-banner-image" src="./assets/images/mid-image-02.png" alt="Notebook meio aberto segundo angulo" /> <img class="mid-banner-image" src="./assets/images/mid-image-02.png" alt="Notebook meio aberto segundo angulo" />
</figure> </figure>
<figure> <figure class="area3">
<img class="mid-banner-image" src="./assets/images/mid-image-03.png" alt="Notebook meio aberto terceiro angulo" /> <img class="mid-banner-image" src="./assets/images/mid-image-03.png" alt="Notebook meio aberto terceiro angulo" />
</figure> </figure>
</div> </div>
@ -136,7 +137,9 @@
</div> </div>
<figure class="bottom-section-image"> <figure class="bottom-section-image">
<img class="bottom-section-image-desktop" src="./assets/images/bottom-image-desktop.png" alt="Imagem" /> <img class="bottom-section-image-desktop" src="./assets/images/bottom-image-desktop.png" alt="Imagem" />
<img class="bottom-section-image-mobile" src="./assets/images/bottom-image-mobile.png" alt="Imagem" />
</figure> </figure>