SauloKleinNery/challenge-landing-page
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity
6b38cb05e8
challenge-landing-page/index.html

196 lines
8.5 KiB
HTML
Raw Normal View History

feat: Cria caebecalho desktop e mobile
2022-10-11 14:05:41 +00:00
<!DOCTYPE html>
<html lang="pt-BR">
<head>
feat: Cria infocard superior desktop
2022-10-11 16:40:02 +00:00
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
feat: Cria cards superiores desktop
2022-10-11 18:27:45 +00:00
feat: Cria caebecalho desktop e mobile
2022-10-11 14:05:41 +00:00
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="author" content="Saulo Klein Nery"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Desafio 1 Landing Page</title>
feat: Cria infocard superior desktop
2022-10-11 16:40:02 +00:00
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="./styles/main.css"/>
feat: Cria caebecalho desktop e mobile
2022-10-11 14:05:41 +00:00
</head>
feat: Cria cards superiores desktop
2022-10-11 18:27:45 +00:00
feat: Cria caebecalho desktop e mobile
2022-10-11 14:05:41 +00:00
<body>
feat: Cria cards inferiores desktop
2022-10-12 17:29:03 +00:00
feat: Cria caebecalho desktop e mobile
2022-10-11 14:05:41 +00:00
<header class="page-header">
<a href="#">
<img src="./assets/svgs/m3-logo.svg" alt="Logo da M3">
</a>
</header>
feat: Cria banner principal desktop e mobile
2022-10-11 14:34:09 +00:00
<div>
fix: Coloca banner principal dentro de uma tag figure
2022-10-11 14:37:18 +00:00
<figure>
feat: Cria infocard superior desktop
2022-10-11 16:40:02 +00:00
<img class="main-banner main-banner-desktop" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal Desktop">
<img class="main-banner main-banner-mobile" src="./assets/imgs/main-banner-mobile.png" alt="Banner Principal Mobile">
fix: Coloca banner principal dentro de uma tag figure
2022-10-11 14:37:18 +00:00
</figure>
feat: Cria banner principal desktop e mobile
2022-10-11 14:34:09 +00:00
</div>
fix: Coloca banner principal dentro de uma tag figure
2022-10-11 14:37:18 +00:00
feat: Cria infocard superior desktop
2022-10-11 16:40:02 +00:00
<section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitle">
Lorem ipsum
</h2>
<h1 class="top-infocard-title">
dolor sit amet
</h1>
<p class="top-infocard-description">
feat: Cria cards superiores desktop
2022-10-11 18:27:45 +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: Cria infocard superior desktop
2022-10-11 16:40:02 +00:00
</p>
</div>
<figure class="top-infocard-figure">
<img class="top-infocard-image" src="./assets/svgs/top-infocard-image.svg" alt="Imagem do Infocard Superior">
</figure>
</section>
feat: Cria cards superiores desktop
2022-10-11 18:27:45 +00:00
<div class="top-cards">
<div class="top-card">
<figure class="top-card-figure">
<img class="top-card-image" src="./assets/svgs/top-card01.svg" alt="Imagem do Primeiro Card Superior">
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="top-card">
<figure class="top-card-figure">
<img class="top-card-image" src="./assets/svgs/top-card02.svg" alt="Imagem do Segundo Card Superior">
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="top-card">
<figure class="top-card-figure">
<img class="top-card-image" src="./assets/svgs/top-card03.svg" alt="Imagem do Terceiro Card Superior">
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
feat: Cria cards centrais desktop
2022-10-11 19:25:11 +00:00
<div class="middle-card-images">
<div class="middle-card-images-wrapper">
<figure>
<img class="middle-card-image" src="./assets/svgs/middle-card-image01.svg" alt="Imagem do Primeiro Card Central">
</figure>
feat: Adiciona cards centrais mobile
2022-10-11 19:46:13 +00:00
<figure id="middle-card02">
feat: Cria cards centrais desktop
2022-10-11 19:25:11 +00:00
<img class="middle-card-image" src="./assets/svgs/middle-card-image02.svg" alt="Imagem do Segundo Card Central">
</figure>
feat: Adiciona cards centrais mobile
2022-10-11 19:46:13 +00:00
<figure id="middle-card03">
feat: Cria cards centrais desktop
2022-10-11 19:25:11 +00:00
<img class="middle-card-image" src="./assets/svgs/middle-card-image03.svg" alt="Imagem do Terceiro Card Central">
</figure>
</div>
</div>
feat: Cria cards inferiores desktop
2022-10-12 17:29:03 +00:00
<div class="bottom-cards">
<div class="bottom-card">
<figure class="bottom-card-figure">
<img class="bottom-card-image" src="./assets/svgs/bottom-card-image01.svg" alt="Imagem do Primeiro Card Inferior">
<figcaption class="bottom-card-text">
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>
</div>
<div class="bottom-card">
<figure class="bottom-card-figure">
<img class="bottom-card-image" src="./assets/svgs/bottom-card-image02.svg" alt="Imagem do Segundo Card Inferior">
<figcaption class="bottom-card-text">
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>
</div>
<div class="bottom-card">
<figure class="bottom-card-figure">
<img class="bottom-card-image" src="./assets/svgs/bottom-card-image03.svg" alt="Imagem do Terceiro Card Inferior">
<figcaption class="bottom-card-text">
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>
</div>
<div class="bottom-card">
<figure class="bottom-card-figure">
<img id="bottom-card-image04" class="bottom-card-image" src="./assets/svgs/bottom-card-image04.svg" alt="Imagem do Quarto Card Inferior">
<figcaption class="bottom-card-text">
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>
</div>
</div>
feat: Cria artigo inferior desktop
2022-10-12 18:33:01 +00:00
<article class="bottom-article">
<div class="bottom-article-text">
<h2 class="bottom-article-title">
Lorem ipsum dolor sit amet
</h2>
<p class="bottom-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>
<figure class="bottom-article-figure">
<img class="bottom-banner bottom-banner-desktop" src="./assets/imgs/bottom-banner-desktop.png" alt="Banner Inferior Desktop">
<img class="bottom-banner bottom-banner-mobile" src="./assets/imgs/bottom-banner-mobile.png" alt="Banner Inferior Mobile">
</figure>
</article>
feat: Cria footer desktop
2022-10-12 19:26:18 +00:00
<footer class="page-footer">
<ul class="footer-list">
<li>
<a href="https://www.instagram.com/m3.ecommerce/?theme=dark">
<img src="./assets/svgs/instagram-icon.svg" alt="Ícone do Instagram">
</a>
</li>
<li>
<a href="pt-br.facebook.com/digitalm3/">
<img src="./assets/svgs/facebook-icon.svg" alt="Ícone do Facebook">
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA/featured">
<img src="./assets/svgs/youtube -icon.svg" alt="Ícone do Youtube">
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
feat: Cria caebecalho desktop e mobile
2022-10-11 14:05:41 +00:00
</body>
</html>
Reference in New Issue Copy Permalink