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

feat(index): adiciona a estrutura do HTML dos cards de baixo para desktop e mobile #14

Merged
NicollyVieira merged 1 commits from feature/bottom-cards into main 2022-10-11 17:41:32 +00:00
Conversation 0 Commits 1 Files Changed 5 +27 -1
5 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/card-image-cellphone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/images/card-image-laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/images/card-image-money.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

26
index.html
View File

@ -88,6 +88,32 @@
</figure>
</div>
</div>
<!-- Bottom cards -->
<div class="cards bottom-cards">
<figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-money.png"
alt="imagem do primeiro card do bottomo" />
<figcaption 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. </figcaption>
</figure>
<figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-coin.png" alt="imagem do segundo card do bottomo" />
<figcaption 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. </figcaption>
</figure>
<figure class="card bottom-card" />
<img class="bottom-card-image" src="assets/images/card-image-laptop.png"
alt="imagem do terceiro card do bottomo">
<figcaption 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. </figcaption>
</figure>
<figure class="card bottom-card" />
<img class="bottom-card-image" src="assets/images/card-image-cellphone.png"
alt="imagem do terceiro card do bottomo">
<figcaption 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. </figcaption>
</figure>
</div>
</main>
</body>

2
styles/main.css
View File

@ -138,6 +138,7 @@ body {
/*middle images*/
.middle-images {
background: #E0E0E0;
margin-bottom: 190px;
}
.middle-images-wrapper {
@ -238,7 +239,6 @@ body {
}
/*4K*/
@media screen and (min-width: 2500px) {
/*top infocard*/
.top-infocard-subtitle {