feat(index): adiciona os cards de baixo desktop e mobile

This commit is contained in:
Nicolly Vieira Santos Costa 2022-10-10 12:56:28 -03:00
parent 22236992ae
commit edc1e1197f
6 changed files with 85 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -23,7 +23,7 @@
</header>
<main>
<!-- banner -->
<!-- main banner -->
<div>
<figure>
<!-- banner desktop -->
@ -49,7 +49,7 @@
</section>
<!-- top cards-->
<div class="top-cards">
<div class="top-cards">
<figure class="top-card">
<img class="top-card-image" src="assets/images/top-card-image-01.png" alt="imagem do primeiro card do topo" />
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
@ -71,6 +71,7 @@
</figure>
</div>
<!-- middle banner-->
<div>
<figure>
<!-- banner desktop -->
@ -81,6 +82,32 @@
alt="imagem de um computador" />
</figure>
</div>
<!-- bottom cards -->
<div class="bottom-cards">
<div class="bottom-cards-wrapper">
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-01.png" alt="imagem do primeiro card de baixo" />
<figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-02.png" alt="imagem do segundo card de baixo" />
<figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-03.png" alt="imagem do terceiro card de baixo" />
<figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-04.png" alt="imagem do terceiro card de baixo" />
<figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
</main>
</body>

View File

@ -104,6 +104,48 @@ body {
width: 86%;
}
/*bottom card*/
.bottom-cards {
margin-top: 140px;
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
}
.bottom-cards-wrapper {
display: grid;
grid-template-columns: repeat(2, 23%);
justify-content: center;
gap: 20px;
position: relative;
top: -60px;
}
.bottom-card {
display: flex;
align-items: center;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 36px 32px 66px;
}
.bottom-card-image {
width: 24%;
display: block;
}
.bottom-card-description {
margin-top: 15px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
width: 86%;
}
@media screen and (max-width: 1024px) {
/*top infocard*/
.top-infocard {
@ -154,6 +196,20 @@ body {
.top-card-image {
max-width: 120px;
}
/*bottom cards*/
.bottom-cards {
padding: 26px;
}
.bottom-cards-wrapper {
grid-template-columns: 1fr;
gap: 16px;
}
.bottom-card-image {
max-width: 120px;
}
}
@media screen and (max-width: 414px) {