-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (159 loc) · 8.69 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!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>Alura Old Gamer</title>
<link rel="stylesheet" href="./styles/base.css" />
<link rel="stylesheet" href="./styles/header.css" />
<link rel="stylesheet" href="./styles/header_celular.css" />
<link rel="stylesheet" href="./styles/header_tablet.css" />
<link rel="stylesheet" href="./styles/destaques.css" />
<link rel="stylesheet" href="./styles/destaques_celular.css" />
<link rel="stylesheet" href="./styles/index_main_tablet.css" />
<link rel="stylesheet" href="./styles/index_main.css" />
<link rel="stylesheet" href="./styles/index_main_celular.css" />
<link rel="stylesheet" href="./styles/index_main_tablet.css" />
<link rel="stylesheet" href="./styles/rodape.css" />
<link rel="stylesheet" href="./styles/rodape_celular.css" />
<link rel="stylesheet" href="./styles/rodape_tablet.css" />
</head>
<body>
<div class="container_principal">
<header class="header">
<!--Bloco do Header --- contém toda a parte do cabeçalho-->
<div class="header_container_direita">
<div class="header_logo">
<a href="./index.html"><img src="./assets/img/logo1.svg" alt="icone da logo" /></a>
</div>
<div class="header_pesquisa">
<div class="header_pesquisa_container" data-containerPesquisa>
<input type="text" placeholder="O que deseja encontrar?" data-headerPesquisa />
<i class="fa-solid fa-magnifying-glass icone_lupa"></i>
<i class="fa-solid fa-xmark icone_x" data-fecharPesquisa></i>
</div>
</div>
</div>
<div class="header_login">
<a href="./pages/login.html" class="header_login_button">Login</a>
</div>
<div class="header_pesquisa_responsivo" data-pesquisaResponsivo>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<!--Modal onde aparecerá o resultado da pesquisa...-->
<div class="header_pesquisa_resultado" data-pesquisaResultado></div>
<!--Fim do modal pesquisa-->
</header>
<!--Fim do Header - Cabeçalho-->
<section class="destaques">
<!--Bloco de destaques --- contém o banner principal-->
<div class="destaques_container">
<h2 class="destaques_titulo">Promoção Inaugural</h2>
<p class="destaques_descricao">
Venha comemorar a nossa inauguração economizando 30% em qualquer controle
</p>
<a href="#vitrine_controles" class="destaques_botao">Ver produtos</a>
</div>
</section>
<!--Fim da sessão destaques-->
<section class="main">
<!--Bloco de produtos-->
<div class="main_container">
<!--sessão vitrine lançamentos-->
<div class="vitrine">
<div class="vitrine_header">
<h2 class="vitrine_titulo">Lançamentos</h2>
<p class="vitrine_descricao">Todos os dias novidades para você</p>
</div>
<div class="vitrine_produtos" data-vitrineLancamentos></div>
</div>
<!--Fim da vitrine lançamentos-->
<div class="vitrine">
<div class="vitrine_header">
<h2 class="vitrine_titulo">Consoles</h2>
<p class="vitrine_descricao">Temos diversão para todos os gostos</p>
</div>
<div class="vitrine_produtos" data-vitrineConsoles></div>
</div>
<!--Fim da segunda vitrine de produtos-->
<div id="vitrine_controles" class="vitrine">
<div class="vitrine_header">
<h2 class="vitrine_titulo">Controles</h2>
<p class="vitrine_descricao">Escolha suas armas.</p>
</div>
<div class="vitrine_produtos" data-vitrineControles></div>
</div>
<!--Fim da terceira vitrine de produtos-->
<div class="vitrine">
<div class="vitrine_header">
<h2 class="vitrine_titulo">Diversos</h2>
<p class="vitrine_descricao">Senão é video game que você procura, temos também.</p>
</div>
<div class="vitrine_produtos" data-vitrineDiversos></div>
</div>
<!--Fim da quarta vitrine de produtos-->
</div>
</section>
<!--Fim da sessão Main-->
<footer class="footer">
<div class="footer_container">
<div class="footer_sobre">
<div class="footer_sobre_midia">
<img class="footer_logo" src="./assets/img/logo1.svg" alt="icone da logo" />
<div class="footer_social">
<a href="./pages/add_produto.html">Facebook</a>
<a href="#">instagram</a>
<a href="#">twitter</a>
</div>
</div>
<!--Fim footer midias digitais-->
<div class="footer_sobre_quemSomos">
<p>
Somos focados no varejo de produtos destinados a gamers de coração e de profissão, temos
todos os tipos de periféricos e dispositivos que complementarão sua experiência com os
games. Também temos consoles e jogos de todas as gerações, contemplando os primórdios da
era do Atari 2600 e Odyssey, até os dias modernos com Playstation 5 e Xbox Series.
Qualquer dúvida, crítica ou sugestão, disponibilizamos nossos canais para melhor
atendermos nossos clientes, fiquem a vontade para entrar em contato conosco
<span class="footer_sobre_destaque">e que a diversão nunca acabe.</span>
</p>
</div>
<!--Fim footer quem somos-->
</div>
<!--Fim footer Sobre a empresa-->
<div class="footer_contato">
<h2 class="footer_contato_header">Fale Conosco</h2>
<form action="#" class="footer_contato_formulario">
<input
class="footer_contato_formulario_nome"
type="text"
placeholder="Digite seu nome"
required
/>
<textarea
class="footer_contato_formulario_mensagem"
rows="5"
placeholder="Digite sua mensagem"
required
></textarea>
<button type="submit" class="footer_contato_formulario_submit">Enviar mensagem</button>
</form>
</div>
<!--Fim footer contato-->
</div>
<!--fim do footer container-->
<div class="dev">
<a href="https://www.linkedin.com/in/fernando-mossatto/" target="blank">
<i class="fa-brands fa-linkedin"></i>
</a>
<p>Desenvolvido por Fmossatto</p>
<p>2022</p>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/5f5592f0e5.js" crossorigin="anonymous"></script>
<script type="module" src="./controllers/controllerListaProdutos.js"></script>
<script type="module" src="./controllers/controllerPesquisa.js"></script>
</body>
</html>