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

22
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,6 +81,7 @@
</section> </section>
<!-- Container com tres imagens --> <!-- Container com tres imagens -->
<div class="container-three-images"> <div class="container-three-images">
<div class="three-images-wrapper">
<figure> <figure>
<img src="./assets/images/notebook-1.png" alt="Notebook com sua tela quase fechada iluminando o teclado com cores alaranjadas"> <img src="./assets/images/notebook-1.png" alt="Notebook com sua tela quase fechada iluminando o teclado com cores alaranjadas">
</figure> </figure>
@ -95,35 +92,34 @@
<img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter"> <img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter">
</figure> </figure>
</div> </div>
</div>
<!-- Segundo container com cards --> <!-- Segundo container com cards -->
<div class="container-cards second"> <section class="container-cards second">
<div class="cards">
<figure class="card"> <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"> <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"> <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
<figure class="card"> <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"> <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"> <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
<figure class="card"> <figure class="card">
<img class="card-image" src="./assets/svgs/laptop.svg" alt="Notebook navegando em um site de compras"> <img class="card-image" src="./assets/svgs/laptop.svg" alt="Notebook navegando em um site de compras">
<figcaption class="card-description"> <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
<figure class="card"> <figure class="card">
<img class="card-image" src="./assets/svgs/smartphone.svg" alt="Celular recebendo uma notificação"> <img class="card-image" src="./assets/svgs/smartphone.svg" alt="Celular recebendo uma notificação">
<figcaption class="card-description"> <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
</div> </section>
</div>
<!-- Artigo da pagina --> <!-- Artigo da pagina -->
<article class="container-article"> <article class="container-article">
<div class="article-text"> <div class="article-text">