-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (62 loc) · 3.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>O Motor</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><a href="index.html"><img src="imagens/logo.png" alt="Logo do site" class="logo"></h1></a>
<nav>
<ul>
<li><a href="motos.html">Motos</a></li>
<li><a href="pecas.html">Peças</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<img src="imagens/banner.jpg" class="banner" alt="Banner do site">
<main>
<section class="sobre">
<h2 class="titulo">Sobre Nós</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat nostrum porro minima, debitis incidunt corporis ducimus repellat mollitia vero sunt perferendis optio ad assumenda deserunt. Illo voluptatibus incidunt quod error. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, atque alias nemo deleniti adipisci et quas iste asperiores, sed culpa nesciunt aspernatur vitae assumenda est itaque magnam? Tempora, inventore. Deleniti.
</p>
<img src="imagens/sobre.jpg" class="imagem-sobre" alt="Imagem ilustrativa">
</section>
<section class="beneficios">
<h3 class="titulo">Por que nos escolher?</h3>
<div class="conteudo-beneficios">
<ul class="lista-beneficios">
<li class="item">Motos Personalizadas</li>
<li class="item">Motos Esportivas</li>
<li class="item">Peças de Motos Raras</li>
<li class="item">Produtos Especiais</li>
</ul><img src="imagens/beneficios.png" class="imagem-beneficios">
</div>
</section>
<section class="localizacao">
<h3 class="titulo">Aonde nos encontrar?</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet in quae animi laudantium, odio eligendi sit voluptates debitis doloribus incidunt, porro ducimus impedit hic enim temporibus facere nesciunt. Quasi, culpa.</p>
<div class="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d737.6349113548725!2d-43.3310365707938!3d-23.000525999060248!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9bda09ceec9f3b%3A0x33e1b435281e3b9b!2sAvenida%20das%20Am%C3%A9ricas%20pr%C3%B3ximo%20ao%201500!5e1!3m2!1sen!2sbr!4v1641136284282!5m2!1sen!2sbr" width="90%" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>
<section class="nossasMotos">
<h3 class="titulo">Nossas Motos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, sunt ullam animi, illo obcaecati ducimus quam ipsum maxime nisi consequatur minus laborum voluptatem debitis! Architecto voluptatum odio culpa ab alias.</p>
<div class="video">
<iframe width="90%" height="400" src="https://www.youtube.com/embed/nc3zWP9JwOk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</main>
<footer>
<a href="index.html"><img src="imagens/logo.png" alt="Logo do site" class="logo"></a>
</footer>
</body>
</html>