feat(index): Adicionado o infocard de baixo

This commit is contained in:
Wellington Duarte Santos 2022-10-12 11:16:56 -03:00
parent 961f73efe3
commit 2467ace665
4 changed files with 101 additions and 9 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

View File

@ -131,9 +131,44 @@ body{
justify-content: center;
}
/*** BOTTOM INFOCARD ***/
.bottom-infocard{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-top: 108px;
max-width: 70%;
}
.bottom-infocard-title{
text-align: center;
font-weight: 600;
font-size: 32px;
line-height: 39px;
}
.bottom-infocard-description{
text-align: center;
font-size: 16px;
line-height: 24px;
max-width: 40%;
}
.bottom-infocard-image-desktop{
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 50px;
}
@media screen and (max-width: 1024px){
/*** MAIN BANNER ***/
.main-banner-desktop{
/*** MAIN BANNER E BOTTOM INFOCARD ***/
.main-banner-desktop,
.bottom-infocard-image-desktop{
display: none;
}
@ -185,6 +220,7 @@ body{
.mid-banners{
padding: 0 24px 0;
}
.mid-banner-wrapper{
width: 100%;
grid-template-columns: repeat(2, 45%);
@ -199,7 +235,6 @@ body{
}
/*** BOTTOM CARDS ***/
.bottom-cards{
grid-template-columns: repeat(1, 100%);
padding: 0 28px 0;
@ -210,11 +245,42 @@ body{
font-size: 14px;
line-height: 24px;
}
/*** BOTTOM INFOCARD ***/
.bottom-infocard{
margin-top: 98px;
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
.bottom-infocard-title{
order: 2;
font-size: 24px;
line-height: 29px;
margin-top: 50px;
}
.bottom-infocard-description{
order: 3;
font-size: 16px;
line-height: 24px;
max-width: 100%;
margin: 10px 32px 0;
}
.bottom-infocard-image-mobile{
order: 1;
display: block;
width: 100%;
}
}
@media screen and (min-width: 1025px){
/*** MAIN BANNER ***/
.main-banner-mobile{
/*** MAIN BANNER E BOTTOM INFOCARD ***/
.main-banner-mobile,
.bottom-infocard-image-mobile{
display: none;
}
}

View File

@ -115,7 +115,7 @@
<!-- CARD 01 -->
<div class="card">
<figure>
<img src="./assets/bottom-card1.svg" alt="Ícone de uma loja" class="card-image">
<img src="./assets/bottom-card1.svg" alt="Ícone de cedulas de dinheiro" class="card-image">
</figure>
<figcaption class="card-description bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -125,7 +125,7 @@
<!-- CARD 02 -->
<div class="card">
<figure>
<img src="./assets/top-card03.svg" alt="Ícone de uma sacola de compras" class="card-image">
<img src="./assets/top-card03.svg" alt="Ícone de uma mão fazendo pagamentos" class="card-image">
</figure>
<figcaption class="card-description bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -135,7 +135,7 @@
<!-- CARD 03 -->
<div class="card">
<figure>
<img src="./assets/bottom-card3.svg" alt="Ícone de uma mão fazendo pagamentos" class="card-image">
<img src="./assets/bottom-card3.svg" alt="Ícone de um notebook" class="card-image">
</figure>
<figcaption class="card-description bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -145,7 +145,7 @@
<!-- CARD 04 -->
<div class="card">
<figure>
<img src="./assets/bottom-card4.svg" alt="Ícone de uma sacola de compras" class="card-image">
<img src="./assets/bottom-card4.svg" alt="Ícone de um celular" class="card-image">
</figure>
<figcaption class="card-description bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -153,6 +153,32 @@
</div>
</div>
<!-- BOTTOM INFOCARD -->
<section class="bottom-infocard">
<!-- TITLE -->
<p class="bottom-infocard-title">
Lorem ipsum dolor sit amet
</p>
<!-- DESCRIPTION -->
<p class="bottom-infocard-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
<!-- IMAGE DESKTOP -->
<figure>
<img class="bottom-infocard-image-desktop" src="./assets/bottom-infocard-image-desktop.png" alt="Imagem de monitores desfocados">
</figure>
<!-- IMAGE IMAGE MOBILE -->
<figure>
<img class="bottom-infocard-image-mobile" src="./assets/bottom-infocard-image-mobile.png" alt="Imagem de telas de um óculos com monitores ao fundo">
</figure>
</section>