challenge-landing-page-henr.../index.html

113 lines
4.2 KiB
HTML
Raw Normal View History

2022-10-08 22:09:09 +00:00
<!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 =====-->
2022-10-09 08:06:46 +00:00
<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 =====-->
2022-10-08 22:09:09 +00:00
<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>
2022-10-08 22:09:09 +00:00
<!--=============== 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>
2022-10-08 22:09:09 +00:00
<!--=============== 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>
<img
src="./assets/images/information-image.png"
alt="três computadores juntos conectados por setas"
class="information-image"
/>
</section>
2022-10-08 22:09:09 +00:00
<!--=============== 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>
2022-10-08 22:09:09 +00:00
<!--=============== Gallery ===============-->
<!--=============== Features ===============-->
<!--=============== Blog ===============-->
<!--=============== Footer ===============-->
</body>
</html>