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