feat: ajustando o bottom card

This commit is contained in:
PATRICK DE SOUZA SILVA 2022-10-12 18:01:01 -03:00
parent 3c4549dd71
commit b1c24cc2f6
2 changed files with 54 additions and 47 deletions

View File

@ -130,13 +130,14 @@
</section>
<section class="bottom-cards">
<div class="container">
<div class="bottom-card-wrapper">
<div class="bottom-card">
<img class="bottom-card-image" src="/assents/assents-img/inforcard-bottom-01.png"
alt="imagem do segundo card topo" />
<p class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem
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.
</p>
</div>
@ -145,7 +146,8 @@
<img class="bottom-card-image" src="/assents/assents-img/infocard-bottom-02.png"
alt="imagem do segundo card topo" />
<p class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem
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.
</p>
</div>
@ -154,7 +156,8 @@
<img class="bottom-card-image" src="/assents/assents-img/infocard-bottom-03.png"
alt="imagem do segundo card topo" />
<p class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem
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.
</p>
</div>
@ -163,11 +166,15 @@
<img class="bottom-card-image" src="/assents/assents-img/infocard-bottom-04.png"
alt="imagem do segundo card topo" />
<p class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem
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.
</p>
</div>
</div>
</div>
</section>

View File

@ -25,7 +25,14 @@
}
/*///////////// SECTION 01 e 02 com banner /////////////////// */
.main-banner {
display: block;
width: 100%;
}
.main-banner-mobile {
display: none;
}
/*///////////// SECTION 02 INFO CARD TOP ///////////////////*/
@ -76,7 +83,6 @@
.infocards-center {
display: flex;
gap: 40px;
}
.infocard-center {
@ -86,9 +92,9 @@
.middle-banner {
margin-bottom: -62px;
width: 100%;
}
/*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
.top-cards {
@ -111,8 +117,6 @@
background: #ffffff;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image {
@ -130,16 +134,12 @@
/*/////////// Bottom Area com imagens e background//////////////*/
.bottom-cards {
margin-top: 140px;
background: linear-gradient(180deg, #00c8ff 0%, #15acd6 100%);
margin-top: 191px;
background: #ffffff;
}
.bottom-card-wrapper {
position: relative;
top: -60px;
display: grid;
grid-template-columns: repeat(2, max-content);
display: flex;
justify-content: center;
gap: 20px;
@ -181,7 +181,7 @@
justify-content: center;
align-items: center;
gap: 40px;
background: #e5e5e5;
background: #ffffff;
}
.bottom-infocard-image {