-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
297 lines (284 loc) · 10.5 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
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SANA SANA</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
/* Estilos del Header */
header {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.logo {
font-size: 24px;
font-weight: 500;
}
nav {
display: flex;
}
nav a {
color: white;
margin-left: 20px;
text-decoration: none;
font-weight: 500;
}
/* Menú para dispositivos móviles */
.menu-icon {
display: none;
cursor: pointer;
font-size: 30px;
}
/* Estilos para el menú en móvil */
@media screen and (max-width: 768px) {
nav {
display: none;
flex-direction: column;
width: 100%;
position: absolute;
top: 60px;
left: 0;
background-color: #333;
padding: 20px;
z-index: 10;
}
nav a {
margin-left: 0;
margin-bottom: 15px;
}
.menu-icon {
display: block;
}
nav.show {
display: flex;
}
}
</style>
</head>
<body>
<header>
<div class="logo">SANA SANA</div>
<nav>
<a href="#index.html">Inicio</a>
<a href="#services">Servicios</a>
<a href="#catalog">Catalogo</a>
<a href="#contactForm">Contacto</a>
</nav>
<div class="menu-icon" onclick="toggleMenu()">☰</div>
</header>
<script>
function toggleMenu() {
const nav = document.querySelector('nav');
nav.classList.toggle('show');
}
</script>
</head>
<body>
<header class="hero">
<div class="overlay"></div>
<div class="contenido-hero">
<h1><span></span></h1>
<p>Asesoría y soluciones integrales para farmacias y boticas.</p>
<a href="#services" class="boton">Descubre Más</a>
</div>
</header>
</body>
</html>
<!-- Servicios -->
<section id="services" class="services">
<h2 class="section-title">Nuestros Servicios</h2>
<div class="service-cards">
<!-- Servicio 1: Asesoría Farmacéutica -->
<div class="service-card">
<i class="fas fa-hospital-user service-icon"></i>
<h3>Asesoría Farmacéutica</h3>
<p>Te acompañamos en el proceso de apertura, desde la planificación hasta la puesta en marcha.</p>
<a href="asesoria-farmaceutica.html" class="btn-secondary">Leer más</a>
</div>
<!-- Servicio 2: Muebles de Melamina -->
<div class="service-card">
<i class="fas fa-couch service-icon"></i>
<h3>Muebles de Melamina</h3>
<p>Muebles totalmente personalizables para amoblar tu establecimiento a tu gusto.</p>
<a href="muebles-melamina.html" class="btn-secondary">Leer más</a>
</div>
<!-- Servicio 3: Misión y Visión -->
<div class="service-card">
<i class="fas fa-couch service-icon"></i>
<h3>Misión y Visión</h3>
<p>Conoce más acerca de nosotros.</p>
<a href="mision-vision.html" class="btn-secondary">Leer más</a>
</div>
<!-- Nuevo Servicio: Capacitaciones Certificadas -->
<div class="service-card">
<i class="fas fa-graduation-cap service-icon"></i>
<h3>Capacitaciones Certificadas</h3>
<p>Ofrecemos programas de formación con certificación para que desarrolles nuevas habilidades profesionales.</p>
<a href="capacitaciones-certificadas.html" class="btn-secondary">Leer más</a>
</div>
</div>
</section>
<!-- Catálogo de Productos -->
<section id="catalog" class="catalog">
<h2 class="section-title">Catálogo de Productos</h2>
<div class="product-cards">
<!-- Producto 1 -->
<div class="product-card">
<img src="botiquin.jpg" alt="Botiquín de Primeros Auxilios">
<h3>Botiquín de Primeros Auxilios</h3>
<p>Kit esencial para emergencias médicas en tu farmacia o establecimiento.</p>
</div>
<!-- Producto 3 -->
<div class="product-card">
<img src="imgex.jpg" alt="Extintor contra incendios">
<h3>Extintor contra incendios</h3>
<p>Utilizado para garantizar seguridad en tu establecimiento ante cualquier incendio.</p>
</div>
<!-- Producto 2 -->
<div class="product-card">
<img src="señaliza.png" alt="Señalíticas de Seguridad">
<h3>Señalíticas de Seguridad</h3>
<p>Señales visibles para garantizar la seguridad en tu negocio.</p>
</div>
<!-- Producto 3 -->
<div class="product-card">
<img src="certifu.jpg" alt="Certificado de Pozo a tierra">
<h3>Certificado de Fumigación</h3>
<p>Certificación necesaria para cumplir con normativas de salud y seguridad.</p>
</div>
<!-- Producto 4 -->
<div class="product-card">
<img src="rotu.png" alt="Rótulos de Áreas">
<h3>Rótulos de Áreas</h3>
<p>Identificación clara de las áreas dentro de tu farmacia.</p>
</div>
<!-- Producto 5 -->
<div class="product-card">
<img src="cinta.jpg" alt="Cinta de Señalización">
<h3>Cinta de Señalización</h3>
<p>Marca zonas peligrosas o restringidas para evitar accidentes.</p>
</div>
<!-- Producto 6 -->
<div class="product-card">
<img src="ocurre.jpg" alt="Libro de Ocurrencias">
<h3>Libro de Ocurrencias</h3>
<p>Registra eventos importantes para un control eficiente.</p>
</div>
<!-- Producto 7 -->
<div class="product-card">
<img src="estupe.jpg" alt="Libro de Estupefacientes">
<h3>Libro de Estupefacientes</h3>
<p>Controla el manejo de productos con contenido especial.</p>
</div>
<!-- Producto 8 -->
<div class="product-card">
<img src="psico.jpg" alt="Libro de Psicótropicos">
<h3>Libro de Psicótropicos</h3>
<p>Documenta la venta de productos psicotrópicos según normativas legales.</p>
</div>
<!-- Producto 6 -->
<div class="product-card">
<img src="emergencia.jpg" alt="Luz led de Emergencia">
<h3>Luz led de Emergencia</h3>
<p>Confiables y eficientes para cualquier situación.</p>
</div>
<!-- Producto 7 -->
<div class="product-card">
<img src="termo.jpg" alt="Termohigrometro Calibrado">
<h3>Termohigrometro Calibrado</h3>
<p>Ideal para el control de temperatura en tu establecimiento.</p>
</div>
</div>
</section>
<a href="https://wa.me/+51907826118" target="_blank" class="btn-whatsapp-float">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
</a>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Contacto</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="formulario-contacto">
<h1>Contáctanos</h1>
<form id="contactForm" action="https://formsubmit.co/corpsanasana@gmail.com" method="POST">
<div class="campo">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre completo" required>
</div>
<div class="campo">
<label for="email">Correo Electrónico</label>
<input type="email" id="email" name="email" placeholder="Tu correo electrónico" required>
</div>
<div class="campo">
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5" placeholder="Escribe tu mensaje" required></textarea>
</div>
<button type="submit" class="boton">Enviar</button>
<input type="hidden" name="next" value="https://websitesecc.github.io/Corporacion-Sana-Sana/index.html">
<input type="hidden" name="_captcha" value="false">
</form>
<div id="mensaje-exito" class="mensaje-exito" style="display: none;">
¡Formulario enviado con éxito! Te responderemos pronto.
</div>
</section>
<footer>
<div class="footer-contenido">
<div class="informacion">
<h3>SANA SANA</h3>
<p>Dirección: Piura-Sullana, Bellavista</p>
<p>Teléfono: +51 907 826 118</p>
<p>Correo: corpsanasana@gmail.com</p>
</div>
<!-- Sección de redes sociales -->
<div class="redes-sociales">
<h4>Síguenos en:</h4>
<div class="iconos-redes">
<a href="https://www.facebook.com/share/1GjC8XUNwB/?mibextid=JRoKGi" target="_blank">
<img src="fb sinfondo.png" alt="Facebook" />
</a>
<a href="https://wa.me/+51907826118" target="_blank">
<img src="tuiter-removebg-preview.png" alt="Twitter" />
</a>
<a href="https://instagram.com" target="_blank">
<img src="ig sin fondo.png" alt="Instagram" />
</a>
</div>
</div>
<!-- Sección de suscripción -->
<div class="suscripcion">
<h4>Suscríbete a nuestras capacitaciones</h4>
<form id="contactForm" action="https://formsubmit.co/corpsanasana@gmail.com" method="POST">
<input type="email" placeholder="Tu correo" required>
<button type="submit">Suscribirse</button>
<input type="hidden" name="next" value="https://websitesecc.github.io/Corporacion-Sana-Sana/index.html">
<input type="hidden" name="_captcha" value="false">
</form>
</div>
<!-- Enlace al libro de reclamaciones -->
<div class="enlaces-footer">
<a href="#" id="libro-reclamaciones">Libro de Reclamaciones</a>
</div>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>