-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprodutos-similares.html
125 lines (120 loc) · 4.92 KB
/
produtos-similares.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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraGeek-Produtos Similares</title>
<link rel="shortcut icon" href="./assets/images/commerce.png" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/body.css">
</head>
<body>
<!-- Nav Search -->
<header>
<nav class="busca">
<div class="busca__logo">
<img src="./assets/images/logo.png" alt="logo azul controle de video game">
<a href="index.html">
<p class="busca__texto">Alura</p>
<p>Geek</p>
</a>
<input type="text" class="busca__barra" placeholder="O que deseja encontrar?">
</div>
<div class="login">
<button data-login-button>Login</button>
</div>
</nav>
</header>
<main>
<!-- Produtos Similares -->
<section class="todos-produtos">
<div class="produto-detalhes">
<img src="./assets/images/caneca.png" alt="caneca branca do filme star wars">
<div class="detalhes">
<p>Produto XYZ</p>
<p class="produto__preco">R$ 60,00</p>
<p class="detalhes__descricao">Voluptas voluptatum quibusdam similique, class debitis alias maecenas eveniet
ridiculus, facilis fusce! Ullam conubia? Sociis, minima malesuada habitasse distinctio sequi aliqua
malesuada. Quisque deleniti proin expedita, aliquid litora. Iste recusandae? Commodo, quia ridiculus
doloribus vero dictum? Penatibus donec placeat faucibus, dolorum do. Animi porta anim magnam</p>
</div>
</div>
<div class="produtos__titulo">
<p>Produtos similares</p>
</div>
<section class="produtos">
<div class="produto__info">
<img src="./assets/images/canecasw.png" alt="caneca branca do filme star wars">
<p class="produto__descricao">Caneca Stormtrooper</p>
<p class="produto__preco">R$ 55,00</p>
<a href="#" class="produto__link">Ver produto</a>
</div>
<div class="produto__info">
<img src="./assets/images/legosw.png" alt="lego preto do filme star wars">
<p class="produto__descricao">Lego Darth Vader </p>
<p class="produto__preco">R$ 500,00</p>
<a href="#" class="produto__link">Ver produto</a>
</div>
<div class="produto__info">
<img src="./assets/images/yoda.png" alt="yoda do filme star wars">
<p class="produto__descricao">Mestre Yoda</p>
<p class="produto__preco">R$ 100,00</p>
<a href="#" class="produto__link">Ver produto</a>
</div>
<div class="produto__info">
<img src="./assets/images/stormtropper.png" alt="stormtropper do filme star wars">
<p class="produto__descricao">Stormtrooper</p>
<p class="produto__preco">R$ 120,00</p>
<a href="#" class="produto__link">Ver produto</a>
</div>
<div class="produto__info">
<img src="./assets/images/babyyoda.png" alt="babyyoda do filme star wars">
<p class="produto__descricao">Boneco Baby Yoda</p>
<p class="produto__preco">R$ 200,00</p>
<a href="#" class="produto__link">Ver produto</a>
</div>
<div class="produto__info">
<img src="./assets/images/mandalorian.png" alt="Kylo Ren do filme star wars">
<p class="produto__descricao">Kylo Ren</p>
<p class="produto__preco">R$ 70,00</p>
<a href="#" class="produto__link">Ver produto</a>
</div>
</section>
</main>
<!-- Contato -->
<section class="contato">
<div class="contato-destaque">
<div class="contato__logo">
<img src="./assets/images/logo.png" alt="logo azul controle de video game">
<p class="contato__texto">Alura</p>
<p>Geek</p>
</div>
<div class="contato__links">
<a href="#">Quem somos nós</a>
<a href="#">Política de Privacidade</a>
<a href="#">Programa fidelidade</a>
<a href="#">Nossas lojas</a>
<a href="#">Quero ser franqueado</a>
<a href="E">Anuncie aqui</a>
</div>
</div>
<div class="form">
<p>Fale conosco</p>
<form action="" class="contato-form" name="form">
<input type="text" name="nome" id="nome" class="input-nome" placeholder="Nome">
<textarea name="mensagem" id="msg" cols="30" rows="10" placeholder="Escreva sua mensagem"></textarea>
<button type="submit">Enviar mensagem</button>
</form>
</div>
</section>
<!-- Rodapé -->
<footer>
<p>Desenvolvido por Celso Lacerda</p>
<span>© 2022</span>
</footer>
<script src="./assets/js/login.js"></script>
<script src="./assets/js/contatoForm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
</body>
</html>