forked from alura-challenges/challenge-one-alurageek-latam
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetail-product.html
99 lines (92 loc) · 4.98 KB
/
detail-product.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
<!DOCTYPE html>
<html lang="en">
<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 | Detalle Producto</title>
<!-- Icons -->
<script src="https://kit.fontawesome.com/f570856479.js" crossorigin="anonymous"></script>
<!-- Font -->
<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@400;500;600&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="./img/page-icon.png" type="image/x-icon" />
</head>
<script>
function imgErrorHTML(image) {
image.src = './img/default-img.png';
}
</script>
<body>
<header>
<section class="menu">
<nav class="menu__nav container">
<a class="menu__logo-box" href="./index.html">
<img class="menu__logo-img" src="./img/Logo.svg" alt="alurageek">
</a>
<div class="menu__search-box">
<input type="search" class="menu__search-input" placeholder="¿Qué deseas buscar?">
<i class="fa-solid fa-magnifying-glass menu__search-icon"></i>
</div>
<div class="menu__cart-login-box">
<a class="menu__button" href="./index.html">Volver <i class="fa-solid fa-arrow-left"></i></a>
</div>
</nav>
</section>
</header>
<main>
<section class="container">
<div class="product">
<img src="./img/default-img.png" alt="consolas" onerror="imgErrorHTML(this)">
<div class="product__detail-container">
<p class="product__category">Categoría: StarWars</p>
<h2 class="product__name">Producto xyz</h2>
<p class="product__price">$ 2.499</p>
<p>Descripción del producto:</p>
<p class="product__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam soluta sint blanditiis iusto libero autem corporis voluptates odit nisi esse aperiam excepturi, dicta quisquam dignissimos ab commodi corrupti nulla quidem dolorum unde, obcaecati ullam explicabo facilis. Maiores reiciendis amet quo pariatur quibusdam inventore minus molestias? Dolores quibusdam magnam delectus cupiditate?</p><br><br>
<a class="product__shop" href="./index.html">Tienda <i class="fa-solid fa-store"></i></a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container container">
<img class="footer__logo-img" src="./img/Logo.svg" alt="alurageek">
<ul class="footer__list">
<li class="footer__item-list"><a href="#">Quiénes somos</a></li>
<li class="footer__item-list"><a href="#">Política de privacidad</a></li>
<li class="footer__item-list"><a href="#">Programa de fidelidad</a></li>
<li class="footer__item-list"><a href="#">Nuestras tiendas</a></li>
<li class="footer__item-list"><a href="#">Franquicia</a></li>
<li class="footer__item-list"><a href="#">Anuncie aquí</a></li>
</ul>
<div class="footer__form-box">
<h3 class="footer__form-title">Hable con nosotros</h3>
<form class="footer__form" action="./message-sent.html">
<label class="footer__form-label" for="name" >
<p class="footer__form-field">Nombre:</p>
<input class="footer__form-input form-input" type="text" id="name" name="name" autocomplete="off" required maxlength="40">
<span class="input-message-error">Este campo no es válido</span>
</label>
<label class="footer__form-label" for="message">
<p class="footer__form-field">Mensaje:</p>
<textarea class="footer__form-input form-input" type="text" id="message" name="message" rows="5" autocomplete="off" required maxlength="120"></textarea>
<span class="input-message-error">Este campo no es válido</span>
</label>
<button class="footer__form-submit" type="submit" id="submit">Enviar mensaje</button>
</form>
</div>
</div>
<div class="footer__developed">
<a href="https://gonadr09.github.io/Portafolio-Alura/">Developed by GDR | Dev. 💻</a>
</div>
</footer>
<script src="./js/searchButton.js"></script>
<script src="./js/forms.js"></script>
<script src="./controllers/detailProduct.js" type="module"></script>
</body>
</html>