josecarloslins/challenge-landing-page-jose-carlos-lins
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Compare commits

merge into: josecarloslins:main
Branches Tags
josecarloslins:main
josecarloslins:feature/otimization
josecarloslins:feature/footer
josecarloslins:feature/footer-section
josecarloslins:feature/infocards-footer
josecarloslins:feature/banner-middle
josecarloslins:feature/section-top-infocards-icons
josecarloslins:feature/section-infocard-top
josecarloslins:feature/banner-top
josecarloslins:feature/header
...
pull from: josecarloslins:feature/otimization
Branches Tags
josecarloslins:main
josecarloslins:feature/otimization
josecarloslins:feature/footer
josecarloslins:feature/footer-section
josecarloslins:feature/infocards-footer
josecarloslins:feature/banner-middle
josecarloslins:feature/section-top-infocards-icons
josecarloslins:feature/section-infocard-top
josecarloslins:feature/banner-top
josecarloslins:feature/header

1 Commits
main ... feature/ot

Author SHA1 Message Date
José Carlos Lins
ded83c0e1d fix: HTML Semântico - Add Tag Main 2022-10-12 17:09:21 +00:00
1 changed files with 78 additions and 76 deletions
Show Stats Expand all files Collapse all files

152
index.html
View File

@ -26,89 +26,91 @@
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" /> <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
</div> </div>
<section class="top-infocard"> <main>
<div class="top-infocard-text"> <section class="top-infocard">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <div class="top-infocard-text">
<h1 class="top-infocard-title">Dolor sit amet</h1> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">Dolor sit amet</h1>
<p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.</p> <p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.</p>
</div>
<figure class="wrapper-top-infocard"><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure>
</section>
<section class="top-cards">
<div class="top-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure>
<p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure>
<p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure>
<p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
<div class="middle-banner">
<div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador" /></div>
<div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador" /></div>
<div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador" /></div>
</div> </div>
<figure class="wrapper-top-infocard"><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure> <section class="footer-cards">
</section> <div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure>
<p class="footer-card-description 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.
</p>
</div>
<section class="top-cards"> <div class="footer-card">
<div class="top-card"> <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure>
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure> <p class="footer-card-description card-description">
<p class="top-card-description 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</p> </div>
</div>
<div class="top-card"> <div class="footer-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure> <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure>
<p class="top-card-description card-description"> <p class="footer-card-description 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="top-card"> <div class="footer-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure> <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure>
<p class="top-card-description card-description"> <p class="footer-card-description 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
</section> </section>
<div class="middle-banner"> <section class="section-footer">
<div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador" /></div> <div class="section-footer-text">
<div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador" /></div> <h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2>
<div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador" /></div> <p class="section-footer-description">
</div> 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>
<section class="footer-cards"> <img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" />
<div class="footer-card"> <img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" />
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure> </section>
<p class="footer-card-description card-description"> </main>
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.
</p>
</div>
<div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure>
<p class="footer-card-description 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.
</p>
</div>
<div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure>
<p class="footer-card-description 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.
</p>
</div>
<div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure>
<p class="footer-card-description 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.
</p>
</div>
</section>
<section class="section-footer">
<div class="section-footer-text">
<h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2>
<p class="section-footer-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>
<img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" />
<img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" />
</section>
<footer class="page-footer"> <footer class="page-footer">
<div class="social-links"> <div class="social-links">