Feat(home): Cria Media Query mobile (max 1024px)
This commit is contained in:
parent
19acc8abbc
commit
4aeff89d7c
@ -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{
|
||||
@ -109,13 +109,13 @@ body{
|
||||
justify-content: center;
|
||||
gap: 38px;
|
||||
position: relative;
|
||||
top: 62px;
|
||||
|
||||
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{
|
||||
@ -242,4 +240,104 @@ body{
|
||||
font-size: 20px;
|
||||
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
19
index.html
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user