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{
|
.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{
|
||||||
@ -110,12 +110,12 @@ body{
|
|||||||
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{
|
||||||
@ -243,3 +241,103 @@ body{
|
|||||||
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
19
index.html
@ -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>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user