-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (109 loc) · 4.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
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Alura geek</title>
<link rel="icon" href=".\assets\icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=".\css\reset.css">
<link rel="stylesheet" href=".\css\menu.css">
<link rel="stylesheet" href=".\css\banner.css">
<link rel="stylesheet" href=".\css\starwars.css">
<link rel="stylesheet" href=".\css\consoles.css">
<link rel="stylesheet" href=".\css\diversos.css">
<link rel="stylesheet" href=".\css\informa.css">
<link rel="stylesheet" href=".\css\footer.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=Raleway:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<section class="menu">
<a href=".\index.html"><img class="menu__logo" src=".\assets\logo.png" alt="logo da Alura geek"></a>
<div class="menu__div-busca">
<input class="menu__pesquisa menu__lupa-sembotao" id="pesquisa" type="text" placeholder="o que deseja encontrar?">
<label for="pesquisa"></label>
<svg class="menu__lupa" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5001 11H11.7101L11.4301 10.73C12.6301 9.33002 13.2501 7.42002 12.9101 5.39002C12.4401 2.61002 10.1201 0.390015 7.32014 0.0500152C3.09014 -0.469985 -0.469863 3.09001 0.0501373 7.32001C0.390137 10.12 2.61014 12.44 5.39014 12.91C7.42014 13.25 9.33014 12.63 10.7301 11.43L11.0001 11.71V12.5L15.2501 16.75C15.6601 17.16 16.3301 17.16 16.7401 16.75C17.1501 16.34 17.1501 15.67 16.7401 15.26L12.5001 11ZM6.50014 11C4.01014 11 2.00014 8.99002 2.00014 6.50002C2.00014 4.01002 4.01014 2.00002 6.50014 2.00002C8.99014 2.00002 11.0001 4.01002 11.0001 6.50002C11.0001 8.99002 8.99014 11 6.50014 11Z"/>
</svg>
</div>
<span class="menu__span">
<a href=".\login.html"><button class="menu__botao-login" id="botaoLogin">Login</button></a>
</span>
</section>
<input class="menu__pesquisa_phone" id="pesquisa" type="text" placeholder="o que deseja encontrar?">
</header>
<main>
<section class="banner">
<div class="banner__div">
<h1 class="banner__h1">Dezembro Promocional</h1>
<p class="banner__paragrafo">Produtos selecionados com 33% de desconto</p>
<a href="#consoles"><button class="banner__button">Ver Consoles</button></a>
</div>
</section>
<section class="starwars">
<div class="starwars__head">
<h1>Star Wars</h1>
<a href=".\galeria.html">Ver tudo</a>
</div>
<div class="starwars__content">
</div>
</section>
<section class="consoles" id="consoles">
<div class="consoles__head">
<h1>Consoles</h1>
<a href=".\galeria.html">Ver tudo</a>
</div>
<div class="consoles__content">
</div>
</section>
<section class="diversos">
<div class="diversos__head">
<h1>Diversos</h1>
<a href=".\galeria.html">Ver tudo</a>
</div>
<div class="diversos__content">
</div>
</section>
</main>
<footer>
<section class="informa">
<div class="informa__div">
<div class="informa__div--informa">
<img src=".\assets\logo.png" alt="logo da Alura geek">
<ul class="informa__links">
<li><a href="#">Quem somos nós</a></li>
<li><a href="#">Política de privacidade</a></li>
<li><a href="#">Programa fidelidade</a></li>
<li><a href="#">Nossas lojas</a></li>
<li><a href="#">Quero ser franqueado</a></li>
<li><a href="#">Anuncie aqui</a></li>
</ul>
</div>
<form class="informa__contato">
<h3 class="informa__titulo">Fale conosco</h3>
<div class="informa__nome">
<input type="text" id="nome" placeholder=" " data-tipo="nome" required >
<label for="nome" class="label">Nome</label>
<span class="informa__contato_erro">Campo não está valido</span>
</div>
<div class="informa__mensagem">
<textarea type="text" id="mensagem" placeholder=" " data-tipo="mensagem" required></textarea>
<label for="mensagem" class="label">Escreva sua Mensagem</label>
<span class="informa__contato_erro">Campo não está valido</span>
</div>
<button class="informa__botao">Enviar mensagem</button>
</form>
</div>
</section>
<div class="footer__rodape">
<p>Desenvolvido por Thiago Gois</p>
<p>2022</p>
</div>
</footer>
<script src=".\js\validacao.js" type="module"></script>
<script src=".\js\controler\listaProdutos.js" type="module"></script>
<script src=".\js\pesquisaProduto.js" type="module"></script>
</body>
</html>