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