PatrickSouzaSilva/challenge-landing-page
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ajustando o bottom card

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
html/index.html
View File

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

28
html/main.styles/style.css
View File

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