forked from M3-Academy/practice-time-landing-page
116 lines
7.0 KiB
HTML
116 lines
7.0 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">
|
|
<title>Pratica 001 - M3 Academy </title>
|
|
<link rel="stylesheet" href="/css usados/index.css">
|
|
</head>
|
|
<body>
|
|
<!--parte preta com o simbolo da M3, "cabeçario"-->
|
|
<header>
|
|
<a href="index.html">
|
|
<img class="logom3" src="imagens/Logo M3 [branco] (4) 1.png" alt="Logo M3 ">
|
|
</a>
|
|
</header>
|
|
<!--Parte do conteudo principal da Page-->
|
|
<main>
|
|
<!-- 1° bloco (section) -Imagem principal, computador encima da mesa-->
|
|
<section>
|
|
<img class="imagemcomputador" src="imagens/Rectangle 9.jpg" alt="Imagem computador encima da mesa">
|
|
<img class="imagemcomputadorpequena" src="imagens/Imagem principal pequena.png" alt="Imagem computador encima da mesa pequena ">
|
|
</section>
|
|
<!--2° bloco, Descrição e a imagem dos 3 computadores ao lado-->
|
|
<section class="info2bloco">
|
|
<!--div não é semantico, usava somente p ajuda a organizar o css-->
|
|
<div class="texto2bloco">
|
|
<h2 class="escrito2bloco">Lorem Ipsum</h2>
|
|
<h1 class="escritog2bloco">Dolor sit amet</h1>
|
|
<p class="p2bloco">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 class="imagem3pc" src="imagens/Imagem 3 computadores.png" alt="Imagem 3 computadores">
|
|
<img class="imagem3pcpq" src="imagens/Imagem 3 computadores pequeno.png" alt="imagem 3 computadores pequeno">
|
|
</section>
|
|
<!--3° bloco, sessão dos 3 quadrados com informaçoes-->
|
|
<section class="bloco3">
|
|
<!--Cada div é referente a um quadradinho-->
|
|
<div class="quadradosbloco3">
|
|
<img class="imgbloco3" src="imagens/imagem lojinha.png" alt="loginha">
|
|
<p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
|
</div>
|
|
<div class="quadradosbloco3">
|
|
<img class="imgbloco3" src="imagens/imagem sacolinha.png" alt="sacolinha">
|
|
<p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
|
</div>
|
|
<div class="quadradosbloco3">
|
|
<img class="imgbloco3" src="imagens/imagem mão com dinheiro.png" alt="mao com dinheiro">
|
|
<p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
|
</div>
|
|
</section>
|
|
<!--4° bloco, imagem do notebook meio aberto-->
|
|
<section class="bloco4">
|
|
<img class="imgbloco4" src="imagens/imagem notebook meio aberto.png" alt="Imagem notebook meio aberto">
|
|
<img class="imgbloco4pq" src="imagens/imagem notebook meio aberto pequeno.png" alt="Imagem noteboook meio aberto">
|
|
</section>
|
|
<!--5° bloco, os "buttos"-->
|
|
<section class="bloco05-buttoes">
|
|
<!--Div inglobando todos os buttões, patra fazer o efeito de deslocamento no css-->
|
|
<div class="deslocamentobloco5">
|
|
<!-- Cada Div representa 1 "button"-->
|
|
<div class="buttoes">
|
|
<img class="imgbuttons" src="imagens/money (1).png" alt="notinha de dinheiro">
|
|
<p class="textobuttons">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="buttoes">
|
|
<img class="imgbuttons" src="imagens/laptop 1.png" alt="notebook">
|
|
<p class="textobuttons">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="buttoes">
|
|
<img class="imgbuttons" src="imagens/imagem mão com dinheiro.png" alt="mãozinha com dinheiro">
|
|
<p class="textobuttons">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="buttoes">
|
|
<img class="imgbuttons" src="imagens/telefonezinho.png" alt="telefonezinho">
|
|
<p class="textobuttons">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>
|
|
</section>
|
|
<!--6° bloco, imagem do oculos e texto-->
|
|
<section class="bloco06">
|
|
<img class="imgbloco06" src="imagens/imagem oculos grande.png" alt="">
|
|
<img class="imgbloco06pq" src="imagens/imagem oculos pequeno.png" alt="">
|
|
<div class="textobloco06">
|
|
<h2 class="titulobloco06">Lorem ipsum dolor sit amet </h2>
|
|
<p class="subtitulobloco06">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>
|
|
</section>
|
|
</main>
|
|
<!-- Final da pagina.-->
|
|
<footer>
|
|
<!--faixa preta com links p as redes sociais e informações-->
|
|
<section class="faixafinal">
|
|
<ul class="icones">
|
|
<li>
|
|
<a href="index.html">
|
|
<img class="imgicon" src="imagens/instagram icone.png" alt="Instagram icone">
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="index.html">
|
|
<img class="imgicon" src="imagens/facebook icone.png" alt="Facebook icone">
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="index.html">
|
|
<img class="imgicon" src="imagens/youtube icone.png" alt="you tube icone">
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="textofinal">
|
|
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
|
|
</p>
|
|
</section>
|
|
</footer>
|
|
</body>
|
|
</html> |