-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
213 lines (191 loc) · 9.5 KB
/
index.html
File metadata and controls
213 lines (191 loc) · 9.5 KB
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seguridad Vial - Inicio | Protege tu camino</title>
<link rel="stylesheet" href="estilos.css" />
<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=Montserrat:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<body>
<div class="redes-sociales-flotantes">
<a href="https://www.facebook.com/tupagina" target="_blank" aria-label="Síguenos en Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.instagram.com/tupagina" target="_blank" aria-label="Síguenos en Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/tupagina" target="_blank" aria-label="Síguenos en X (Twitter)">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/tupagina" target="_blank" aria-label="Síguenos en LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<header class="site-header">
</header>
</body>
<header class="site-header">
<nav class="barra-navegacion" aria-label="Navegación principal del sitio">
<a href="index.html">Inicio</a>
<a href="equipo_seguridad.html">Equipo de seguridad</a>
<a href="accesorios.html">Accesorios</a>
<a href="herramientas.html">Seguridad Vial</a>
</nav>
</header>
<section class="hero" role="banner">
<h1>Protege tu camino con Seguridad Vial</h1>
<p>Encuentra equipos y accesorios confiables para tu protección y la de los demás en la carretera.</p>
</section>
<main>
<section class="carrusel-auto">
<h2>Galería de Equipos en Acción</h2>
<div class="slides-auto">
<div class="slide" role="group" aria-label="Diapositiva 1 de 3"><img src="images/casco/casco.jpg"
alt="Casco de seguridad"></div>
<div class="slide" role="group" aria-label="Diapositiva 2 de 3"><img src="images/chalecos/chaleco2.jpg"
alt="Chaleco reflectivo"></div>
<div class="slide" role="group" aria-label="Diapositiva 3 de 3"><img src="images/equiposeguridad.jpg"
alt="Equipo de seguridad vial"></div>
</div>
</section>
<hr>
<section class="productos-destacados">
<h2 id="destacados-heading">Nuestros Productos Más Vendidos</h2>
<div class="destacados-grid">
<article class="imagen-item">
<a href="enlace-a-producto-casco.html"> <img src="images/casco/casco.jpg"
alt="Casco de seguridad avanzado con visera" loading="lazy" />
<h3>Casco Integral Pro</h3>
<p class="precio">Precio: $180.000 COP</p>
</a>
</article>
<article class="imagen-item">
<a href="enlace-a-producto-kit-primeros-auxilios.html">
<img src="images/otros/BOTIQUIN-MALETIN.png"
alt="Kit de primeros auxilios compacto para vehículos" loading="lazy" />
<h3>Kit de Primeros Auxilios</h3>
<p class="precio">Precio: $75.000 COP</p>
</a>
</article>
<article class="imagen-item">
<a href="enlace-a-producto-guantes.html">
<img src="images/guantes/guantes.jpg"
alt="Guantes de protección para motociclistas, color negro" loading="lazy" />
<h3>Guantes Reforzados</h3>
<p class="precio">Precio: $50.000 COP</p>
</a>
</article>
</div>
<div class="ver-mas-productos">
<a href="productos.html" class="boton-primario">Ver todos los productos</a>
</div>
</section>
<hr>
<section class="galeria">
<h2 id="galeria-general-heading">Toda Nuestra Colección de Seguridad Vial</h2>
<div class="productos-grid">
<article class="imagen-item">
<a href="enlace-a-producto-cono.html">
<img src="images/senalizaciones/conos.jpg" alt="Cono de señalización de tráfico"
loading="lazy" />
<h3>Cono de señalización</h3>
<p class="precio">Precio: $35.000 COP</p>
</a>
</article>
<article class="imagen-item">
<a href="enlace-a-producto-chaleco.html">
<img src="images/chalecos/chaleco4.jpg" alt="Chaleco reflectivo de seguridad" loading="lazy" />
<h3>Chaleco reflectivo</h3>
<p class="precio">Precio: $25.500 COP</p>
</a>
</article>
<article class="imagen-item">
<a href="enlace-a-producto-luces.html">
<img src="images/luces/luces.jpg" alt="Luces de emergencia LED" loading="lazy" />
<h3>Luces de emergencia LED</h3>
<p class="precio">Precio: $60.000 COP</p>
</a>
</article>
<article class="imagen-item">
<a href="enlace-a-producto-senal.html">
<img src="images/senalizaciones/senal-portatil.jpg" alt="Señal preventiva portátil"
loading="lazy" />
<h3>Señal preventiva portátil</h3>
<p class="precio">Precio: $45.700 COP</p>
</a>
</article>
</div>
</section>
<hr>
<section class="info-adicional">
<h2 id="info-heading">¿Por qué elegir Seguridad Vial?</h2>
<div class="beneficios-grid">
<div class="beneficio-item">
<h3>Calidad Garantizada</h3>
<p>Todos nuestros productos están fabricados con los más altos estándares para tu seguridad.</p>
</div>
<div class="beneficio-item">
<h3>Envío Rápido y Seguro</h3>
<p>Recibe tus compras directamente en tu puerta, de forma eficiente y protegida.</p>
</div>
<div class="beneficio-item">
<h3>Soporte Personalizado</h3>
<p>Nuestro equipo experto está listo para asesorarte y resolver tus dudas en todo momento.</p>
</div>
<div class="beneficio-item">
<h3>Compromiso con tu Seguridad</h3>
<p>Más que vender productos, nos preocupamos por tu bienestar en cada trayecto.</p>
</div>
</div>
</section>
<hr>
<section class="llamada-accion-final">
<h2>Únete a nuestra comunidad segura</h2>
<p>Miles de conductores ya confían en nosotros para proteger su camino. ¡No te quedes atrás!</p>
<a href="contacto.html" class="boton-primario">Contáctanos Hoy</a>
</section>
</main>
</main>
<div class="chatbot-container">
<button id="chatbot-toggle" aria-expanded="false" aria-controls="chatbot-window"
aria-label="Abrir o cerrar el chatbot">
<i class="fas fa-comments"></i> </button>
<div id="chatbot-window" class="chatbot-window" aria-live="polite" aria-atomic="true" hidden>
<div class="chatbot-header">
<h3>Asistente de Seguridad Vial</h3>
<button id="chatbot-close" aria-label="Cerrar chatbot">
<i class="fas fa-times"></i> </button>
</div>
<div class="chatbot-body" id="chatbot-body">
<div class="message received">
<p>¡Hola! Soy tu asistente de Seguridad Vial. ¿En qué puedo ayudarte hoy?</p>
</div>
</div>
<div class="chatbot-footer">
<input type="text" id="chatbot-input" placeholder="Escribe tu mensaje..."
aria-label="Escribe tu mensaje al chatbot">
<button id="chatbot-send" aria-label="Enviar mensaje">
<i class="fas fa-paper-plane"></i> </button>
</div>
</div>
</div>
<footer class="footer">
</footer>
<script src="chatbot.js"></script>
</body>
</html>
<footer class="footer">
<div class="footer-content">
<p>© 2025 Seguridad Vial | Todos los derechos reservados</p>
</div>
</footer>
</body>
</html>