-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
342 lines (304 loc) · 19.1 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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Nos conectamos a bootstrap por medio de cnd -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Agregamos el documento de estilos personalizados -->
<link rel="stylesheet" href="Styles/Styles.css">
<!-- Importamos la fuente Oswald -->
<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=Lobster&family=Oswald:[email protected]&display=swap" rel="stylesheet">
<title>Inicio</title>
</head>
<body class="bg-success bg-gradient bg-opacity-10">
<!-- Creamos la cabecera en la cual incluimos un titulo, una barra de navegacion con los diferentes enlaces -->
<header class="container text-center border-top border-success mt-1">
<h1>Ciuda de tus mascotas con PetWell</h1>
<nav class="navbar justify-content-center">
<ul class="list-group list-group-horizontal list-unstyled">
<li class="list-group-item">
<a href="index.html" class="fs-6 fw-semibold fst-italic ps-2 pe-4 icon-link link-success link-underline link-underline-opacity-0 link-underline-opacity-50-hover link-offset-2">
<img src="Images/Home.svg" alt="" class="ps-3 px-2">
<span>Inicio</span>
</a>
</li>
<li class="list-group-item">
<a href="https://nakanpets.com/?gad_source=1&gclid=CjwKCAjw-O6zBhASEiwAOHeGxToVX1MlzjQt8ax2tFsa0JbHGMXMHNZwEqp9vPayRNrRcy6lQkFnshoCsBEQAvD_BwE" target="_blank" class="fs-6 fw-semibold fst-italic ps-2 pe-3 link-success link-underline link-underline-opacity-0 link-underline-opacity-50-hover link-offset-2">
<img src="Images/Products.svg" alt="" class="ps-3 px-2">
<span>Productos</span>
</a>
</li>
<li class="list-group-item">
<a href="https://wakypet.com/" target="_blank" class="fs-6 fw-semibold fst-italic ps-2 pe-3 link-success link-underline link-underline-opacity-0 link-underline-opacity-50-hover link-offset-2">
<img src="Images/Services.svg" alt="" class="ps-3 px-2">
<span>Servicios</span>
</a>
</li>
<li class="list-group-item">
<a href="https://mascotadictos.com/" target="_blank" class="fs-6 fw-semibold fst-italic ps-2 pe-3 link-success link-underline link-underline-opacity-0 link-underline-opacity-50-hover link-offset-2">
<img src="Images/Comunity.svg" alt="" class="ps-3 px-2">
<span>Comunidad</span>
</a>
</li>
</ul>
</nav>
</header>
<!-- Creamos la primera seccion donde estara almacenada alguna informacion general sobre la pagina -->
<section class="container seccion p-2 border border-success border-2">
<h2 class="fs-2 fst-italic text-white mt-3">Bienvenido a PetWell: El Hogar del Bienestar para tus Mascotas</h2>
<p class="fs-5 fw-medium text-success bg-white bg-opacity-75 px-2 pt-2 pb-4">En PetWell, nos apasiona el cuidado y bienestar de tus compañeros peludos. Nuestra misión es ofrecerte los mejores recursos, productos y consejos para asegurar que tus mascotas vivan felices y saludables. En PetWell, nos comprometemos a proporcionar información precisa y productos de alta calidad para que puedas brindar a tus mascotas la mejor vida posible. Creemos que cada mascota merece amor, cuidado y atención excepcional.</p>
<h2 class="fs-2 fst-italic text-white mt-3 ms-3">¿Que ofrecemos?</h2>
<section class="row justify-content-center">
<div class="col-12 col-md-12 col-lg-5 mx-4 my-2">
<article class="card p-1">
<img src="Images/First.avif" alt="" class="img-thumbnail">
<div class="card-body bg-success">
<h3 class="card-tittle text-white">Guías de Cuidado</h3>
<p class="card-text text-light fs-5 fst-italic">Aquí encontraras artículos detallados y consejos prácticos sobre cómo cuidar de todas tus mascotas, desde la alimentación adecuada hasta el ejercicio y la higiene.</p>
</div>
</article>
</div>
<div class="col-12 col-md-12 col-lg-5 mx-4 my-2">
<article class="card p-1">
<img src="Images/Second.avif" alt="" class="img-thumbnail">
<div class="card-body bg-success">
<h3 class="card-tittle text-white">Productos de Calidad</h3>
<p class="card-text text-light fs-5 fst-italic">Encuentra una selección cuidadosamente curada de alimentos, juguetes, accesorios y productos de salud para tus mascotas, todos elegidos por su calidad y beneficios.</p>
</div>
</article>
</div>
</section>
<section class="row justify-content-center mt-2">
<div class="col-12 col-md-12 col-lg-5 mx-4 my-2">
<article class="card p-1">
<img src="Images/Third.avif" alt="" class="img-thumbnail">
<div class="card-body bg-success">
<h3 class="card-tittle text-white">Servicios Veterinarios</h3>
<p class="card-text text-light fs-5 fst-italic">Conéctate con veterinarios expertos para consultas en línea, emergencias y atención especializada para mantener a tus mascotas en su mejor estado de salud.</p>
</div>
</article>
</div>
<div class="col-12 col-md-12 col-lg-5 mx-4 my-2">
<article class="card p-1">
<img src="Images/Fourth.avif" alt="" class="img-thumbnail">
<div class="card-body bg-success">
<h3 class="card-tittle text-white">Comunidad PetWell</h3>
<p class="card-text text-light fs-5 fst-italic">Únete a nuestra comunidad de amantes de las mascotas, comparte tus experiencias y aprende de otros dueños sobre las mejores prácticas de cuidado animal.</p>
</div>
</article>
</div>
</section>
</section>
<!-- Mini seccion de descarga de la aplicacion -->
<section class="container my-3 bg-white">
<div class="row py-2">
<div class="col">
<span class="fw-bold fs-5 mx-3"><img src="Images/Flecha.png" alt="" width="20px" class="me-2"> Descarga nuestra app</span>
<a href="https://play.google.com/store/apps/details?id=com.kubo.laika&hl=es_CO" class="button-class" target="_blank">
<button class="btn btn-success mx-3">
<img src="Images/PlayStore.png" alt="" width="30px">
<span>Play Store</span>
</button>
</a>
<a href="https://apps.apple.com/co/app/laika-la-tienda-de-tu-mascota/id1325285117" class="button-class" target="_blank">
<button class="btn btn-success mx-3">
<img src="Images/AppStore.png" alt="" width="30px">
<span>App Store</span>
</button>
</a>
</div>
</div>
</section>
<!-- Contenido principal de la pagina web, seccion de caracteristicas -->
<main class="container border bg-white py-2">
<h2 class="fs-2 fst-italic text-success mt-3">Caracteristicas</h2>
<section class="row">
<article class="col-10 col-md-10 col-lg-5 border border-3 ms-5 mb-2">
<ul class="list-unstyled px-2">
<li class="">
<h4 class="fst-italic text-dark mt-3">💉Recordatorio de vacunas</h4>
<p class="fw-medium px-5">Nunca te olvides de una cita importante. Recibe recordatorios automáticos para todas las vacunas necesarias de tu mascota, asegurando su salud y bienestar.</p>
</li>
</ul>
</article>
<article class="col-10 col-md-10 col-lg-5 border border-3 ms-5 mb-2">
<ul class="list-unstyled px-2">
<li class="">
<h4 class="fst-italic text-dark mt-3">🍖Consejos de Nutrición</h4>
<p class="fw-medium px-5">Nunca te olvides de una cita importante. Recibe recordatorios automáticos para todas las vacunas necesarias de tu mascota, asegurando su salud y bienestar.</p>
</li>
</ul>
</article>
</section>
<section class="row mb-5">
<article class="col-10 col-md-10 col-lg-5 border border-3 ms-5 mb-2">
<ul class="list-unstyled px-2">
<li class="">
<h4 class="fst-italic text-dark mt-3">🐾Comunidad de Dueños de Mascotas</h4>
<p class="fw-medium px-5">Conéctate con otros dueños de mascotas, comparte experiencias, obtén consejos y participa en eventos y actividades locales a través de nuestra vibrante comunidad en línea.</p>
</li>
</ul>
</article>
<article class="col-10 col-md-10 col-lg-5 border border-3 ms-5 mb-2">
<ul class="list-unstyled px-2">
<li class="">
<h4 class="fst-italic text-dark mt-3">🏃Seguimiento de Actividad</h4>
<p class="fw-medium px-5">Monitorea la actividad diaria de tu mascota, incluyendo paseos, juegos y descanso. Obtén informes detallados y establece metas para mantener a tu mascota activa y saludable.</p>
</li>
</ul>
</article>
</section>
<hr class="mt-5 mb-5">
<!-- Seccion de testimonios -->
<h2 class="fs-2 fst-italic text-success mt-5">Testimonios</h2>
<p class="fs-5 fst-italic text-dark px-3">Conoce algunos de las experiencias de nuestros usuarios.</p>
<section class="row px-4 justify-content-center my-5">
<div class="col-12 col-md-5 col-lg-4 my-2">
<article class="card p-1">
<img src="Images/Mujer1.jpg" alt="" class="img-thumbnail imgs">
<div class="card-body bg-secondary-subtle text-center">
<h3 class="card-tittle text-success fst-italic">Ana Martínez</h3>
<p class="card-text text-dark fs-5 text-start">"Desde que uso PetWell, nunca me he olvidado de una vacuna importante. Mi perro, Max, está más saludable y feliz que nunca, muchas gracias."</p>
</div>
</article>
</div>
<div class="col-12 col-md-5 col-lg-4 my-2">
<article class="card p-1">
<img src="Images/Hombre1.jpg" alt="" class="img-thumbnail imgs">
<div class="card-body bg-secondary-subtle text-center">
<h3 class="card-tittle text-success fst-italic">Carlos Gómez</h3>
<p class="card-text text-dark fs-5 text-start">"Los consejos de nutrición personalizados han hecho una gran diferencia en la dieta de mi gato, Luna. Ha perdido peso y se ve más enérgica."</p>
</div>
</article>
</div>
<div class="col-12 col-md-5 col-lg-4 my-2">
<article class="card p-1">
<img src="Images/Mujer2.jpg" alt="" class="img-thumbnail imgs">
<div class="card-body bg-secondary-subtle text-center">
<h3 class="card-tittle text-success fst-italic">Laura Fernández</h3>
<p class="card-text text-dark fs-5 text-start">"La comunidad de PetWell es increíble. He conocido a otros dueños de mascotas y hemos organizado varias caminatas juntos. ¡Es genial!"</p>
</div>
</article>
</div>
<div class="col-12 col-md-5 col-lg-4 my-2">
<article class="card p-1">
<img src="Images/Hombre2.jpg" alt="" class="img-thumbnail imgs">
<div class="card-body bg-secondary-subtle text-center">
<h3 class="card-tittle text-success fst-italic">José Ramírez</h3>
<p class="card-text text-dark fs-5 text-start">"El seguimiento de actividad me ha ayudado a mantener a mi perro, Rocky, en forma. Es una herramienta indispensable para cualquier dueño de mascota."</p>
</div>
</article>
</div>
<div class="col-12 col-md-5 col-lg-4 my-2">
<article class="card p-1">
<img src="Images/Mujer3.jpg" alt="" class="img-thumbnail imgs">
<div class="card-body bg-secondary-subtle text-center">
<h3 class="card-tittle text-success fst-italic">María López</h3>
<p class="card-text text-dark fs-5 text-start">"PetWell ha cambiado la vida de mi conejo, Bella. Con los recordatorios de vacunas y los consejos de nutrición, estoy tranquila sabiendo que está en buenas manos."</p>
</div>
</article>
</div>
</section>
<hr>
<!-- Formularios de registro -->
<h2 class="fs-2 fst-italic text-success mt-5">Hazte miembro</h2>
<p class="fs-5 fst-italic text-dark px-3">Suscribete para recibir notificaciones sobre todo nuestro contenido, noticias, y actualizaciones de la aplicacion.</p>
<form id="register_form">
<div class="row ps-2">
<div class="col-12 col-md-12 col-lg-6 my-2">
<label for="" class="form-label fs-5 fw-medium fst-italic ps-1">Nombre de usuario</label>
<input type="text" name="username" id="" class="form-control" placeholder="Digite el nombre de usuario" required>
</div>
<div class="col-12 col-md-12 col-lg-6 my-2">
<label for="" class="form-label fs-5 fw-medium fst-italic ps-1">Tipo de mascota</label>
<input type="text" name="petname" id="" class="form-control" placeholder="Digite su tipo de mascota" required>
</div>
</div>
<div class="row ps-2">
<div class="col my-2">
<label for="" class="form-label fs-5 fw-medium fst-italic ps-1">Correo electronico</label>
<input type="email" name="email" id="" class="form-control" placeholder="Digite su correo electronico" required>
</div>
</div>
<div class="row ps-2">
<div class="col my-2 text-center">
<button class="btn btn-success" id="save">Enviar</button>
</div>
</div>
<div class="alert alert-success text-center alt" id="alert">
<span class="fs-5 fw-medium fst-italic">Registro exitoso, gracias por contribuir con nuestra comunidad.</span>
</div>
<div class="text-center">
<button class="btn btn-success alt" id="close" onclick="mostrarMensaje()">Cerrar</button>
</div>
</form>
</main>
<!-- Agregamos todo el contenido del footer con los derechos de autor y los diferentes enlaces a la web -->
<footer class="container bg-dark text-center pb-2">
<div class="row">
<div class="col">
<p class="fs-5 fw-semibold text-white my-1">© Derechos reservados a <span class="text-success">Jojhan David Torres Tobon</span></p>
</div>
</div>
<div class="row py-2">
<div class="col">
<a href="https://www.facebook.com/" class="button-class" target="_blank">
<button class="btn btn-success bg-white mx-3">
<img src="Images/Facebook.png" alt="" width="30px">
<span class="text-success">Facebook</span>
</button>
</a>
<a href="https://x.com/?lang=es" class="button-class" target="_blank">
<button class="btn btn-success bg-white mx-3">
<img src="Images/Twitter.png" alt="" width="30px">
<span class="text-success">Twitter</span>
</button>
</a>
<a href="https://www.instagram.com/" class="button-class" target="_blank">
<button class="btn btn-success bg-white mx-3">
<img src="Images/Instragram.png" alt="" width="30px">
<span class="text-success">Instagram</span>
</button>
</a>
</div>
</div>
<div class="row">
<div class="col">
<p class="fs-6 fw-semibold text-white my-1"><img src="Images/Correo.png" alt="" width="40px" class="pe-2">Puedes escribirnos a
<a href="https://mail.google.com/mail/u/0/#inbox?compose=DmwnWtDnFdGzpKKXCdBsrSJTxNkPrnZCRxlSBQDVvhJlWrTKhXKnQNXHhWCQHbfKxgQdCtFQVvgv" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2 link-success" target="_blank">
<span class="text-success">[email protected]</span>
</a>
</p>
</div>
</div>
</footer>
<!-- Scripts utilizados para el funcionamiento de la alerta del formulario -->
<script>
const form = document.getElementById("register_form")
form.addEventListener("submit", function(event) {
event.preventDefault();
form.reset();
mostrarMensaje();
})
function mostrarMensaje() {
var alert = document.getElementById("alert");
var close = document.getElementById("close");
var save = document.getElementById("save");
if (alert.style.visibility === "hidden" || alert.style.visibility === "") {
alert.style.visibility = "visible";
close.style.visibility = "visible";
save.style.visibility = "hidden";
} else {
alert.style.visibility = "hidden";
close.style.visibility = "hidden";
save.style.visibility = "visible";
}
}
</script>
<!-- Conexion por medio de cnd con Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>