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

Adicionado bottom-cards

Browse Source
This commit is contained in:
Lorena Camila Coelho Máximo 2022-10-13 21:25:37 -04:00
parent 97f18c47a8
commit 8bb6ffc32d
2 changed files with 125 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
assets/styles/main.css
View File

@ -62,7 +62,6 @@ body {
.top-cards {
gap: 21px;
display: grid;
background: #F0F0F0;
justify-content: center;
grid-template-columns: repeat(3, max-content);
}
@ -88,10 +87,17 @@ body {
}
.middle-banners {
background: #E0E0E0;
margin: 80px 0 62px;
}
.middle-banners-wrapper {
gap: 39px;
display: flex;
padding: 80px 72px;
padding: 0 72px;
justify-content: center;
position: relative;
top: 62px;
}
.middle-banner {
@ -104,6 +110,66 @@ body {
height: 100%;
}
.bottom-cards {
}
.bottom-cards-wrapper {
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: center;
gap: 16px;
}
.bottom-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 32px 66px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-image {
display: block;
margin-bottom: 14px;
}
.bottom-card-description {
max-width: 368px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.bottom-infocard {
display: flex;
align-items: center;
justify-content: center;
padding: 142px 0 180px;
}
.bottom-infocard-image {
margin-right: 40px;
}
.bottom-infocard-text {
max-width: 550px;
}
.bottom-infocard-title {
margin-bottom: 18px;
font-weight: 600;
font-size: 32px;
line-height: 1;
}
.bottom-infocard-description {
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 414px) {
.main-banner-desktop {
display: none;

67
index.html
View File

@ -74,19 +74,66 @@
</section>
<section class="middle-banners">
<div class="middle-banner">
<div>
<img class="middle-banner-one" src="./assets/images/middle-banner-01.png"
alt="Banner do Meio Um" />
<div class="middle-banners-wrapper">
<div class="middle-banner">
<div>
<img class="middle-banner-one" src="./assets/images/middle-banner-01.png"
alt="Banner do Meio Um" />
</div>
<div>
<img class="middle-banner-two" src="./assets/images/middle-banner-02.png"
alt="Banner do Meio Dois" />
</div>
</div>
<div>
<img class="middle-banner-two" src="./assets/images/middle-banner-02.png"
alt="Banner do Meio Dois" />
<div class="middle-banner">
<img class="middle-banner-three" src="./assets/images/middle-banner-03.png"
alt="Banner do Meio Tres" />
</div>
</div>
<div class="middle-banner">
<img class="middle-banner-three" src="./assets/images/middle-banner-03.png"
alt="Banner do Meio Tres" />
</section>
<section class="bottom-cards">
<div class="bottom-cards-wrapper">
<div class="bottom-card">
<img class="bottom-card-image" src="/assets/images/bottom-banner-01.png"
alt="Imagem do Primeiro Card do de Baixo" />
<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="/assets/images/bottom-banner-02.png"
alt="Imagem do Segundo Card do de Baixo" />
<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="/assets/images/bottom-banner-03.png"
alt="Imagem do Terceiro Card do de Baixo" />
<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="/assets/images/bottom-banner-04.png"
alt="Imagem do Quarto Card do de Baixo" />
<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>
</section>
</main>