luizfelipe9627/challenge-landing-page-luiz-felipe
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): adicionado a tag semantica main. #7

Merged
luizfelipe9627 merged 1 commits from feature/section into main 2022-10-14 16:42:24 +00:00
Conversation 0 Commits 1 Files Changed 1 +106 -104
1 changed files with 106 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
index.html
View File

@ -19,37 +19,89 @@
</a>
</header>
<section class="section1">
<img class="fundo-desktop" src="./src/assets/img/fundo-desktop.png" alt="Notebook na mesa">
<img class="fundo-mobile" src="./src/assets/img/fundo-mobile.png" alt="Notebook na mesa">
</section>
<section class="section2">
<div class="container">
<div class="container-content">
<h2 class="text-subtitle">Lorem ipsum</h2>
<h1 class="text-title">dolor sit amet</h1>
<p class="text-paragraph">
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>
<figure class="img-computers">
<img src="./src/assets/svg/computadores.svg" alt="Computadores">
<main>
<section class="section1">
<img class="fundo-desktop" src="./src/assets/img/fundo-desktop.png" alt="Notebook na mesa">
<img class="fundo-mobile" src="./src/assets/img/fundo-mobile.png" alt="Notebook na mesa">
</section>
<section class="section2">
<div class="container">
<div class="container-content">
<h2 class="text-subtitle">Lorem ipsum</h2>
<h1 class="text-title">dolor sit amet</h1>
<p class="text-paragraph">
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>
<figure class="img-computers">
<img src="./src/assets/svg/computadores.svg" alt="Computadores">
</figure>
</div>
<div class="container-cards">
<div class="card">
<figure>
<img src="./src/assets/svg/shopping.svg" alt="Loja">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/bolsa.svg" alt="Bolsa">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/moeda.svg" alt="Moeda">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="section3">
<div class="fundo">
<figure class="notebook1">
<img src="./src/assets/img/notebook1.png" alt="Notebook 1">
</figure>
<figure class="notebook2">
<img src="./src/assets/img/notebook2.png" alt="Notebook 2">
</figure>
<figure class="notebook3">
<img src="./src/assets/img/notebook3.png" alt="Notebook 3">
</figure>
</div>
</section>
<section class="section4">
<div class="container-cards">
<div class="card">
<figure>
<img src="./src/assets/svg/shopping.svg" alt="Loja">
<img src="./src/assets/svg/dinheiro.svg" alt="Dinheiro">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/bolsa.svg" alt="Bolsa">
@ -59,106 +111,56 @@
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/moeda.svg" alt="Moeda">
<img src="./src/assets/svg/compra.svg" alt="Compras">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/celular.svg" alt="Celular">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="section3">
<div class="fundo">
<figure class="notebook1">
<img src="./src/assets/img/notebook1.png" alt="Notebook 1">
</figure>
<figure class="notebook2">
<img src="./src/assets/img/notebook2.png" alt="Notebook 2">
</figure>
<div class="container-content2">
<div class="text-content-desktop">
<h1 class="text-title2">Lorem ipsum dolor sit amet</h1>
<p class="text-paragraph2">
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>
</div>
<figure class="notebook3">
<img src="./src/assets/img/notebook3.png" alt="Notebook 3">
<figure>
<img src="./src/assets/img/fundo-desktop2.png" class="fundo-desktop2" alt="Programação">
<img src="./src/assets/img/fundo-mobile2.png" class="fundo-mobile2" alt="Programação">
</figure>
</div>
</section>
<section class="section4">
<div class="container-cards">
<div class="card">
<figure>
<img src="./src/assets/svg/dinheiro.svg" alt="Dinheiro">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/bolsa.svg" alt="Bolsa">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/compra.svg" alt="Compras">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="./src/assets/svg/celular.svg" alt="Celular">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
<div class="container-content2">
<div class="text-content-desktop">
<div class="text-content-mobile">
<h1 class="text-title2">Lorem ipsum dolor sit amet</h1>
<p class="text-paragraph2">
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.
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>
</div>
<figure>
<img src="./src/assets/img/fundo-desktop2.png" class="fundo-desktop2" alt="Programação">
<img src="./src/assets/img/fundo-mobile2.png" class="fundo-mobile2" alt="Programação">
</figure>
<div class="text-content-mobile">
<h1 class="text-title2">Lorem ipsum dolor sit amet</h1>
<p class="text-paragraph2">
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>
</section>
</main>
<footer>
<div class="container-icons">