forked from M3-Academy/challenge-landing-page
217 lines
8.7 KiB
HTML
217 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<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" />
|
|
<meta name="author" content="Henrique Santos Santana" />
|
|
<meta
|
|
name="description"
|
|
content="Isto é a descrição da página para ajudar SEO(Search Engineer Optimization)"
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="challenge, m3-academy, landing page, HTML, CSS, development, frontend, desafio, desenvolvimento"
|
|
/>
|
|
|
|
<!--===== FAVICON =====-->
|
|
<link rel="shortcut icon" href="./assets/images/simple-logo.svg" type="image/svg+xml" />
|
|
|
|
<!--===== GOOGLE FONTS =====-->
|
|
<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"
|
|
/>
|
|
|
|
<!--===== STYLES =====-->
|
|
<link rel="stylesheet" href="./assets/css/reset.css" type="text/css" />
|
|
<link rel="stylesheet" href="./assets/css/config.css" type="text/css" />
|
|
<link rel="stylesheet" href="./assets/css/main.css" type="text/css" />
|
|
|
|
<title>M3 Amazing Landing page | Challenge 1</title>
|
|
</head>
|
|
<body>
|
|
<!--=============== Header ===============-->
|
|
<header class="l-header bg-clr-black">
|
|
<a class="l-header-logo" href="/" title="Homepage link">
|
|
<img class="header-logo-image" src="./assets/images/full-logo.svg" alt="" />
|
|
</a>
|
|
</header>
|
|
|
|
<!--=============== Main Banner ===============-->
|
|
<figure class="main-banner">
|
|
<img
|
|
class="main-banner-image image-desktop"
|
|
src="./assets/images/main-banner-desktop.jpg"
|
|
alt="Um desktop aberto em um software de ambiente de desenvolvimento"
|
|
/>
|
|
<img
|
|
class="main-banner-image image-mobile"
|
|
src="./assets/images/main-banner-mobile.jpg"
|
|
alt="Um desktop aberto em um software de ambiente de desenvolvimento"
|
|
/>
|
|
</figure>
|
|
|
|
<!--=============== Information ===============-->
|
|
<section class="information">
|
|
<div class="information-texts">
|
|
<h2 class="information-subtitle text-upper">Lorem ipusm</h2>
|
|
<h1 class="information-title text-upper">Dolor sit amet</h1>
|
|
<p class="information-description">
|
|
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>
|
|
<img
|
|
src="./assets/images/information-image.png"
|
|
alt="três computadores juntos conectados por setas"
|
|
class="information-image"
|
|
/>
|
|
</figure>
|
|
</section>
|
|
|
|
<!--=============== Services ===============-->
|
|
<section class="services">
|
|
<div class="services-container flex-box">
|
|
<figure class="card flow box-shadow">
|
|
<img src="./assets/images/shop.svg" alt="shop" class="card-image" />
|
|
<figcaption class="card-description text-center">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
|
|
fringilla interdum.
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="card flow box-shadow">
|
|
<img src="./assets/images/shopping-bag.svg" alt="shopping bag" class="card-image" />
|
|
<figcaption class="card-description text-center">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
|
|
fringilla interdum.
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="card flow box-shadow">
|
|
<img src="./assets/images/handle-coin.svg" alt="handle coin" class="card-image" />
|
|
<figcaption class="card-description text-center">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
|
|
fringilla interdum.
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!--=============== Gallery ===============-->
|
|
<div class="gallery bg-clr-gray">
|
|
<figure class="gallery-container grid-box">
|
|
<img class="gallery-image gallery-image-1" src="./assets/images/gallery-1.jpg" alt="" />
|
|
<img class="gallery-image gallery-image-2" src="./assets/images/gallery-2.jpg" alt="" />
|
|
<img class="gallery-image gallery-image-3" src="./assets/images/gallery-3.jpg" alt="" />
|
|
</figure>
|
|
</div>
|
|
|
|
<!--=============== Features ===============-->
|
|
<section class="features">
|
|
<div class="features-container flex-box center">
|
|
<figure class="card flow box-shadow">
|
|
<img class="card-image" src="./assets/images/money.svg" alt="Dinheiro" />
|
|
<figcaption class="card-description text-center">
|
|
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 flow box-shadow">
|
|
<img
|
|
class="card-image"
|
|
src="./assets/images/handle-coin.svg"
|
|
alt="Mão estendida com uma moeda"
|
|
/>
|
|
<figcaption class="card-description text-center">
|
|
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 flow box-shadow">
|
|
<img
|
|
class="card-image"
|
|
src="./assets/images/laptop.svg"
|
|
alt="Um laptop aberto em umas de suas páginas do seu ecommerce"
|
|
/>
|
|
<figcaption class="card-description text-center">
|
|
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 flow box-shadow">
|
|
<img
|
|
class="card-image"
|
|
src="./assets/images/phone-notificated.svg"
|
|
alt="Um celular que contém suas notificações"
|
|
/>
|
|
<figcaption class="card-description text-center">
|
|
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>
|
|
</section>
|
|
|
|
<!--=============== Blog ===============-->
|
|
|
|
<section class="blog">
|
|
<div class="blog-container flex-box" data-type="reversed">
|
|
<article class="blog-article flow">
|
|
<h2 class="blog-title text-center">Lorem ipsum dolor sit amet</h2>
|
|
<p class="blog-description text-center">
|
|
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>
|
|
</article>
|
|
|
|
<figure class="blog-images">
|
|
<img
|
|
class="blog-images-image image-desktop"
|
|
src="./assets/images/blog-desktop.jpg"
|
|
alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
|
|
/>
|
|
<img
|
|
class="blog-images-image image-mobile"
|
|
src="./assets/images/blog-mobile.jpg"
|
|
alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!--=============== Footer ===============-->
|
|
<footer class="footer flex-box center bg-clr-black">
|
|
<ul class="footer-socials flex-box center">
|
|
<li>
|
|
<a href="/">
|
|
<img src="./assets/images/instagram-logo.svg" alt="" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/">
|
|
<img src="./assets/images/facebook-logo.svg" alt="" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/">
|
|
<img src="./assets/images/youtube-logo.svg" alt="" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="text-center text-upper clr-gray-100">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|