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/responsividade
challenge-landing-page/index.html

159 lines
9.0 KiB
HTML
Raw Permalink Normal View History

feat: adicionado header da pagina
2022-10-08 22:36:55 +00:00
<!DOCTYPE html>
<html lang="en">
style: aplicando formatação do prettier
2022-10-08 22:46:43 +00:00
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
feat: adicionando link para font
2022-10-09 21:56:48 +00:00
<!-- Font da pagina - Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
feat: adicionando responsividade tela 4k
2022-10-12 02:54:16 +00:00
<link rel="stylesheet" href="./styles/responsive.css">
style: aplicando formatação do prettier
2022-10-08 22:46:43 +00:00
<title>Landing Page</title>
</head>
<body>
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
<!-- Cabecalho da pagina -->
style: aplicando formatação do prettier
2022-10-08 22:46:43 +00:00
<header>
<nav>
<a href="/">
<img
feat: adicionando link para font
2022-10-09 21:56:48 +00:00
class="logo"
feat: ultimo container da pagina
2022-10-09 02:51:14 +00:00
src="./assets/svgs/logo-m3academy.svg"
style: aplicando formatação do prettier
2022-10-08 22:46:43 +00:00
alt="Logo do treinamento M3 Academy"
/>
</a>
</nav>
</header>
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
<!-- Corpo da pagina -->
feat: adicionando banner principal
2022-10-08 23:00:09 +00:00
<main>
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
<!-- Banner principal da pagina -->
feat: adicionando banner principal
2022-10-08 23:00:09 +00:00
<div class="banner-container">
<figure class="banner-desktop">
<img
src="./assets/images/banner-desktop.png"
alt="Banner composto por uma mesa de escritorio, emcima dela um notebook com um codigo na tela"
/>
</figure>
<figure class="banner-mobile">
<img
src="./assets/images/banner-mobile.png"
alt="Benner composto por uma mesa de escritorio, emcima dela um notebook com um codigo na tela"
/>
</figure>
</div>
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
<!-- Titulo e descricao do site -->
feat: adicionando container descricao da pagina
2022-10-08 23:03:48 +00:00
<section class="container-description">
<div class="description-text">
<h2 class="description-title">Lorem ipsum <span class="description-subtitle">dolor sit amet</span></h2>
<p class="description">
fix: corrigindo conteudo dos textos
2022-10-11 00:39:46 +00:00
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.
feat: adicionando container descricao da pagina
2022-10-08 23:03:48 +00:00
</p>
</div>
<figure class="image-description">
<img
src="./assets/images/computers.png"
feat: primeiro container de cards
2022-10-08 23:42:11 +00:00
alt="Ilustração de três monitores com uma tela azul apontando uma para a outra"
feat: adicionando container descricao da pagina
2022-10-08 23:03:48 +00:00
/>
</figure>
</section>
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
<!-- Primeiro container com cards -->
feat: primeiro container de cards
2022-10-08 23:42:11 +00:00
<section class="container-cards">
<figure class="card">
<img class="card-image" src="./assets/svgs/store.svg" alt="Ilustração de uma loja com janelas e porta azul escuro">
<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/bag-safe.svg" alt="Ilustração de uma sacola de compras com um selo de um esculo azul e com uma indicação de correto dentro dele">
<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/hand-coin.svg" alt="Ilustração de uma mão segurando uma moeda azul">
<figcaption class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</section>
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
<!-- Container com tres imagens -->
feat: container com tres imagens
2022-10-09 00:03:42 +00:00
<div class="container-three-images">
fix: corrigindo conteudo dos textos
2022-10-11 00:39:46 +00:00
<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">
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
</figure>
fix: corrigindo conteudo dos textos
2022-10-11 00:39:46 +00:00
<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">
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
</figure>
fix: corrigindo conteudo dos textos
2022-10-11 00:39:46 +00:00
<figure>
<img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter">
feat: segundo container com cards
2022-10-09 01:06:36 +00:00
</figure>
</div>
</div>
fix: corrigindo conteudo dos textos
2022-10-11 00:39:46 +00:00
<!-- 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>
feat: footer da pagina
2022-10-09 21:01:20 +00:00
<!-- Artigo da pagina -->
<article class="container-article">
feat: adicionando imagem mobile no article
2022-10-12 21:17:36 +00:00
<figure class="article-image-mobile">
<img class="image-mobile" src="./assets/images/article-image-mobile.png" alt="Um oculos na frente de um monitor com a tela desfocada">
</figure>
feat: ultimo container da pagina
2022-10-09 02:51:14 +00:00
<div class="article-text">
<h3 class="article-title">Lorem ipsum dolor sit amet</h3>
<p class="article-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>
feat: adicionando imagem mobile no article
2022-10-12 21:17:36 +00:00
<figure class="article-image-desktop">
feat: ultimo container da pagina
2022-10-09 02:51:14 +00:00
<img src="./assets/images/article-image.png" alt="Varias telas de monitores desfocada">
</figure>
</article>
feat: adicionando banner principal
2022-10-08 23:00:09 +00:00
</main>
feat: footer da pagina
2022-10-09 21:01:20 +00:00
<!-- Footer da pagina -->
<footer>
<div class="social-links">
<a href="/">
<img src="./assets/svgs/instragram-icon.svg" alt="Logo do instagram com bordas brancas e fundo trasparente">
</a>
<a href="/">
<img src="./assets/svgs/facebook-icon.svg" alt="Logo do facebook branco">
</a>
<a href="/">
<img src="./assets/svgs/youtube-icon.svg" alt="Logo do youtube branca, trasparente no centro">
</a>
</div>
<span class="footer-description">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</span>
</footer>
style: aplicando formatação do prettier
2022-10-08 22:46:43 +00:00
</body>
</html>
Reference in New Issue Copy Permalink