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

121 lines
6.2 KiB
HTML
Raw Normal View History

Criando logo da página
2022-10-09 23:54:59 +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">
<title>Landing Page</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<head>
<figure class="head-logo">
<a href="/" target="_blank">
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<img class="head-image" src="./assests/logo-m3.svg" alt="logo da m3 Academy"/>
Criando logo da página
2022-10-09 23:54:59 +00:00
</a>
</figure>
</head>
<main>
<div>
<figure>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<img class="main-banner main-banner-desktop" src="./assests/main-banner-desktop.png" alt="Banner do topo Desktop"/>
<img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile"/>
Criando logo da página
2022-10-09 23:54:59 +00:00
</figure>
</div>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
Adicionando cards e textos no parte principal do projeto
2022-10-10 15:23:45 +00:00
<section class="middle-information">
<div class="middle-text">
<h2 class="middle-information-subtitle">Lorem ipsum</h2>
<h1 class="middle-information-title">dolor sit amet</h1>
<p class="middle-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.
Criacação do texto principal
2022-10-10 01:43:13 +00:00
</p>
</div>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
Adicionando cards e textos no parte principal do projeto
2022-10-10 15:23:45 +00:00
<figure>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<img class="main-image-desktop" src="./assests/main-image-desktop.png" alt="Imagem da main Desktop"/>
<img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile"/>
Adicionando cards e textos no parte principal do projeto
2022-10-10 15:23:45 +00:00
</figure>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
Adicionando cards e textos no parte principal do projeto
2022-10-10 15:23:45 +00:00
<div class="middle-cards">
Adicionar middle-cards
2022-10-10 19:10:57 +00:00
<figure class="middle-card">
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio"/>
Adicionar os banners do meio
2022-10-10 20:42:04 +00:00
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
Adicionar middle-cards
2022-10-10 19:10:57 +00:00
</figure>
<figure class="middle-card">
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<img class="middle-card-image" src="./assests/middle-card-02.png" alt="Imagem do segundo card do meio"/>
Adicionar middle-cards
2022-10-10 19:10:57 +00:00
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
</figure>
Adicionar middle-cards
2022-10-10 19:10:57 +00:00
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-03.png" alt="Imagem do terceiro card do meio"/>
Adicionar middle-cards
2022-10-10 19:10:57 +00:00
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
Adicionando cards e textos no parte principal do projeto
2022-10-10 15:23:45 +00:00
</figure>
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
</div>
</section>
<section class="grid grid-template-banners middle-banners">
<img class="middle-banners-image image-banner-one" src="./assests/middle-banner-01.png" alt="Imagem do primeiro banner do meio"/>
<img class="middle-banners-image image-banner-two" src="./assests/middle-banner-02.png" alt="Imagem do segundo banner do meio"/>
<img class="middle-banners-image image-banner-three" src="./assests/middle-banner-03.png" alt="Imagem do terceiro banner do meio"/>
</section>
<section class="bottom-cards">
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-01.png" alt="Imagem do primeiro card de baixo"/>
<p class="bottom-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. </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-02.png" alt="Imagem do segundo card de baixo"/>
<p class="bottom-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. </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-03.png" alt="Imagem do terceiro card de baixo"/>
<p class="bottom-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. </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-04.png" alt="Imagem do quarto card de baixo"/>
<p class="bottom-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.</p>
</div>
</section>
<section class="bottom-box">
<div class="bottom-informations">
<h2 class="bottom-information-subtitle">Lorem ipsum dolor sit amet</h2>
<p class="bottom-information-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>
<img class="bottom-image-desktop" src="./assests/bottom-banner-desktop.png" alt="Imagem do banner de baixo"/>
<img class="bottom-image-mobile" src="./assests/bottom-banner-mobile.png" alt="Imagem do banner de baixo"/>
Criacação do texto principal
2022-10-10 01:43:13 +00:00
</section>
Adicionando cards e textos no parte principal do projeto
2022-10-10 15:23:45 +00:00
Adicionando cards inferiores e medias
2022-10-13 15:03:15 +00:00
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="/" target="_blank">
<img src="./assests/instagram-icon.png" alt="icone do Instagram"/>
</a>
</li>
<li class="footer-icon">
<a href="/" target="_blank">
<img src="./assests/facebook-icon.png" alt="icone do Facebook"/>
</a>
</li>
<li class="footer-icon">
<a href="/" target="_blank">
<img src="./assests/youtube-icon.png" alt="icon do Youtube"/>
</a>
</li>
</ul>
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-0</p>
</footer>
Criando logo da página
2022-10-09 23:54:59 +00:00
</main>
</body>
</html>
Reference in New Issue Copy Permalink