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

Merge pull request 'feat(index): adiciona a estrutura do HTMl para o infocard de baixo para desktop e mobile' (#16) from feature/bottom-infocard into main

Browse Source 
Reviewed-on: #16
This commit is contained in:
Nicolly Vieira Santos Costa 2022-10-11 18:18:44 +00:00
commit c8d2e3e5ff
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

53
index.html
View File

@ -28,7 +28,7 @@
<figure> <figure>
<!-- Versão Desktop --> <!-- Versão Desktop -->
<img class="main-banner main-banner-desktop" src="assets/images/main-banner-image-desktop.png" <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 --> <!-- Versão Mobile -->
<img class="main-banner main-banner-mobile" src="assets/images/main-banner-image-mobile.png" <img class="main-banner main-banner-mobile" src="assets/images/main-banner-image-mobile.png"
alt="imagem do banner principal" /> alt="imagem do banner principal" />
@ -61,14 +61,14 @@
</figure> </figure>
<figure class="card top-card"> <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. <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Craseuismod enim non dui fringilla interdum.</figcaption> Craseuismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
<figure class="card top-card" /> <figure class="card top-card" />
<img class="top-card-image" src="assets/images/card-image-coin.png" <img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo">
alt="imagem do terceiro card do topo">
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Craseuismod enim non dui fringilla interdum.</figcaption> Craseuismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
@ -78,13 +78,16 @@
<div class="middle-images"> <div class="middle-images">
<div class="middle-images-wrapper"> <div class="middle-images-wrapper">
<figure class="middle-image-container middle-image-1"> <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>
<figure class="middle-image-container middle-image-2"> <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>
<figure class="middle-image-container middle-image-3"> <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> </figure>
</div> </div>
</div> </div>
@ -94,26 +97,52 @@
<figure class="card bottom-card"> <figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-money.png" <img class="bottom-card-image" src="assets/images/card-image-money.png"
alt="imagem do primeiro card do bottomo" /> 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>
<figure class="card bottom-card"> <figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-coin.png" alt="imagem do segundo card do bottomo" /> <img class="bottom-card-image" src="assets/images/card-image-coin.png"
<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> 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>
<figure class="card bottom-card" /> <figure class="card bottom-card" />
<img class="bottom-card-image" src="assets/images/card-image-laptop.png" <img class="bottom-card-image" src="assets/images/card-image-laptop.png"
alt="imagem do terceiro card do bottomo"> 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> <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>
<figure class="card bottom-card" /> <figure class="card bottom-card" />
<img class="bottom-card-image" src="assets/images/card-image-cellphone.png" <img class="bottom-card-image" src="assets/images/card-image-cellphone.png"
alt="imagem do terceiro card do bottomo"> 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> <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>
</div> </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> </main>
</body> </body>