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> </figure>
</div> </div>
</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> </main>
</body> </body>

2
styles/main.css
View File

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