Walterkz commited on
Commit
395013f
verified
1 Parent(s): 7f9a1fa

Esta imagen sigue sin cargar y ya te pedio que lo aregles varias veces - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +765 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dqesthetics
3
- emoji: 馃實
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dqesthetics
3
+ emoji: 馃惓
4
+ colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,765 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DQEsthetics - Centro de Est茅tica y Cosmiatr铆a</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#f8c8dc',
15
+ secondary: '#d4a373',
16
+ accent: '#e9b8c3',
17
+ dark: '#5a3d2b',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .hero-image {
25
+ background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
26
+ background-size: cover;
27
+ background-position: center;
28
+ }
29
+
30
+
31
+ @keyframes fadeIn {
32
+ from { opacity: 0; transform: translateY(20px); }
33
+ to { opacity: 1; transform: translateY(0); }
34
+ }
35
+
36
+ .fade-in {
37
+ animation: fadeIn 1s ease-out forwards;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="font-sans bg-white text-gray-800">
42
+ <!-- Header -->
43
+ <header class="bg-white shadow-md sticky top-0 z-50">
44
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
45
+ <div class="flex items-center">
46
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3">
47
+ <i class="fas fa-spa text-white text-xl"></i>
48
+ </div>
49
+ <h1 class="text-xl font-bold text-dark">DQ<span class="text-accent">Esthetics</span></h1>
50
+ </div>
51
+
52
+ <nav class="hidden md:flex space-x-8">
53
+ <a href="#inicio" class="text-dark hover:text-accent transition">Inicio</a>
54
+ <a href="#servicios" class="text-dark hover:text-accent transition">Servicios</a>
55
+ <a href="#galeria" class="text-dark hover:text-accent transition">Galer铆a</a>
56
+ <a href="#testimonios" class="text-dark hover:text-accent transition">Testimonios</a>
57
+ <a href="#contacto" class="text-dark hover:text-accent transition">Contacto</a>
58
+ </nav>
59
+
60
+ <div class="md:hidden">
61
+ <button id="menu-toggle" class="text-dark focus:outline-none">
62
+ <i class="fas fa-bars text-2xl"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Mobile menu -->
68
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
69
+ <div class="flex flex-col space-y-3">
70
+ <a href="#inicio" class="text-dark hover:text-accent transition">Inicio</a>
71
+ <a href="#servicios" class="text-dark hover:text-accent transition">Servicios</a>
72
+ <a href="#galeria" class="text-dark hover:text-accent transition">Galer铆a</a>
73
+ <a href="#testimonios" class="text-dark hover:text-accent transition">Testimonios</a>
74
+ <a href="#contacto" class="text-dark hover:text-accent transition">Contacto</a>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Hero Section -->
80
+ <section id="inicio" class="hero-image min-h-screen flex items-center justify-center text-white relative">
81
+ <div class="absolute inset-0 bg-black opacity-30"></div>
82
+ <div class="container mx-auto px-4 z-10 text-center fade-in">
83
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Belleza que <span class="text-primary">renace</span></h1>
84
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Tratamientos personalizados para cuidar tu piel y elevar tu autoestima</p>
85
+ <div class="flex flex-col md:flex-row justify-center gap-4">
86
+ <a href="https://wa.me/5491122563805" class="bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-full transition flex items-center justify-center gap-2">
87
+ <i class="fab fa-whatsapp"></i> Reservar consulta
88
+ </a>
89
+ <a href="#servicios" class="bg-transparent hover:bg-white hover:text-dark border-2 border-white text-white font-bold py-3 px-6 rounded-full transition">
90
+ Conoce nuestros servicios
91
+ </a>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
96
+ <a href="#servicios" class="text-white animate-bounce">
97
+ <i class="fas fa-chevron-down text-3xl"></i>
98
+ </a>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- About Section -->
103
+ <section class="py-16 bg-primary bg-opacity-10">
104
+ <div class="container mx-auto px-4">
105
+ <div class="flex flex-col md:flex-row items-center">
106
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
107
+ <img src="http://imgfz.com/i/uX3EfV1.png"
108
+ alt="Dianyth Querales - Propietaria de DQEsthetics"
109
+ class="rounded-lg shadow-xl w-full h-auto max-h-96 object-cover">
110
+ </div>
111
+ <div class="md:w-1/2">
112
+ <h2 class="text-3xl font-bold text-dark mb-6">Sobre <span class="text-accent">DQEsthetics</span></h2>
113
+ <p class="text-lg mb-6">Bienvenidos a DQEsthetics, un espacio creado por Dianyth Querales, Cosmetocosm铆atra profesional, donde combinamos ciencia y belleza para ofrecerte los mejores tratamientos para tu piel.</p>
114
+
115
+ <div class="bg-white p-6 rounded-lg shadow-md mb-6">
116
+ <h3 class="text-xl font-semibold text-dark mb-3">Nuestra Misi贸n</h3>
117
+ <p class="text-gray-700">Cuidar, elevar la piel y autoestima con tratamientos personalizados seg煤n biotipo cut谩neo, utilizando tecnolog铆a de vanguardia y productos de alta calidad.</p>
118
+ </div>
119
+
120
+ <div class="grid grid-cols-2 gap-4">
121
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
122
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
123
+ <i class="fas fa-certificate text-white"></i>
124
+ </div>
125
+ <span class="font-medium">Profesional Certificada</span>
126
+ </div>
127
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
128
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
129
+ <i class="fas fa-heart text-white"></i>
130
+ </div>
131
+ <span class="font-medium">Tratamientos Personalizados</span>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Services Section -->
140
+ <section id="servicios" class="py-16 bg-white">
141
+ <div class="container mx-auto px-4">
142
+ <div class="text-center mb-12">
143
+ <h2 class="text-3xl font-bold text-dark mb-4">Nuestros <span class="text-accent">Servicios</span></h2>
144
+ <p class="text-lg max-w-2xl mx-auto">Descubre nuestros tratamientos especializados dise帽ados para realzar tu belleza natural</p>
145
+ </div>
146
+
147
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
148
+ <!-- Service 1 -->
149
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
150
+ <div class="h-48 overflow-hidden">
151
+ <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
152
+ alt="Consulta diagn贸stico de piel"
153
+ class="w-full h-full object-cover">
154
+ </div>
155
+ <div class="p-6">
156
+ <div class="flex items-center mb-3">
157
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
158
+ <i class="fas fa-search text-white"></i>
159
+ </div>
160
+ <h3 class="text-xl font-bold text-dark">Consulta Diagn贸stico de Piel</h3>
161
+ </div>
162
+ <p class="text-gray-600 mb-4">Evaluaci贸n profesional gratuita para determinar tu biotipo cut谩neo y necesidades espec铆ficas.</p>
163
+ <div class="bg-primary bg-opacity-10 px-3 py-1 rounded-full inline-block">
164
+ <span class="text-primary font-medium">GRATUITO</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Service 2 -->
170
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
171
+ <div class="h-48 overflow-hidden">
172
+ <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
173
+ alt="Tratamientos con EXOSOMAS - Regeneraci贸n celular"
174
+ class="w-full h-full object-cover">
175
+ </div>
176
+ <div class="p-6">
177
+ <div class="flex items-center mb-3">
178
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
179
+ <i class="fas fa-dna text-white"></i>
180
+ </div>
181
+ <h3 class="text-xl font-bold text-dark">Tratamientos con EXOSOMAS</h3>
182
+ </div>
183
+ <p class="text-gray-600 mb-4">Tecnolog铆a de regeneraci贸n celular avanzada para una piel m谩s joven y saludable.</p>
184
+ <div class="flex items-center text-secondary">
185
+ <i class="fas fa-star mr-1"></i>
186
+ <i class="fas fa-star mr-1"></i>
187
+ <i class="fas fa-star mr-1"></i>
188
+ <i class="fas fa-star mr-1"></i>
189
+ <i class="fas fa-star mr-1"></i>
190
+ <span class="ml-2 text-sm">M谩s solicitado</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Service 3 -->
196
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
197
+ <div class="h-48 overflow-hidden">
198
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
199
+ alt="Higiene facial profunda"
200
+ class="w-full h-full object-cover">
201
+ </div>
202
+ <div class="p-6">
203
+ <div class="flex items-center mb-3">
204
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
205
+ <i class="fas fa-spa text-white"></i>
206
+ </div>
207
+ <h3 class="text-xl font-bold text-dark">Higiene Facial Profunda</h3>
208
+ </div>
209
+ <p class="text-gray-600 mb-4">Limpieza profunda con extracciones para eliminar impurezas y renovar tu piel.</p>
210
+ <div class="flex items-center text-secondary">
211
+ <i class="fas fa-birthday-cake mr-2"></i>
212
+ <span class="font-medium">20% OFF en tu cumplea帽os</span>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Service 4 -->
218
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
219
+ <div class="h-48 overflow-hidden">
220
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
221
+ alt="DERMAPLANING - Exfoliaci贸n mec谩nica profesional"
222
+ class="w-full h-full object-cover">
223
+ </div>
224
+ <div class="p-6">
225
+ <div class="flex items-center mb-3">
226
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
227
+ <i class="fas fa-cut text-white"></i>
228
+ </div>
229
+ <h3 class="text-xl font-bold text-dark">DERMAPLANING</h3>
230
+ </div>
231
+ <p class="text-gray-600 mb-4">Exfoliaci贸n mec谩nica que elimina c茅lulas muertas y vello facial para una piel radiante.</p>
232
+ <div class="flex items-center text-secondary">
233
+ <i class="fas fa-clock mr-2"></i>
234
+ <span class="font-medium">Resultados inmediatos</span>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Service 5 -->
240
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
241
+ <div class="h-48 overflow-hidden">
242
+ <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
243
+ alt="Maquillaje profesional"
244
+ class="w-full h-full object-cover">
245
+ </div>
246
+ <div class="p-6">
247
+ <div class="flex items-center mb-3">
248
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
249
+ <i class="fas fa-paint-brush text-white"></i>
250
+ </div>
251
+ <h3 class="text-xl font-bold text-dark">Maquillaje Profesional</h3>
252
+ </div>
253
+ <p class="text-gray-600 mb-4">T茅cnicas profesionales para eventos especiales o aprendizaje en nuestros cursos.</p>
254
+ <div class="flex items-center text-secondary">
255
+ <i class="fas fa-graduation-cap mr-2"></i>
256
+ <span class="font-medium">Cursos disponibles</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Service 6 -->
262
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
263
+ <div class="h-48 overflow-hidden">
264
+ <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80"
265
+ alt="Tratamientos faciales con aparatolog铆a"
266
+ class="w-full h-full object-cover">
267
+ </div>
268
+ <div class="p-6">
269
+ <div class="flex items-center mb-3">
270
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
271
+ <i class="fas fa-microchip text-white"></i>
272
+ </div>
273
+ <h3 class="text-xl font-bold text-dark">Aparatolog铆a Facial</h3>
274
+ </div>
275
+ <p class="text-gray-600 mb-4">Tecnolog铆a avanzada para tratamientos de rejuvenecimiento y cuidado facial.</p>
276
+ <div class="flex items-center text-secondary">
277
+ <i class="fas fa-bolt mr-2"></i>
278
+ <span class="font-medium">Tecnolog铆a de punta</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="mt-12 text-center">
285
+ <a href="https://wa.me/5491122563805" class="bg-primary hover:bg-accent text-white font-bold py-3 px-8 rounded-full transition inline-flex items-center">
286
+ <i class="fab fa-whatsapp mr-2"></i> Consultar disponibilidad
287
+ </a>
288
+ </div>
289
+ </div>
290
+ </section>
291
+
292
+ <!-- Gallery Section -->
293
+ <section id="galeria" class="py-16 bg-primary bg-opacity-10">
294
+ <div class="container mx-auto px-4">
295
+ <div class="text-center mb-12">
296
+ <h2 class="text-3xl font-bold text-dark mb-4">Transformaciones <span class="text-accent">Reales</span></h2>
297
+ <p class="text-lg max-w-2xl mx-auto">Descubre los resultados de nuestros tratamientos personalizados</p>
298
+ </div>
299
+
300
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
301
+ <div class="overflow-hidden rounded-lg shadow-lg">
302
+ <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80"
303
+ alt="Resultado de tratamiento"
304
+ class="w-full h-64 object-cover hover:scale-105 transition duration-300">
305
+ </div>
306
+ <div class="overflow-hidden rounded-lg shadow-lg">
307
+ <img src="https://images.unsplash.com/photo-1556228579-6d256d1d7e82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
308
+ alt="Resultado de tratamiento"
309
+ class="w-full h-64 object-cover hover:scale-105 transition duration-300">
310
+ </div>
311
+ <div class="overflow-hidden rounded-lg shadow-lg">
312
+ <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
313
+ alt="Resultado de tratamiento"
314
+ class="w-full h-64 object-cover hover:scale-105 transition duration-300">
315
+ </div>
316
+ </div>
317
+
318
+ <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
319
+ <div class="h-40 overflow-hidden rounded-lg shadow-md">
320
+ <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
321
+ alt="Treatment 1"
322
+ class="w-full h-full object-cover hover:scale-105 transition duration-300">
323
+ </div>
324
+ <div class="h-40 overflow-hidden rounded-lg shadow-md">
325
+ <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
326
+ alt="Treatment 2"
327
+ class="w-full h-full object-cover hover:scale-105 transition duration-300">
328
+ </div>
329
+ <div class="h-40 overflow-hidden rounded-lg shadow-md">
330
+ <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
331
+ alt="Treatment 3"
332
+ class="w-full h-full object-cover hover:scale-105 transition duration-300">
333
+ </div>
334
+ <div class="h-40 overflow-hidden rounded-lg shadow-md">
335
+ <img src="https://images.unsplash.com/photo-1556228579-6d256d1d7e82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
336
+ alt="Treatment 4"
337
+ class="w-full h-full object-cover hover:scale-105 transition duration-300">
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </section>
342
+
343
+ <!-- Testimonials Section -->
344
+ <section id="testimonios" class="py-16 bg-white">
345
+ <div class="container mx-auto px-4">
346
+ <div class="text-center mb-12">
347
+ <h2 class="text-3xl font-bold text-dark mb-4">Lo que dicen <span class="text-accent">nuestras clientas</span></h2>
348
+ <p class="text-lg max-w-2xl mx-auto">Experiencias reales de quienes confiaron en nuestros tratamientos</p>
349
+ </div>
350
+
351
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
352
+ <!-- Testimonial 1 -->
353
+ <div class="bg-primary bg-opacity-10 p-6 rounded-xl">
354
+ <div class="flex items-center mb-4">
355
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3">
356
+ <i class="fas fa-user text-white"></i>
357
+ </div>
358
+ <div>
359
+ <h4 class="font-bold text-dark">Mar铆a G.</h4>
360
+ <div class="flex text-secondary">
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ <p class="text-gray-700 italic">"Los tratamientos con exosomas cambiaron completamente mi piel. Despu茅s de a帽os de luchar con manchas y textura irregular, finalmente tengo una piel uniforme y radiante. Dianyth es incre铆blemente profesional y sabe exactamente lo que necesita cada piel."</p>
370
+ </div>
371
+
372
+ <!-- Testimonial 2 -->
373
+ <div class="bg-primary bg-opacity-10 p-6 rounded-xl">
374
+ <div class="flex items-center mb-4">
375
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3">
376
+ <i class="fas fa-user text-white"></i>
377
+ </div>
378
+ <div>
379
+ <h4 class="font-bold text-dark">Laura V.</h4>
380
+ <div class="flex text-secondary">
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ <p class="text-gray-700 italic">"El dermaplaning fue una revelaci贸n para m铆. No solo elimin贸 el vello facial que tanto me molestaba, sino que dej贸 mi piel incre铆blemente suave y preparada para absorber mejor mis productos de cuidado. El ambiente en DQEsthetics es tan relajante que siempre salgo renovada por dentro y por fuera."</p>
390
+ </div>
391
+
392
+ <!-- Testimonial 3 -->
393
+ <div class="bg-primary bg-opacity-10 p-6 rounded-xl">
394
+ <div class="flex items-center mb-4">
395
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3">
396
+ <i class="fas fa-user text-white"></i>
397
+ </div>
398
+ <div>
399
+ <h4 class="font-bold text-dark">Carolina R.</h4>
400
+ <div class="flex text-secondary">
401
+ <i class="fas fa-star"></i>
402
+ <i class="fas fa-star"></i>
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ <p class="text-gray-700 italic">"Tom茅 el curso de maquillaje y fue una experiencia incre铆ble. Aprend铆 t茅cnicas profesionales que nunca hubiera descubierto por mi cuenta. Dianyth tiene una paciencia infinita y explica todo de manera clara. Ahora me maquillo mejor que nunca y hasta he empezado a maquillar a mis amigas para eventos especiales."</p>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="mt-12 text-center">
414
+ <a href="https://wa.me/5491122563805" class="bg-primary hover:bg-accent text-white font-bold py-3 px-8 rounded-full transition inline-flex items-center">
415
+ <i class="fas fa-pen mr-2"></i> Deja tu testimonio
416
+ </a>
417
+ </div>
418
+ </div>
419
+ </section>
420
+
421
+ <!-- Reservation Section -->
422
+ <section class="py-16 bg-accent bg-opacity-10">
423
+ <div class="container mx-auto px-4">
424
+ <div class="text-center mb-12">
425
+ <h2 class="text-3xl font-bold text-dark mb-4">Reserva tu <span class="text-accent">Cita</span></h2>
426
+ <p class="text-lg max-w-2xl mx-auto">Selecciona el servicio y fecha que prefieras para tu pr贸xima visita</p>
427
+ </div>
428
+
429
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
430
+ <div class="md:flex">
431
+ <div class="md:w-1/2 p-8">
432
+ <h3 class="text-xl font-bold text-dark mb-6">Disponibilidad</h3>
433
+
434
+ <div class="mb-6">
435
+ <label for="service" class="block text-gray-700 font-medium mb-2">Servicio</label>
436
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
437
+ <option value="">Selecciona un servicio</option>
438
+ <option value="Consulta diagn贸stico">Consulta diagn贸stico de piel</option>
439
+ <option value="Exosomas">Tratamientos con EXOSOMAS</option>
440
+ <option value="Higiene facial">Higiene facial profunda</option>
441
+ <option value="Dermaplaning">DERMAPLANING</option>
442
+ <option value="Maquillaje">Maquillaje profesional</option>
443
+ </select>
444
+ </div>
445
+
446
+ <div class="mb-6">
447
+ <label for="date" class="block text-gray-700 font-medium mb-2">Fecha</label>
448
+ <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
449
+ </div>
450
+
451
+ <div class="mb-6">
452
+ <label for="time" class="block text-gray-700 font-medium mb-2">Hora</label>
453
+ <select id="time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
454
+ <option value="">Selecciona una hora</option>
455
+ <option value="15:30">15:30</option>
456
+ <option value="16:00">16:00</option>
457
+ <option value="16:30">16:30</option>
458
+ <option value="17:00">17:00</option>
459
+ <option value="17:30">17:30</option>
460
+ <option value="18:00">18:00</option>
461
+ <option value="18:30">18:30</option>
462
+ </select>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="md:w-1/2 bg-primary bg-opacity-10 p-8 flex flex-col justify-between">
467
+ <div>
468
+ <h3 class="text-xl font-bold text-dark mb-4">Resumen de Reserva</h3>
469
+ <div class="space-y-4">
470
+ <div class="flex justify-between">
471
+ <span class="text-gray-700">Servicio:</span>
472
+ <span class="font-medium" id="service-summary">-</span>
473
+ </div>
474
+ <div class="flex justify-between">
475
+ <span class="text-gray-700">Fecha:</span>
476
+ <span class="font-medium" id="date-summary">-</span>
477
+ </div>
478
+ <div class="flex justify-between">
479
+ <span class="text-gray-700">Hora:</span>
480
+ <span class="font-medium" id="time-summary">-</span>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="mt-8">
486
+ <button class="w-full bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-full transition">
487
+ Confirmar Reserva
488
+ </button>
489
+ <p class="text-sm text-gray-500 mt-3 text-center">Al confirmar, ser谩s redirigido a WhatsApp para finalizar el proceso.</p>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ <!-- Schedule Section -->
498
+ <section class="py-16 bg-primary text-white">
499
+ <div class="container mx-auto px-4">
500
+ <div class="flex flex-col md:flex-row items-center">
501
+ <div class="md:w-1/2 mb-8 md:mb-0">
502
+ <h2 class="text-3xl font-bold mb-6">Horarios de <span class="text-accent">Atenci贸n</span></h2>
503
+
504
+ <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm">
505
+ <div class="space-y-4">
506
+ <div class="flex justify-between border-b border-white border-opacity-30 pb-2">
507
+ <span class="font-medium">Lunes</span>
508
+ <span>15:30 - 19:00</span>
509
+ </div>
510
+ <div class="flex justify-between border-b border-white border-opacity-30 pb-2">
511
+ <span class="font-medium">Martes</span>
512
+ <span>15:30 - 19:00</span>
513
+ </div>
514
+ <div class="flex justify-between border-b border-white border-opacity-30 pb-2">
515
+ <span class="font-medium">Mi茅rcoles</span>
516
+ <span>15:30 - 19:00</span>
517
+ </div>
518
+ <div class="flex justify-between border-b border-white border-opacity-30 pb-2">
519
+ <span class="font-medium">Jueves</span>
520
+ <span>14:00 - 19:00</span>
521
+ </div>
522
+ <div class="flex justify-between border-b border-white border-opacity-30 pb-2">
523
+ <span class="font-medium">Viernes</span>
524
+ <span>15:30 - 19:00</span>
525
+ </div>
526
+ <div class="flex justify-between pb-2">
527
+ <span class="font-medium">S谩bado y Domingo</span>
528
+ <span>Cerrado</span>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="md:w-1/2 md:pl-12">
535
+ <h3 class="text-2xl font-bold mb-6">驴Necesitas un horario especial?</h3>
536
+ <p class="text-lg mb-6">Entendemos que cada persona tiene compromisos diferentes. Cont谩ctanos y haremos lo posible por acomodar tu agenda.</p>
537
+
538
+ <div class="bg-white text-dark p-6 rounded-xl">
539
+ <h4 class="text-xl font-bold mb-4">Promoci贸n de cumplea帽os</h4>
540
+ <p class="mb-4">Celebra tu d铆a especial con un 20% de descuento en cualquier tratamiento facial durante todo tu mes de cumplea帽os.</p>
541
+ <div class="flex items-center text-secondary">
542
+ <i class="fas fa-gift text-2xl mr-3"></i>
543
+ <span class="font-medium">Presenta tu DNI para validar el descuento</span>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </section>
550
+
551
+ <!-- Contact Section -->
552
+ <section id="contacto" class="py-16 bg-white">
553
+ <div class="container mx-auto px-4">
554
+ <div class="text-center mb-12">
555
+ <h2 class="text-3xl font-bold text-dark mb-4">Cont谩ctanos</span></h2>
556
+ <p class="text-lg max-w-2xl mx-auto">Estamos aqu铆 para responder todas tus preguntas y ayudarte a reservar tu cita</p>
557
+ </div>
558
+
559
+ <div class="flex flex-col md:flex-row gap-8">
560
+ <div class="md:w-1/2">
561
+ <div class="bg-primary bg-opacity-10 p-8 rounded-xl h-full">
562
+ <h3 class="text-2xl font-bold text-dark mb-6">Informaci贸n de <span class="text-accent">Contacto</span></h3>
563
+
564
+ <div class="space-y-6">
565
+ <div class="flex items-start">
566
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4 mt-1">
567
+ <i class="fas fa-map-marker-alt text-white"></i>
568
+ </div>
569
+ <div>
570
+ <h4 class="font-bold text-dark mb-1">Ubicaci贸n</h4>
571
+ <p class="text-gray-700">Lomas de Zamora, Provincia de Buenos Aires, Argentina</p>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="flex items-start">
576
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4 mt-1">
577
+ <i class="fas fa-phone-alt text-white"></i>
578
+ </div>
579
+ <div>
580
+ <h4 class="font-bold text-dark mb-1">Tel茅fono</h4>
581
+ <p class="text-gray-700">+54 9 11 2256-3805</p>
582
+ <a href="https://wa.me/5491122563805" class="text-primary hover:text-accent transition mt-2 inline-flex items-center">
583
+ <i class="fab fa-whatsapp mr-2"></i> Env铆anos un mensaje por WhatsApp
584
+ </a>
585
+ </div>
586
+ </div>
587
+
588
+ <div class="flex items-start">
589
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4 mt-1">
590
+ <i class="fas fa-envelope text-white"></i>
591
+ </div>
592
+ <div>
593
+ <h4 class="font-bold text-dark mb-1">Email</h4>
594
+ <p class="text-gray-700">[email protected]</p>
595
+ <p class="text-sm text-gray-500 mt-2">(Respuesta en 24-48 horas)</p>
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ <div class="mt-8">
601
+ <h4 class="font-bold text-dark mb-4">S铆guenos en redes sociales</h4>
602
+ <div class="flex space-x-4">
603
+ <a href="#" class="w-10 h-10 rounded-full bg-primary hover:bg-accent flex items-center justify-center text-white transition">
604
+ <i class="fab fa-instagram"></i>
605
+ </a>
606
+ <a href="#" class="w-10 h-10 rounded-full bg-primary hover:bg-accent flex items-center justify-center text-white transition">
607
+ <i class="fab fa-facebook-f"></i>
608
+ </a>
609
+ <a href="#" class="w-10 h-10 rounded-full bg-primary hover:bg-accent flex items-center justify-center text-white transition">
610
+ <i class="fab fa-tiktok"></i>
611
+ </a>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+
617
+ <div class="md:w-1/2">
618
+ <div class="bg-white shadow-lg rounded-xl p-8 h-full">
619
+ <h3 class="text-2xl font-bold text-dark mb-6">Formulario de <span class="text-accent">Contacto</span></h3>
620
+
621
+ <form id="contact-form" class="space-y-4">
622
+ <div>
623
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nombre completo</label>
624
+ <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
625
+ </div>
626
+
627
+ <div>
628
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
629
+ <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
630
+ </div>
631
+
632
+ <div>
633
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Tel茅fono</label>
634
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
635
+ </div>
636
+
637
+ <div>
638
+ <label for="service" class="block text-gray-700 font-medium mb-2">Servicio de inter茅s</label>
639
+ <select id="service" name="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
640
+ <option value="">Selecciona un servicio</option>
641
+ <option value="Consulta diagn贸stico">Consulta diagn贸stico de piel GRATUITA</option>
642
+ <option value="Exosomas">Tratamientos con EXOSOMAS</option>
643
+ <option value="Higiene facial">Higiene facial profunda</option>
644
+ <option value="Dermaplaning">DERMAPLANING</option>
645
+ <option value="Maquillaje">Maquillaje profesional</option>
646
+ <option value="Cursos">Cursos de maquillaje</option>
647
+ <option value="Otro">Otro</option>
648
+ </select>
649
+ </div>
650
+
651
+ <div>
652
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensaje</label>
653
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
654
+ </div>
655
+
656
+ <div class="pt-2">
657
+ <button type="submit" class="w-full bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-full transition">
658
+ Enviar mensaje
659
+ </button>
660
+ </div>
661
+ </form>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </section>
667
+
668
+ <!-- Map Section -->
669
+ <div class="h-96 w-full bg-gray-200">
670
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3279.991430712867!2d-58.40384192417368!3d-34.7359183729175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcd2a6896483d9%3A0x9b5f1abf6a640c1a!2sLomas%20de%20Zamora%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1689875436785!5m2!1ses!2sar"
671
+ width="100%"
672
+ height="100%"
673
+ style="border:0;"
674
+ allowfullscreen=""
675
+ loading="lazy"
676
+ referrerpolicy="no-referrer-when-downgrade"></iframe>
677
+ </div>
678
+
679
+ <!-- WhatsApp Float Button -->
680
+ <div class="fixed bottom-6 right-6 z-50">
681
+ <a href="https://wa.me/5491122563805" class="bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition transform hover:scale-110">
682
+ <i class="fab fa-whatsapp text-2xl"></i>
683
+ </a>
684
+ </div>
685
+
686
+ <!-- Footer -->
687
+ <footer class="bg-dark text-white py-8">
688
+ <div class="container mx-auto px-4">
689
+ <div class="flex flex-col md:flex-row justify-between items-center">
690
+ <div class="mb-6 md:mb-0">
691
+ <div class="flex items-center">
692
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
693
+ <i class="fas fa-spa text-white"></i>
694
+ </div>
695
+ <h2 class="text-xl font-bold">DQ<span class="text-accent">Esthetics</span></h2>
696
+ </div>
697
+ <p class="mt-2 text-gray-300">Cuidando tu piel, elevando tu autoestima</p>
698
+ </div>
699
+
700
+ <div class="flex flex-col items-center md:items-end">
701
+ <div class="flex space-x-4 mb-4">
702
+ <a href="#" class="text-gray-300 hover:text-white transition">
703
+ <i class="fab fa-instagram"></i>
704
+ </a>
705
+ <a href="#" class="text-gray-300 hover:text-white transition">
706
+ <i class="fab fa-facebook-f"></i>
707
+ </a>
708
+ <a href="#" class="text-gray-300 hover:text-white transition">
709
+ <i class="fab fa-tiktok"></i>
710
+ </a>
711
+ </div>
712
+ <p class="text-sm text-gray-400">漏 2023 DQEsthetics. Todos los derechos reservados.</p>
713
+ <p class="text-xs text-gray-500 mt-2">Esta es una demo desarrollada por KazeCode. Visita <a href="https://kazecode.com.ar" class="text-primary hover:underline">kazecode.com.ar</a> para conocer m谩s sobre nuestros servicios de desarrollo web.</p>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ </footer>
718
+
719
+ <script>
720
+ // Mobile menu toggle
721
+ document.getElementById('menu-toggle').addEventListener('click', function() {
722
+ const menu = document.getElementById('mobile-menu');
723
+ menu.classList.toggle('hidden');
724
+ });
725
+
726
+
727
+ // Form submission
728
+ const contactForm = document.getElementById('contact-form');
729
+ if (contactForm) {
730
+ contactForm.addEventListener('submit', function(e) {
731
+ e.preventDefault();
732
+
733
+ // Here you would typically send the form data to a server
734
+ // For this demo, we'll just show an alert
735
+ alert('隆Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.');
736
+ contactForm.reset();
737
+ });
738
+ }
739
+
740
+ // Smooth scrolling for anchor links
741
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
742
+ anchor.addEventListener('click', function(e) {
743
+ e.preventDefault();
744
+
745
+ const targetId = this.getAttribute('href');
746
+ const targetElement = document.querySelector(targetId);
747
+
748
+ if (targetElement) {
749
+ window.scrollTo({
750
+ top: targetElement.offsetTop - 80,
751
+ behavior: 'smooth'
752
+ });
753
+
754
+ // Close mobile menu if open
755
+ const mobileMenu = document.getElementById('mobile-menu');
756
+ if (!mobileMenu.classList.contains('hidden')) {
757
+ mobileMenu.classList.add('hidden');
758
+ }
759
+ }
760
+ });
761
+ });
762
+ });
763
+ </script>
764
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=Walterkz/dqesthetics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
765
+ </html>