-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproducto.html
137 lines (136 loc) · 6.99 KB
/
producto.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
<!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">
<!-- Referencia de la hoja de estilo de Css -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/cabecera.css">
<link rel="stylesheet" href="css/formulario.css">
<link rel="stylesheet" href="css/clasificados.css">
<link rel="stylesheet" href="css/seleccionado.css">
<link rel="stylesheet" href="css/contacto.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>
<!-- Fonte del Proyecto Raleway -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<title>Producto</title>
</head>
<body>
<header class="cabecera">
<div class="cabecera__menu">
<section class="cabecera__busqueda">
<img class="cabecera__logo" src="assets/Logo.svg" alt="Logo e-commerse AluraGeek">
<form class="cabecera__formbuscar">
<div class="cabecera__formbuscar__box">
<input class="cabacera__search" type="search" placeholder="¿Qué deseas buscar? ">
<button class="cabecera__formbuscar__box-boton">🔍</button>
</div>
</form>
</section>
<img class="cabacera__logo-search" src="assets/Search.svg" alt="Logo de Busqueda">
</div>
</header>
<main>
<section class="seleccionado">
<div class="seleccionado__caja-imagen">
<!-- <img class="seleccionado__imagen" src="assets/tasa.png" alt="">-->
</div>
<div class="seleccionado__inf">
<h2 class="seleccionado__inf__titulo">Producto XYZ</h2>
<p class="seleccionado_inf__precio">Bs 60,00</p>
<p class="seleccionado__inf__descripcion">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>
</section>
<section class="clasificados">
<div class="clasificados__cabecera">
<h2 class="clasificados__cabecera_titulo">Productos similares</h2>
<!-- <a class="clasificados__cabecera__ver" href="">Ver todo</a>-->
</div>
<div class="clasificados__productos">
<div class="clasificados__box">
<img class="clasificados__box__imagen" src="assets/controlxyz.png">
<p class="clasificados__box__titulo">Producto</p>
<p class="clasificados__box__precio">Bs 60,00</p>
<a class="clasificados__box__ver" href="">Ver producto</a>
</div>
<div class="clasificados__box">
<img class="clasificados__box__imagen" src="assets/cabezaDark.png">
<p class="clasificados__box__titulo">Producto</p>
<p class="clasificados__box__precio">Bs 60,00</p>
<a class="clasificados__box__ver" href="">Ver producto</a>
</div>
<div class="clasificados__box">
<img class="clasificados__box__imagen" src="assets/yoda.png">
<p class="clasificados__box__titulo">Producto</p>
<p class="clasificados__box__precio">Bs 60,00</p>
<a class="clasificados__box__ver" href="">Ver producto</a>
</div>
<div class="clasificados__box">
<img class="clasificados__box__imagen" src="assets/clon.png">
<p class="clasificados__box__titulo">Producto</p>
<p class="clasificados__box__precio">Bs 60,00</p>
<a class="clasificados__box__ver" href="">Ver producto</a>
</div>
<div class="clasificados__box">
<img class="clasificados__box__imagen" src="assets/yodabebe.png">
<p class="clasificados__box__titulo">Producto</p>
<p class="clasificados__box__precio">Bs 60,00</p>
<a class="clasificados__box__ver" href="">Ver producto</a>
</div>
<div class="clasificados__box">
<img class="clasificados__box__imagen" src="assets/dark.png">
<p class="clasificados__box__titulo">Producto</p>
<p class="clasificados__box__precio">Bs 60,00</p>
<a class="clasificados__box__ver" href="">Ver producto</a>
</div>
</div>
</section>
</main>
<footer>
<section class="contacto">
<div class="contacto__quienes-somos">
<div class="contacto__caja-logo">
<img class="contacto__logo" src="assets/Logo.svg">
</div>
<div class="contacto__caja-link">
<a class="contacto__link" href="">Quienes Somos</a>
<a class="contacto__link" href="">Politica de Privacidad</a>
<a class="contacto__link" href="">Programa de Fidelidad</a>
<a class="contacto__link" href="">Nuestras Tiendas</a>
<a class="contacto__link" href="">Quiero ser Franquiciado</a>
<a class="contacto__link" href="">Anuncie aquí</a>
</div>
</div>
<div class="contacto__caja-form">
<h2 class="contacto__titulo">Hable con nosotros</h2>
<form class="contacto__form" action="">
<div class="contacto__form__box">
<input type="text" class="contacto__form__input" placeholder="Nombre" required>
<label class="contacto__form__label">Nombre</label>
<span class="contacto__form__error">Esto campo no puede estar vacio</span>
</div>
<div class="contacto__form__box">
<input type="email" class="contacto__form__input" placeholder="Email" required>
<label class="contacto__form__label">Email</label>
<span class="contacto__form__error">Esto campo no puede estar vacio</span>
</div>
<div class="contacto__form__box">
<textarea class="contacto__form__input" placeholder="Escribe tu mensaje" required></textarea>
<label class="contacto__form__label">Nombre</label>
<span class="contacto__form__error">Esto campo no puede estar vacio</span>
</div>
<button class="contacto__form__boton">Enviar Mensaje</button>
</form>
</div>
</section>
<section class="footer">
<p class="footer__titulo">Desarrollado por Marwin Flores</p>
<p class="footer__anio">2022</p>
</section>
</footer>
</body>
</html>