-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (103 loc) · 7.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>The Classic</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<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=Poppins:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
<header class="cabecalho">
<div class="cabecalho-conteudo">
<h1 class="cabecalho-titulo"><img src="imagens/logo.png" alt="Logo com um carro clássico com título The Classic" class="logo"></h1>
<nav class="cabecalho-menu">
<ul class="cabecalho-lista">
<li class="cabecalho-item"><a href="carros.html" class="cabecalho-link">carros</a></li>
<li class="cabecalho-item"><a href="noticias.html" class="cabecalho-link">notícias</a></li>
<li class="cabecalho-item"><a href="eventos.html" class="cabecalho-link">eventos</a></li>
<li class="cabecalho-item"><a href="curriculo.html" class="cabecalho-link">currículo</a></li>
<li class="cabecalho-item"><a href="contato.html" class="cabecalho-link">contato</a></li>
<li class="cabecalho-item"><a href="sobre.html" class="cabecalho-link">sobre</a></li>
</ul>
</nav>
</div>
</header>
<main class="conteudo-principal">
<img src="imagens/banner.png" alt="Uma imagem contendo vários carros clássicos um do lado do outro" class="banner">
<section class="sobre">
<h2 class="titulo">Sobre Nós</h2>
<p class="sobre-texto">Gosta de carros antigos que não perderam a classe? Então veio ao site certo! Pois todos nós somos grandes admiradores dessas verdadeiras relíquias. Aqui você encontrará o carro do seu sonho, aquela beleza que mesmo com uma idade bem avançada consegue ter mais charme do que os carros atuais.</p>
<p class="sobre-texto">Claro que ser clássico não é sinônimo de ultrapassado, velho e afins, mas sim de algo que não perdeu e nunca perderá a graça! Aqui no <strong>The Classic</strong> você encontra uma variedade de carros clássicos utilizados pelo mundo todo, que acabam por se tornar raridade.</p>
<img src="imagens/sobre-imagem.jpg" alt="Imagem de um carro clássico" class="sobre-imagem">
<div> <!--Esta div serve somente para separar o conteúdo interno do externo e assim suas propriedades não interferirem nos elementos externos.-->
<div class="sobre-mvv">
<h3 class="subtitulo">Missão</h3>
<p>Como Missão queremos informar, mostrar, comunicar, entreter e vender carros considerados clássicos pelos consumidores.</p>
</div>
<div class="sobre-mvv">
<h3 class="subtitulo">Visão</h3>
<p>Atingir o maior número de público e consumidores bem informados e felizes com o nosso trabalho, seja por vendas ou não.</p>
</div>
<div class="sobre-mvv">
<h3 class="subtitulo">Valores</h3>
<p>Nunca pretendemos desinformar nosso público, aceitar mau atendimento, desrespeito no nosso meio profissional.</p>
</div>
</div>
</section>
<section class="beneficios">
<h2 class="titulo">Nossos Benefícios</h2>
<p class="beneficios-texto">Alguns benefícios que oferecemos para nossos usuários:</p>
<ul class="beneficios-lista">
<li class="beneficios-item">Informação Rápida e de Fácil Acesso</li>
<li class="beneficios-item">Ótimo Atendimento Personalizado</li>
<li class="beneficios-item">Respondemos sua Mensagem em Até 24 Horas</li>
<li class="beneficios-item">Grande Variedade de Carros Clássicos</li>
<li class="beneficios-item">Organização e Pontualidade Impecáveis</li>
<li class="beneficios-item">Ambiênte Físico Personalizado e Confortável</li>
<li class="beneficios-item">Eventos de Carros Clássicos</li>
</ul>
<img src="imagens/beneficios.jpg" alt="Imagem de um carro clássico amarelo com lista preta" class="beneficio-imagem">
</section>
<section class="carros-classicos">
<h2 class="titulo">Nossos Carros</h2>
<img src="imagens/carros-classicos.jpg" alt="Imagem de carros clássicos um do lado do outro" class="carros-classicos-imagem">
<p class="carros-classicos-texto">Nós possuimos uma coleção de carros à venda para nossos mais fieis clientes! Tem carros com mais de 20 anos de vida e em perfeito estado, sendo cuidados com o maior zelo possível, venha conferir!</p>
</section>
<section class="localizacao">
<h2 class="titulo">Localização</h2>
<p class="localizacao-texto">Estamos localizados na Av. das Américas, 1583-1531 - Barra da Tijuca</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d918.1532317394328!2d-43.330812570829316!3d-23.00125696457809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9bda09c308d599%3A0x7a23eb173ba6c666!2sAv.%20das%20Am%C3%A9ricas%2C%201583-1531%20-%20Barra%20da%20Tijuca%2C%20Rio%20de%20Janeiro%20-%20RJ%2C%2022640-100!5e0!3m2!1sen!2sbr!4v1653340696796!5m2!1sen!2sbr" width="90%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
<section class="eventos">
<h2 class="titulo">Que Tal Eventos?</h2>
<p class="eventos-texto">Nós também trabalhamos com eventos de carros clássicos, você pode saber mais <a href="eventos.html">aqui</a>.</p>
<iframe width="90%" height="450" src="https://www.youtube.com/embed/M29wez7waHY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</main>
<footer class="rodape">
<div class="rodape-conteudo">
<div class="rodape-desenvolvedor">
<p>💻 LucasDevRJ</p>
<a href="https://github.com/LucasDevRJ">
<img src="imagens/github.png" alt="" class="github">
</a>
</div>
<img src="imagens/logo.png" alt="Logo com um carro clássico com título The Classic" class="logo-rodape">
<nav class="rodape-menu">
<ul class="rodape-lista">
<li class="rodape-item"><a href="carros.html" class="rodape-link">carros</a></li>
<li class="rodape-item"><a href="noticias.html" class="rodape-link">notícias</a></li>
<li class="rodape-item"><a href="eventos.html" class="rodape-link">eventos</a></li>
<li class="rodape-item"><a href="curriculo.html" class="rodape-link">currículo</a></li>
<li class="rodape-item"><a href="contato.html" class="rodape-link">contato</a></li>
<li class="rodape-item"><a href="sobre.html" class="rodape-link">sobre</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>