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

feature/estilizacao-da-pagina #2

Merged
MateusLopes merged 11 commits from feature/estilizacao-da-pagina into main 2022-10-12 01:33:32 +00:00
Conversation 0 Commits 11 Files Changed 5 +35 -39
1 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5c2f93b55c - Show all commits

74
index.html
View File

@ -48,11 +48,7 @@
<div class="description-text">
<h2 class="description-title">Lorem ipsum <span class="description-subtitle">dolor sit amet</span></h2>
<p class="description">
Lorem ipsum dolor sit amet 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.
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="image-description">
@ -85,45 +81,45 @@
</section>
<!-- Container com tres imagens -->
<div class="container-three-images">
<figure>
<img src="./assets/images/notebook-1.png" alt="Notebook com sua tela quase fechada iluminando o teclado com cores alaranjadas">
</figure>
<figure>
<img src="./assets/images/notebook-2.png" alt="Notebook com a tela semi-aberta iluminando o teclado com cores azuis e vermelho formando um rosa no centro">
</figure>
<figure>
<img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter">
</figure>
</div>
<!-- Segundo container com cards -->
<div class="container-cards second">
<div class="cards">
<figure class="card">
<img class="card-image" src="./assets/svgs/money.svg" alt="Duas notas uma por cima da outra, com a cor azul no centro">
<figcaption class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
<div class="three-images-wrapper">
<figure>
<img src="./assets/images/notebook-1.png" alt="Notebook com sua tela quase fechada iluminando o teclado com cores alaranjadas">
</figure>
<figure class="card">
<img class="card-image" src="./assets/svgs/hand-coin.svg" alt="Uma mão segurando uma moeda com a cor azul no seu centro">
<figcaption class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
<figure>
<img src="./assets/images/notebook-2.png" alt="Notebook com a tela semi-aberta iluminando o teclado com cores azuis e vermelho formando um rosa no centro">
</figure>
<figure class="card">
<img class="card-image" src="./assets/svgs/laptop.svg" alt="Notebook navegando em um site de compras">
<figcaption class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="card">
<img class="card-image" src="./assets/svgs/smartphone.svg" alt="Celular recebendo uma notificação">
<figcaption class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
<figure>
<img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter">
</figure>
</div>
</div>
<!-- Segundo container com cards -->
<section class="container-cards second">
<figure class="card">
<img class="card-image" src="./assets/svgs/money.svg" alt="Duas notas uma por cima da outra, com a cor azul no centro">
<figcaption class="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">
<img class="card-image" src="./assets/svgs/hand-coin.svg" alt="Uma mão segurando uma moeda com a cor azul no seu centro">
<figcaption class="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">
<img class="card-image" src="./assets/svgs/laptop.svg" alt="Notebook navegando em um site de compras">
<figcaption class="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">
<img class="card-image" src="./assets/svgs/smartphone.svg" alt="Celular recebendo uma notificação">
<figcaption class="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>
</section>
<!-- Artigo da pagina -->
<article class="container-article">
<div class="article-text">