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

73
html/index.html
View File

@ -130,45 +130,52 @@
</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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="bottom-card">
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="bottom-card">
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="bottom-card">
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="bottom-card">
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="bottom-card">
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
<div class="bottom-card">
<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
ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</div>
</div>
</section>
<section class="bottom-infocard">

28
html/main.styles/style.css
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 ///////////////////*/
@ -73,10 +80,9 @@
padding-top: 62px;
}
.infocards-center{
.infocards-center {
display: flex;
gap: 40px;
}
.infocard-center {
@ -84,11 +90,11 @@
gap: 40px;
}
.middle-banner{
.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 {