-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
164 lines (154 loc) · 7.8 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
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Steps</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="./static/css/styles.css">
<link rel="icon" type="image/png" href="./static/img/logo2.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<header>
<a id="menu" href="#"></a>
<nav>
<ul class="navigation">
<li><a href="./index.html">Inicio</a></li>
<li><a href="./html/seccionHombre.html">Hombre</a></li>
<li><a href="./html/seccionMujer.html">Mujer</a></li>
<li><a href="./html/seccionNino.html">Niño</a></li>
<li><a href="./html/aboutUs.html">Sobre nosotros</a></li>
<li><a href="./html/registro.html">Regístrate</a></li>
<li><a href="#footer" class="btn"><button>Seguí nuestros pasos</button></a></li>
<li><a href="#cart" class="cart-icon">
<i class="fas fa-shopping-bag"></i>
<span class="cart-text">Bolsa de compras</span>
</a>
</li>
</ul>
</nav>
<!-- Logo de Stylish Steps-->
<div class="logo">
<a href="./index.html">
<img src="./static/img/logo2.png" alt="Logo comercial de Stylish Steps">
</a>
<div class="slider">
<div class="slides">
<div class="slide">
<p>Stylish Steps - Level Up</p>
</div>
<div class="slide">
<p>3 cuotas sin Interés con todos los bancos</p>
</div>
<div class="slide">
<p>Envío Gratis a partir de $100.000</p>
</div>
</div>
<button class="prev" onclick="moveSlides(-1)">❮</button>
<button class="next" onclick="moveSlides(1)">❯</button>
</div>
<div class="search-container">
<form action="/search" method="get">
<input type="text" placeholder="Buscar artículo..." name="q">
<button type="submit">🔍</button>
</form>
</div>
</div>
</header>
<main>
<!--Carrusel-->
<div class="carousel">
<img class="carousel-image" src="./static/img/home/carrusel/1.png"
alt="Imagen del HOT SALE de esta semana. 50% de descuento con modo">
<img class="carousel-image" src="./static/img/home/carrusel/2.png"
alt="Imagen de persona corriento. Sube de nivel,desafía tus límites">
<img class="carousel-image" src="./static/img/home/carrusel/3.png"
alt="Imagen vive tus experiencias con estilo">
<img class="carousel-image" src="./static/img/home/carrusel/4.png" alt="Imagen Marca la diferencia">
</div>
<script>
let carouselImages = document.querySelectorAll('.carousel-image');
let currentImageIndex = 0;
setInterval(() => {
carouselImages[currentImageIndex].style.opacity = '0';
currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
carouselImages[currentImageIndex].style.opacity = '1';
}, 5000);
</script>
<h2 class="animacion animate__animated animate__animate__fadeIn">Exprésate a tu manera</h2>
<article class="article">
<!-- Sección para Mujer -->
<section class="seccionMujer">
<div>
<h3>Elegancia en cada paso</h3>
<p>Descubre nuestra colección de zapatillas para mujer. Diseñadas para brindarte comodidad y estilo,
nuestras zapatillas te acompañarán en cada paso de tu día.</p><br>
</div>
<div class="card">Deportivo:<br><b>"Corre con estilo"</b><br>
<img src="./static/img/home/deportivaMujer.jpg" alt="Imagen de zapatillas deportivas femeninas"
class="imgcard">
</div>
<div class="card">Urbano:<br><b>"Conquista la ciudad"</b><br>
<img src="./static/img/home/urbanaMujer.jpg" alt="Imagen de zapatillas urbanas femeninas"
class="imgcard">
</div>
<div class="card">Casual:<br><b>"Comodidad sin sacrificar el estilo"</b><br>
<img src="./static/img/home/informalMujer.jpeg" alt="Imagen de zapatillas informales femeninas"
class="imgcard">
</div>
</section>
<!-- Sección para Hombre -->
<section class="seccionHombre">
<div>
<h3>Pisa fuerte, vive con estilo</h3>
<p>Explora nuestra variedad de zapatillas para hombre. Ya sea para el gimnasio, la oficina o un fin
de
semana relajado, tenemos el par perfecto para ti.</p>
</div>
<div class="card">Deportivo:<br><b>"Rendimiento y estilo"</b><br>
<img src="./static/img/home/deportivahombre.jpg" alt="Imagen de zapatillas deportivas masculinas"
class="imgcard">
</div>
<div class="card">Urbano:<br><b>"Domina el asfalto"</b><br>
<img src="./static/img/home/urbanahombre.jpg" alt="Imagen de zapatillas urbanas masculinas"
class="imgcard">
</div>
<div class="card">Casual:<br><b>"Relájate con estilo"</b><br>
<img src="./static/img/home/informalhombre.jpg" alt="Imagen de zapatillas informales masculinas"
class="imgcard">
</div>
</section>
<!-- Sección para Niños -->
<section class="seccionNiños">
<div>
<h3>Diversión en cada salto</h3>
<p>Descubre nuestras zapatillas para niños. Coloridas, cómodas y duraderas, nuestras zapatillas son
perfectas para todas sus aventuras.</p>
</div>
<div class="card">Deportivo:<br><b>"Para pequeños campeones"</b><br>
<img src="./static/img/home/deportivanino.jpg" alt="Imagen de zapatillas deportivas para niños"
class="imgcard">
</div>
<div class="card">Urbano:<br><b>"Perfecto para el cole"</b><br>
<img src="./static/img/home/paraelcole.jpg" alt="Imagen e zapatillas urbanas para niños"
class="imgcard">
</div>
<div class="card">Casual:<br><b>"Comodidad para jugar todo el día"</b><br>
<img src="./static/img/home/informalnino.jpg" alt="Imagen de zapatillas informales para niños"
class="imgcard">
</div>
</section>
</article>
</main>
<!--Footer-->
<footer id="footer">
<a name="footer">Nuestras redes</a><br>
<a class="social"><i class="fab fa-facebook"></i>Stylish Steps</a>
<a class="social"><i class="fab fa-twitter"></i>Stylish Steps</a>
<a class="social"><i class="fab fa-instagram"></i>Stylish Steps amantes de la moda </a>
<a class="social"><i class="fab fa-youtube"></i>Stylish Steps expertos en calzado </a>
</footer>
<script src="./html/src/script.js"></script>
</body>
</html>