-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (134 loc) · 6.15 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uywakuna - Seguro de Mascotas</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="images/IconoUywakuna.ico" type="image/x-icon">
<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=Nunito:wght@200;400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="Logo Uywakuna">
Uywakuna
</div>
<nav>
<ul>
<li><a href="#quienes-somos" class="smooth-scroll">Quiénes Somos</a></li>
<li><a href="#planes-y-precios" class="smooth-scroll">Planes y Precios</a></li>
<li><a href="#contacto" class="smooth-scroll">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="intro" class="reveal">
<div class="container">
<h1>Bienvenido a Uywakuna</h1>
<p>El mejor seguro de mascotas para tu mejor amigo.</p>
<img src="images/foroimagen.png" alt="Seguro de Mascotas">
</div>
</section>
<section id="quienes-somos" class="reveal">
<div class="container">
<h2>Quiénes Somos</h2>
<p>Uywakuna es una empresa dedicada a proporcionar el mejor seguro de salud para mascotas. Nos preocupamos por tu mascota tanto como tú.</p>
<div class="partners">
<img src="images/compañia1.png" alt="Marca 1">
<img src="images/compañia2.png" alt="Marca 2">
<img src="images/compañia3.png" alt="Marca 3">
<img src="images/compañia4.png" alt="Marca 4">
<img src="images/compañia5.png" alt="Marca 5">
</div>
</div>
</section>
<section id="planes-y-precios" class="reveal">
<div class="container">
<h2>Planes y Precios</h2>
<p>Ofrecemos una variedad de planes para satisfacer las necesidades de tu mascota.</p>
<div class="plans">
<div class="plan basic">
<img src="images/plan1.jpeg" alt="Plan Básico">
<h3>Plan Básico</h3>
<ul>
<li>Cobertura esencial</li>
<li>Consultas veterinarias</li>
<li>Vacunación anual</li>
</ul>
<p class="price">70 soles</p>
</div>
<div class="plan standard">
<img src="images/plan2.jpeg" alt="Plan Estándar">
<h3>Plan Estándar</h3>
<ul>
<li>Cobertura completa</li>
<li>Consultas veterinarias</li>
<li>Vacunación anual</li>
<li>Cirugías menores</li>
</ul>
<p class="price">160 soles</p>
</div>
<div class="plan premium">
<img src="images/plan3.jpeg" alt="Plan Premium">
<h3>Plan Premium</h3>
<ul>
<li>Máxima cobertura</li>
<li>Consultas veterinarias</li>
<li>Vacunación anual</li>
<li>Cirugías mayores</li>
<li>Atención de emergencias</li>
</ul>
<p class="price">300 soles</p>
</div>
</div>
</div>
</section>
<section id="contacto" class="reveal">
<div class="container">
<h2>Contacto</h2>
<p>Para más información, por favor contáctanos.</p>
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email">
<button type="submit" class="submit-button">Enviar</button>
</form>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2024 Uywakuna. Todos los derechos reservados.</p>
<p><a href="#terminos">Términos y Condiciones</a> | <a href="#privacidad">Política de Privacidad</a></p>
</div>
</footer>
<a href="#" class="scroll-to-top">⬆</a>
<div class="chat-bubble">
💬
</div>
<div class="chat-box">
<div class="chat-header">
Chat de Uywakuna
<span class="chat-close">×</span>
</div>
<div class="chat-content">
<p>Hola! ¿Cómo podemos ayudarte hoy?</p>
<button class="question-button" data-question="horario">¿Cuál es el horario de atención?</button>
<button class="question-button" data-question="plan-basico">¿Qué más beneficios trae el Plan Básico?</button>
<button class="question-button" data-question="plan-estandar">¿Qué beneficios tiene el Plan Estándar?</button>
<button class="question-button" data-question="plan-premium">¿Qué beneficios tiene el Plan Premium?</button>
<button class="question-button" data-question="sede">¿Dónde está nuestra sede?</button>
</div>
<div class="chat-input">
<input type="text" placeholder="Escribe tu mensaje...">
</div>
</div>
<script src="script.js"></script>
</body>
</html>