Feat(home): Cria Media Query mobile (max 1024px)

This commit is contained in:
Rhayllon Daudt 2022-10-13 16:25:17 -03:00
parent 19acc8abbc
commit 4aeff89d7c
2 changed files with 122 additions and 21 deletions

View File

@ -41,7 +41,7 @@ body{
.top-infocard-text{
width: 40%;
padding: 72px 0;
margin: 72px 0;
}
.top-infocard-subtitle{
@ -66,7 +66,7 @@ body{
.top-infocard-image{
width: 17%;
padding: 0 0 178px;
margin: 0 0 178px;
}
.top-cards{
@ -74,7 +74,7 @@ body{
grid-template-columns: repeat(3, 18%);
gap: 20px;
justify-content: center;
padding: 0 0 80px;
margin: 0 0 80px;
}
.top-card{
@ -110,12 +110,12 @@ body{
gap: 38px;
position: relative;
top: 62px;
}
.mid-banner-image{
width: 100%;
}
width: 100%;
}
.bottom-cards{
display: grid;
@ -131,8 +131,8 @@ body{
align-items: center;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
gap: 15px;
padding: 36px 32px 65px;
gap: 16px;
padding: 36px 32px 64px;
}
.bottom-card-image{
@ -154,6 +154,7 @@ body{
justify-content: center;
flex-direction: column;
gap: 50px;
margin: 0 0 116px;
}
.bottom-section-text{
@ -173,10 +174,6 @@ body{
line-height: 24px;
}
.bottom-section-image{
padding: 0 0 116px;
}
.bottom-section-image-desktop{
width: 71%;
}
@ -194,6 +191,7 @@ body{
flex-direction: column;
width: 21%;
align-items: center;
text-align: center;
}
.footer-icons{
@ -243,3 +241,103 @@ body{
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;
}
}

View File

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