-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (112 loc) · 5.64 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
117
118
119
<!DOCTYPE html>
<html lang="es">
<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">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<title>AluraGeek</title>
<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@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
</head>
<body>
<header class="header contenedor">
<div id="logo-div" class="logo">
<a href="index.html"><img src="img/logo.png" alt="logo empresa"></a>
</div>
<div class="login-buscador">
<div id="login-div" class="login">
<button type="button" class="btn-login" id="btn-login">Login</button>
</div>
<div class="buscador">
<input type="text" id="input-buscador"class="input-buscador" placeholder="¿Qué deseas buscar?">
<svg width="18" height="18" id="icono-buscador" class="icono-buscador" viewBox="0 0 18 18" fill="#464646" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 11.5H11.71L11.43 11.23C12.63 9.83 13.25 7.92 12.91 5.89C12.44 3.11 10.12 0.89 7.32001 0.55C3.09001 0.03 -0.469985 3.59 0.0500152 7.82C0.390015 10.62 2.61002 12.94 5.39002 13.41C7.42002 13.75 9.33002 13.13 10.73 11.93L11 12.21V13L15.25 17.25C15.66 17.66 16.33 17.66 16.74 17.25C17.15 16.84 17.15 16.17 16.74 15.76L12.5 11.5ZM6.50002 11.5C4.01002 11.5 2.00002 9.49 2.00002 7C2.00002 4.51 4.01002 2.5 6.50002 2.5C8.99002 2.5 11 4.51 11 7C11 9.49 8.99002 11.5 6.50002 11.5Z"/>
</svg>
</div>
</div>
</header>
<section class="hero">
<div class="hero-div">
<h1>Febrero Promocional</h1>
<p>Productos selecionados con 33% de descuento</p>
<button type="button" class="btn-hero" id="btn-hero">Ver Consolas</button>
</div>
</section>
<section class="star-wars">
<header id="star-wars-productos-header" class="productos-header contenedor">
<h2 id="header-star-wars">Star Wars</h2>
<a id="enlace-star-wars-ver-todo" href="./productos.html">Ver todo <img src="img/icono_flecha.svg" alt="icono flecha"></a>
</header>
<div id="productos-div-starwars" class="productos-div contenedor"></div>
</section>
<section class="consolas" id="consolas">
<header id="consolas-productos-header" class="productos-header contenedor">
<h2>Consolas</h2>
<a href="./productos.html">Ver todo <img src="img/icono_flecha.svg" alt="icono flecha"></a>
</header>
<div id="productos-div-consolas" class="productos-div contenedor"></div>
</section>
<section class="diversos">
<header id="diversos-productos-header" class="productos-header contenedor">
<h2>Diversos</h2>
<a href="./productos.html">Ver todo <img src="img/icono_flecha.svg" alt="icono flecha"></a>
</header>
<div id="productos-div-diversos" class="productos-div contenedor"></div>
</section>
<section class="contacto">
<div class="contacto-logo-nav">
<div class="contacto-logo">
<a href="index.html"><img src="img/logo.png" alt="logo empresa"></a>
</div>
<nav class="contacto-nav">
<ul>
<li>Quienes somos</li>
<li>Política de privacidad</li>
<li>Programa de fidelidad</li>
<li>Nuestras tiendas</li>
<li>Quiero ser franquiciado</li>
<li>Anuncie aquí</li>
</ul>
</nav>
</div>
<div class="contacto-formulario">
<form id="formulario-contacto" class="formulario contenedor">
<h2>Hable con nosotros</h2>
<div id="contenedor-campos" class="contenedor-campos">
<div id="campo-contacto-nombre" class="campo">
<label>Nombre</label>
<input type="text" placeholder="Tu Nombre" id="input-contacto-nombre" required />
</div>
<div id="campo-contacto-mensaje" class="campo mensaje">
<textarea class="text-area" placeholder="Escribe tu mensaje" id="input-contacto-mensaje" required></textarea>
</div>
</div>
<div id="spinner">
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</div>
<div>
<button type="button" class="btn-enviar" id="btn-contacto-enviar">Enviar mensaje</button>
</div>
</form>
</div>
</section>
<footer class="footer contenedor">
<p>Hecho con <span class="corazon">❤</span> por <span>Diego Fabián Di Giorgio</span> | © 2022</p>
</footer>
<script src="js/app.js"></script>
<script src="js/index.js" type="module"></script>
</body>
</html>