-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprodutos.html
167 lines (166 loc) · 7.64 KB
/
produtos.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width">
<title>Produtos</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/cabecalho.css">
<link rel="stylesheet" href="css/rodape.css">
<link rel="stylesheet" href="css/produtos.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header class="cabecalho">
<img src="img/Logo.png" alt="Logo AluraGeek" class="cabecalho__imagem">
<input type="texto" id="pesquisa" name="busca_produto" placeholder="Oque você deseja encontrar ?" class="cabecalho__busca"><img src="img/Vector.png" alt="Busca" class="cabecalho__busca__imagem">
<img src="img/Vector.png" alt="Busca" class="cabecalho__vector">
</header>
<body>
<section class="produtos">
<div class="produtos__titulo">
<h1>Todos os produtos</h1>
<button class="produtos__botao"><a href="adicionar_produto.html" target="_blank">Adicionar produto</a></button>
</div>
<div class="produtos__catalogo">
<figure class="produtos__figura">
<img src="img/caneca.png" alt="Caneca de Stormtrooper" class="produtos__imagem">
<figcaption class="catalogo__descricao">Caneca de Stormtrooper</figcaption>
<p class="preco">R$ 30,00</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/funko.png" alt="Lego Darth Vader" class="produtos__imagem">
<figcaption class="catalogo__descricao">Lego Darth Vader</figcaption>
<p class="preco">R$ 34,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/yoda.png" alt="Action figure - Yoda" class="produtos__imagem">
<figcaption class="catalogo__descricao">Action figure - Yoda</figcaption>
<p class="preco">R$ 60,00</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/storm.png" alt="Action figure - Stormtrooper" class="produtos__imagem">
<figcaption class="catalogo__descricao">Action figure - Stormtrooper</figcaption>
<p class="preco">R$ 90,00</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura figura__desktop">
<img src="img/baby-yoda.png" alt="Pelúcia do Baby Yoda" class="produtos__imagem">
<figcaption class="catalogo__descricao">Pelúcia do Baby Yoda</figcaption>
<p class="preco">R$ 49,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura figura__desktop">
<img src="img/kylo.png" alt="Action figure - Kylo Ren" class="produtos__imagem">
<figcaption class="catalogo__descricao">Action figure - Kylo Ren</figcaption>
<p class="preco">R$ 99,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/controle.png" alt="Controle de Xbox" class="produtos__imagem">
<figcaption class="catalogo__descricao">Controle de Xbox</figcaption>
<p class="preco">R$ 369,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/xbox.png" alt="Playstation 5" class="produtos__imagem">
<figcaption class="catalogo__descricao">Plastation 5</figcaption>
<p class="preco">R$ 3999,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/nintendo.png" alt="Consoles Antigos" class="catalogo__imagem">
<figcaption class="catalogo__descricao">Consoles Antigos</figcaption>
<p class="preco">R$ 1999,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/switch.png" alt="Nintendo Switch" class="produtos__imagem">
<figcaption class="catalogo__descricao">Nintendo Switch</figcaption>
<p class="preco">R$ 2469,90</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura figura__desktop">
<img src="img/boy.png" alt="Game Boy" class="produtos__imagem">
<figcaption class="catalogo__descricao">Game Boy</figcaption>
<p class="preco">R$ 249,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura figura__desktop">
<img src="img/series.png" alt="Xbox Series X" class="produtos__imagem">
<figcaption class="catalogo__descricao">Xbox Series X</figcaption>
<p class="preco">R$ 2999,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/atari.png" alt="Camisa Atari" class="produtos__imagem">
<figcaption class="catalogo__descricao">Camisa Atari</figcaption>
<p class="preco">R$ 39,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/snes.png" alt="Camisa Snes" class="produtos__imagem">
<figcaption class="catalogo__descricao">Camisa Snes</figcaption>
<p class="preco">R$ 39,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/sonic.png" alt="Figure Sonic" class="produtos__imagem">
<figcaption class="catalogo__descricao">Figure Sonic</figcaption>
<p class="preco">R$ 49,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura">
<img src="img/rosa.png" alt="Relógio" class="produtos__imagem">
<figcaption class="catalogo__descricao">Relógio Digital</figcaption>
<p class="preco">R$ 29,90</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura figura__desktop">
<img src="img/camiseta.png" alt="Óculos VR" class="produtos__imagem">
<figcaption class="catalogo__descricao">Óculos VR</figcaption>
<p class="preco">R$ 2499,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
<figure class="produtos__figura figura__desktop">
<img src="img/pikachu.png" alt="Fantasia de Pikachu" class="produtos__imagem">
<figcaption class="catalogo__descricao">Fantasia de Pikachu</figcaption>
<p class="preco">R$ 299,99</p>
<p class="produtos__codigo">#111111</p>
</figure>
</div>
</section>
</body>
<footer class="rodape">
<img src="img/Logo.png" alt="Logo AluraGeek" class="rodape__logo-desktop">
<section class="institucional">
<img src="img/Logo.png" alt="Logo AluraGeek" class="rodape__logo">
<p>Quem somos nós</p>
<p>Política de privacidade</p>
<p>Programa de fidelidade</p>
<p>Nossas lojas</p>
<p> Quero ser franqueado</p>
<p>Anuncie aqui</p>
</section>
<section class="formulario">
<h1 class="formulario__titulo">Fale conosco</h1>
<form action="/formulario-contato" method="post" class="formulario__contato" >
<div>
<input type="texto" id="nome" name="nome_usuario" placeholder="Seu nome" class="formulario__input input__nome">
</div>
<div>
<textarea id="texto" name="texto_usuario" placeholder="Sua mensagem" class="formulario__input input__mensagem"></textarea>
</div>
<button class="formulario__botao">Enviar Mensagem</button>
</form>
</section>
</footer>
<section class="direitos">
<p>Desenvolvido por Yuri Santos</p>
<p>2022</p>
</section>
</html>