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 para o infocard de baixo para desktop e mobile

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2022-10-11 15:17:27 -03:00
parent 735c1a1b65
commit 71887fd56c
2 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bottom-infocard-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

65
index.html
View File

@ -28,7 +28,7 @@
<figure>
<!-- Versão Desktop -->
<img class="main-banner main-banner-desktop" src="assets/images/main-banner-image-desktop.png"
alt="iamgem do banner principal" />
alt="imagem do banner principal" />
<!-- Versão Mobile -->
<img class="main-banner main-banner-mobile" src="assets/images/main-banner-image-mobile.png"
alt="imagem do banner principal" />
@ -61,16 +61,16 @@
</figure>
<figure class="card top-card">
<img class="top-card-image" src="assets/images/card-image-bag.png" alt="imagem do segundo card do topo" />
<img class="top-card-image" src="assets/images/card-image-bag.png"
alt="imagem do segundo card do topo" />
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Craseuismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="card top-card" />
<img class="top-card-image" src="assets/images/card-image-coin.png"
alt="imagem do terceiro card do topo">
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Craseuismod enim non dui fringilla interdum.</figcaption>
<img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo">
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Craseuismod enim non dui fringilla interdum.</figcaption>
</figure>
</div>
@ -78,13 +78,16 @@
<div class="middle-images">
<div class="middle-images-wrapper">
<figure class="middle-image-container middle-image-1">
<img class="middle-image" src="assets/images/middle-image-01.png" alt="primeira imagem de um computador">
<img class="middle-image" src="assets/images/middle-image-01.png"
alt="primeira imagem de um computador">
</figure>
<figure class="middle-image-container middle-image-2">
<img class="middle-image" src="assets/images/middle-image-02.png" alt="segunda imagem de um computador">
<img class="middle-image" src="assets/images/middle-image-02.png"
alt="segunda imagem de um computador">
</figure>
<figure class="middle-image-container middle-image-3">
<img class="middle-image" src="assets/images/middle-image-03.png" alt="terceira imagem de um computador">
<img class="middle-image" src="assets/images/middle-image-03.png"
alt="terceira imagem de um computador">
</figure>
</div>
</div>
@ -94,26 +97,52 @@
<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>
<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>
<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>
<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>
<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>
<!-- bottom infocard -->
<article class="bottom-infocard">
<div class="bottom-infocard-content">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
<figure class="bottom-infocard-image-container">
<img class="bottom-infocard-image" src="assets/images/bottom-infocard-image.png"
alt="imagem do infocard de baixo">
</figure>
</article>
</main>
</body>