-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
786 lines (755 loc) · 37.8 KB
/
index.html
File metadata and controls
786 lines (755 loc) · 37.8 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
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
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- favicon -->
<link rel="icon" type="image/jpg" href="./assets/logo/favicon.png" />
<!-- Conexión por cdn a bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<!-- Carousel de eventos-->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" />
<!-- Nuestros estilos css -->
<link rel="stylesheet" href="variables.css" />
<link rel="stylesheet" href="style.css" />
<title>CatSpace</title>
</head>
<body>
<header class="bg-gradiente">
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<a class="navbar-brand" href="/CatSpace/index.html">
<img src="./assets/logo/CatSpace_logo.svg" alt="CatSpace" width="auto" height="auto" />
</a>
<button
class="d-none navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<!-- lista para añadir avatar y campana-->
<!-- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
</ul>-->
<!--- end lista para añadir avatar y campana-->
</div>
</div>
</nav>
<!--- end navbar -->
<!-- Cabecera home -->
<section class="header-home pt-4">
<div class="container position-relative">
<!-- elementos animados -->
<div class="position-absolute animacion-contenedor">
<!-- Estrella grande -->
<picture class="big-star">
<source media="(min-width: 767px)" srcset="./assets/formas/Star-big-right-d.svg" />
<img src="./assets/formas/Star-big-right.svg" alt="big-star" />
</picture>
<!--- puntos -->
<picture class="puntos">
<!--<source media="(min-width: 767px)" srcset="./assets/formas/puntos-d.svg" />
<img src="./assets/formas/puntos.svg" alt="puntos" /> -->
<svg
class="d-none d-md-block"
width="175"
height="64"
viewBox="0 0 175 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="5.1443" cy="4.90822" r="4.52931" fill="#C4DFE3" />
<circle cx="5.1443" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="93.9187" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="93.9187" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="5.1443" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="5.1443" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="93.9187" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="93.9187" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="17.8263" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="17.8263" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="106.601" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="106.601" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="17.8263" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="17.8263" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="106.601" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="106.601" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="30.5084" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="30.5084" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="119.283" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="119.283" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="30.5084" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="30.5084" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="119.283" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="119.283" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="43.1904" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="43.1904" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="131.965" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="131.965" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="43.1904" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="43.1904" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="131.965" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="131.965" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="55.8726" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="55.8726" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="144.647" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="144.647" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="55.8726" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="55.8726" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="144.647" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="144.647" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="68.5546" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="68.5546" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="157.329" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="157.329" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="68.5546" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="68.5546" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="157.329" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="157.329" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="81.2366" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="81.2366" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="170.011" cy="4.90846" r="4.52931" fill="#C4DFE3" />
<circle cx="170.011" cy="23.0256" r="4.52931" fill="#C4DFE3" />
<circle cx="81.2366" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="81.2366" cy="59.2603" r="4.52931" fill="#C4DFE3" />
<circle cx="170.011" cy="41.1428" r="4.52931" fill="#C4DFE3" />
<circle cx="170.011" cy="59.2603" r="4.52931" fill="#C4DFE3" />
</svg>
<svg
class="d-md-none"
width="78"
height="29"
viewBox="0 0 78 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="2.03125" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="2.03125" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="41.8438" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="41.8438" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="2.03125" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="2.03125" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="41.8438" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="41.8438" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="7.71875" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="7.71875" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="47.5312" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="47.5312" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="7.71875" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="7.71875" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="47.5312" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="47.5312" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="13.4062" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="13.4062" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="53.2188" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="53.2188" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="13.4062" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="13.4062" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="53.2188" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="53.2188" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="19.0938" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="19.0938" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="58.9062" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="58.9062" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="19.0938" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="19.0938" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="58.9062" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="58.9062" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="24.7812" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="24.7812" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="64.5938" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="64.5938" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="24.7812" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="24.7812" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="64.5938" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="64.5938" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="30.4688" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="30.4688" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="70.2812" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="70.2812" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="30.4688" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="30.4688" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="70.2812" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="70.2812" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="36.1562" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="36.1562" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="75.9688" cy="2.03125" r="2.03125" fill="#C4DFE3" />
<circle cx="75.9688" cy="10.1562" r="2.03125" fill="#C4DFE3" />
<circle cx="36.1562" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="36.1562" cy="26.4062" r="2.03125" fill="#C4DFE3" />
<circle cx="75.9688" cy="18.2812" r="2.03125" fill="#C4DFE3" />
<circle cx="75.9688" cy="26.4062" r="2.03125" fill="#C4DFE3" />
</svg>
</picture>
<!--- estrella mediana -->
<picture class="md-star">
<source media="(min-width: 767px)" srcset="./assets/formas/Star-md-left-d.svg" />
<img src="./assets/formas/Star-md-left.svg" alt="md-star" />
</picture>
<!--- lineas -->
<picture class="linea">
<!--<source media="(min-width: 767px)" srcset="./assets/formas/lineas-d.svg" />
<img src="./assets/formas/lineas.svg" alt="linea"> -->
<svg
width="42"
height="21"
class="d-md-none"
viewBox="0 0 42 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path class="izq" d="M1 19L9 11L17 19L25 11L33 19L41 11" stroke="#FFD700" stroke-width="2" />
<path class="drc" d="M1 10L9 2L17 10L25 2L33 10L41 2" stroke="#FFD700" stroke-width="2" />
</svg>
<svg
width="93"
height="45"
class="d-none d-md-block"
viewBox="0 0 93 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="izq"
d="M2.22974 41.4224L20.0682 23.5839L37.9068 41.4224L55.7453 23.5839L73.5838 41.4224L91.4223 23.5839"
stroke="#FFD700"
stroke-width="4"
/>
<path
class="drc"
d="M2.22974 21.354L20.0682 3.5155L37.9068 21.354L55.7453 3.5155L73.5838 21.354L91.4223 3.5155"
stroke="#FFD700"
stroke-width="4"
/>
</svg>
</picture>
<!--- lineas -->
<picture class="sm-star">
<source media="(min-width: 767px)" srcset="./assets/formas/Star-sm-right-d.svg" />
<img src="./assets/formas/Star-sm-right.svg" alt="sm-star" />
</picture>
</div>
<!-- End elementos animados -->
<div class="row">
<div class="col-12 align-self-md-end">
<h1 class="display-3 text-white display-cat">De gatos para gatos</h1>
</div>
<div class="col-6 col-md-12 grid1 align-self-md-start">
<p class="lead text-white">Un espacio de gatos para gatos</p>
<div class="d-grid gap-2 d-md-block mb-3">
<a class="btn btn-primary me-md-3" href="./login.html">Iniciar sesión</a>
<a class="btn btn-outline-primary" href="./account.html">Crear una cuenta</a>
</div>
</div>
<div class="col-6 col-md-12 grid2 d-flex align-items-center justify-content-center">
<picture class="align-self-end cat">
<source media="(min-width: 767px)" srcset="./assets/imagenes/gatos/Gato_home_header.png" />
<img src="./assets/imagenes/gatos/Gato_home_header_phone.png" alt="Gato giñando ojo" />
</picture>
</div>
</div>
</div>
</section>
<!--- end cabecera home -->
</header>
<main>
<!-- cualidades del producto -->
<section class="py-5">
<div class="container">
<div class="row g-5">
<div class="col-12 mb-5"><h2 class="text-center">h2 Cualidades del producto</h2></div>
<div class="col-6 col-lg-3 text-center">
<div class="circulos bg-lila-light">
<svg width="54" height="55" viewBox="0 0 54 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M38.8125 34.3751C37.5493 34.3816 36.3038 34.6768 35.1676 35.239C34.0315 35.8013 33.0338 36.6161 32.2481 37.6235L19.9125 29.7689C20.3621 28.291 20.3621 26.7092 19.9125 25.2314L32.2481 17.3767C33.5001 18.9557 35.2605 20.0324 37.2173 20.4161C39.1742 20.7998 41.2012 20.4657 42.9393 19.4729C44.6774 18.4801 46.0144 16.8928 46.7135 14.9922C47.4126 13.0915 47.4287 11.0001 46.7588 9.08857C46.089 7.17701 44.7765 5.56862 43.0538 4.54831C41.3311 3.52801 39.3095 3.16166 37.347 3.51415C35.3845 3.86664 33.6078 4.91523 32.3317 6.47416C31.0556 8.03308 30.3624 10.0017 30.375 12.0314C30.3829 12.7999 30.4965 13.5636 30.7125 14.3001L18.3768 22.1548C17.2878 20.7585 15.7993 19.7418 14.1175 19.2456C12.4358 18.7495 10.6442 18.7985 8.99099 19.3859C7.33784 19.9733 5.90502 21.0699 4.89117 22.5238C3.87732 23.9777 3.33264 25.7168 3.33264 27.5001C3.33264 29.2834 3.87732 31.0225 4.89117 32.4764C5.90502 33.9303 7.33784 35.0269 8.99099 35.6143C10.6442 36.2017 12.4358 36.2507 14.1175 35.7546C15.7993 35.2585 17.2878 34.2418 18.3768 32.8454L30.7125 40.7001C30.4965 41.4366 30.3829 42.2003 30.375 42.9689C30.375 44.6685 30.8698 46.3301 31.7969 47.7433C32.7241 49.1565 34.0418 50.258 35.5836 50.9084C37.1253 51.5589 38.8218 51.7291 40.4585 51.3975C42.0953 51.0659 43.5987 50.2474 44.7787 49.0456C45.9587 47.8437 46.7623 46.3124 47.0878 44.6454C47.4134 42.9784 47.2463 41.2505 46.6077 39.6802C45.9691 38.1099 44.8876 36.7677 43.5001 35.8234C42.1126 34.8791 40.4813 34.3751 38.8125 34.3751ZM38.8125 6.87511C39.8137 6.87511 40.7925 7.17752 41.625 7.74409C42.4576 8.31067 43.1064 9.11596 43.4896 10.0581C43.8728 11.0003 43.973 12.0371 43.7777 13.0373C43.5824 14.0375 43.1002 14.9563 42.3922 15.6774C41.6842 16.3985 40.7821 16.8896 39.8001 17.0885C38.8181 17.2875 37.8002 17.1854 36.8751 16.7951C35.9501 16.4048 35.1594 15.744 34.6032 14.896C34.0469 14.0481 33.75 13.0512 33.75 12.0314C33.75 10.6638 34.2833 9.35232 35.2327 8.38534C36.1821 7.41835 37.4698 6.87511 38.8125 6.87511ZM11.8125 32.6564C10.8112 32.6564 9.83242 32.3539 8.9999 31.7874C8.16738 31.2208 7.5185 30.4155 7.13533 29.4733C6.75217 28.5311 6.65191 27.4944 6.84725 26.4942C7.04259 25.494 7.52474 24.5752 8.23275 23.8541C8.94075 23.133 9.8428 22.6419 10.8248 22.4429C11.8069 22.244 12.8248 22.3461 13.7498 22.7364C14.6749 23.1266 15.4655 23.7875 16.0218 24.6354C16.5781 25.4834 16.875 26.4803 16.875 27.5001C16.875 28.8676 16.3416 30.1791 15.3922 31.1461C14.4428 32.1131 13.1551 32.6564 11.8125 32.6564ZM38.8125 48.1251C37.8112 48.1251 36.8324 47.8227 35.9999 47.2561C35.1674 46.6895 34.5185 45.8843 34.1353 44.9421C33.7522 43.9999 33.6519 42.9631 33.8472 41.9629C34.0426 40.9627 34.5247 40.044 35.2327 39.3228C35.9407 38.6017 36.8428 38.1106 37.8248 37.9117C38.8069 37.7127 39.8248 37.8148 40.7498 38.2051C41.6749 38.5954 42.4655 39.2563 43.0218 40.1042C43.5781 40.9521 43.875 41.949 43.875 42.9689C43.875 44.3364 43.3416 45.6479 42.3922 46.6149C41.4428 47.5819 40.1551 48.1251 38.8125 48.1251Z"
fill="#855EC3"
/>
</svg>
</div>
<p>Conecta con otros gatos</p>
</div>
<!-- /.col-lg-1 -->
<div class="col-6 col-lg-3 text-center">
<div class="circulos bg-magenta-light">
<svg width="62" height="61" viewBox="0 0 62 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M54.9139 27.8617C56.1384 29.4375 56.1384 31.5649 54.9139 33.1382C51.0569 38.0919 41.8034 48.2916 30.9999 48.2916C20.1964 48.2916 10.9429 38.0919 7.08603 33.1382C6.49027 32.3836 6.16687 31.4554 6.16687 30.4999C6.16687 29.5445 6.49027 28.6162 7.08603 27.8617C10.9429 22.908 20.1964 12.7083 30.9999 12.7083C41.8034 12.7083 51.0569 22.908 54.9139 27.8617V27.8617Z"
stroke="#D75CB1"
stroke-width="3.33333"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M31.738 37.7618C31.6257 37.6584 35.4284 34.5106 35.4284 30.4999C35.4284 26.4893 31.738 23.238 31.738 23.238C31.738 23.238 28.0475 26.4893 28.0475 30.4999C28.0475 34.5106 31.738 37.7618 31.738 37.7618Z"
stroke="#D75CB1"
stroke-width="3.33333"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<p>Enterate de todo</p>
</div>
<!-- /.col-lg-2 -->
<div class="col-6 col-lg-3 text-center">
<div class="circulos bg-naranja-light">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25 10.1562C22.86 10.1562 20.996 11.3913 19.812 13.0772C18.628 14.7631 18 16.9406 18 19.2969C18 21.6531 18.628 23.8327 19.812 25.5186C20.996 27.2045 22.86 28.4375 25 28.4375C27.14 28.4375 29.004 27.2025 30.188 25.5166C31.372 23.8306 32 21.6531 32 19.2969C32 16.9406 31.372 14.7611 30.188 13.0752C29.004 11.3892 27.14 10.1562 25 10.1562ZM32 19.2969C32 21.6531 32.628 23.8327 33.812 25.5186C34.996 27.2045 36.862 28.4375 39 28.4375C41.14 28.4375 43.004 27.2025 44.188 25.5166C45.372 23.8306 46 21.6531 46 19.2969C46 16.9406 45.372 14.7611 44.188 13.0752C43.004 11.3892 41.14 10.1562 39 10.1562C36.86 10.1562 34.996 11.3913 33.812 13.0772C32.628 14.7631 32 16.9406 32 19.2969ZM25 14.2188C25.624 14.2188 26.312 14.5356 26.94 15.4253C27.56 16.313 28 17.7267 28 19.2969C28 20.867 27.56 22.2828 26.94 23.1684C26.312 24.0581 25.624 24.375 25 24.375C24.376 24.375 23.688 24.0581 23.06 23.1684C22.44 22.2808 22 20.867 22 19.2969C22 17.7267 22.44 16.3109 23.06 15.4253C23.688 14.5356 24.376 14.2188 25 14.2188ZM39 14.2188C39.624 14.2188 40.312 14.5356 40.94 15.4253C41.56 16.313 42 17.7267 42 19.2969C42 20.867 41.56 22.2828 40.94 23.1684C40.312 24.0581 39.624 24.375 39 24.375C38.376 24.375 37.688 24.0581 37.06 23.1684C36.44 22.2808 36 20.867 36 19.2969C36 17.7267 36.44 16.3109 37.06 15.4253C37.688 14.5356 38.376 14.2188 39 14.2188ZM15 24.375C12.86 24.375 10.996 25.61 9.812 27.2959C8.628 28.9819 8 31.1594 8 33.5156C8 35.8719 8.628 38.0514 9.812 39.7373C10.996 41.4233 12.86 42.6562 15 42.6562C17.14 42.6562 19.004 41.4213 20.188 39.7353C21.372 38.0494 22 35.8719 22 33.5156C22 31.1594 21.372 28.9798 20.188 27.2939C19.004 25.608 17.14 24.375 15 24.375ZM49 24.375C46.86 24.375 44.996 25.61 43.812 27.2959C42.628 28.9819 42 31.1594 42 33.5156C42 35.8719 42.628 38.0514 43.812 39.7373C44.996 41.4233 46.86 42.6562 49 42.6562C51.14 42.6562 53.004 41.4213 54.188 39.7353C55.372 38.0494 56 35.8719 56 33.5156C56 31.1594 55.372 28.9798 54.188 27.2939C53.004 25.608 51.14 24.375 49 24.375ZM15 28.4375C15.624 28.4375 16.312 28.7544 16.94 29.6441C17.56 30.5317 18 31.9455 18 33.5156C18 35.0858 17.56 36.5016 16.94 37.3872C16.312 38.2769 15.624 38.5938 15 38.5938C14.376 38.5938 13.688 38.2769 13.06 37.3872C12.44 36.5016 12 35.0858 12 33.5156C12 31.9455 12.44 30.5297 13.06 29.6441C13.688 28.7544 14.376 28.4375 15 28.4375ZM49 28.4375C49.624 28.4375 50.312 28.7544 50.94 29.6441C51.56 30.5317 52 31.9455 52 33.5156C52 35.0858 51.56 36.5016 50.94 37.3872C50.312 38.2769 49.624 38.5938 49 38.5938C48.376 38.5938 47.688 38.2769 47.06 37.3872C46.44 36.4995 46 35.0858 46 33.5156C46 31.9455 46.44 30.5297 47.06 29.6441C47.688 28.7544 48.376 28.4375 49 28.4375ZM32 32.5C29.334 32.5 27.474 34.257 26.56 35.8008C25.652 37.3445 25.092 38.6283 24.56 39.1645C24.254 39.4834 22.324 40.2208 20.312 41.2628C19.306 41.7848 18.292 42.4816 17.438 43.548C16.578 44.6144 15.998 46.087 15.998 47.7384C15.998 51.6384 19.158 54.8478 22.998 54.8478C24.73 54.8478 26.538 54.2791 28.308 53.7713C30.086 53.2513 32 52.8125 32 52.8125C32 52.8125 33.914 53.2512 35.688 53.7672C37.46 54.275 39.268 54.8438 41 54.8438C44.84 54.8438 48 51.6344 48 47.7344C48 46.1216 47.414 44.6469 46.56 43.6109C45.71 42.5689 44.686 41.925 43.688 41.3867C41.688 40.3102 39.722 39.457 39.438 39.1645C38.958 38.6831 38.418 37.3567 37.498 35.8048C36.58 34.2469 34.68 32.5 32 32.5ZM32 36.5625C33.32 36.5625 33.466 36.8875 34.06 37.895C34.66 38.9005 35.108 40.6087 36.56 42.0855C38.21 43.7511 40.294 44.1167 41.812 44.9373C42.572 45.3477 43.152 45.7844 43.5 46.2069C43.846 46.6273 44 47.0112 44 47.7303C44 49.4366 42.68 50.7772 41 50.7772C40.42 50.7772 38.552 50.3303 36.812 49.8225C35.072 49.3208 33.632 48.7459 32 48.7459C30.368 48.7459 28.928 49.3208 27.188 49.8225C25.448 50.3303 23.58 50.7772 23 50.7772C21.32 50.7772 20 49.4366 20 47.7303C20 46.9117 20.168 46.4912 20.5 46.0769C20.832 45.6645 21.444 45.2562 22.188 44.8723C23.676 44.1005 25.748 43.7958 27.438 42.0794C28.904 40.5823 29.344 38.8192 29.938 37.8239C30.522 36.8286 30.662 36.5544 31.998 36.5544L32 36.5625Z"
fill="#FF9770"
/>
</svg>
</div>
<p>Crea tu comunidad</p>
</div>
<!-- /.col-lg-3 -->
<div class="col-6 col-lg-3 text-center">
<div class="circulos bg-amarillo-light">
<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.9375 8.375C20.9375 10.7137 19.0887 12.5625 16.75 12.5625H14.6562C10.05 12.5625 6.28125 16.3312 6.28125 20.9375C6.28125 25.5438 10.05 29.3125 14.6562 29.3125H17.0766C16.8599 30.3453 16.7505 31.3978 16.75 32.4531V58.625H20.9375V32.4531C20.9375 26.107 26.107 20.9375 32.4531 20.9375C34.3417 20.9375 36.1172 21.3709 37.6875 22.1812V17.6671C36.0079 17.0645 34.2375 16.7543 32.4531 16.75C26.4503 16.75 21.2243 20.1607 18.582 25.125H14.6562C12.3175 25.125 10.4688 23.2762 10.4688 20.9375C10.4688 18.5988 12.3175 16.75 14.6562 16.75H16.75C21.3562 16.75 25.125 12.9813 25.125 8.375H20.9375ZM39.7812 12.7593V26.1719C39.7812 31.5109 44.6304 35.5938 50.25 35.5938C55.8696 35.5938 60.7188 31.5109 60.7188 26.1719V12.7593L57.4462 15.0478L53.979 17.4703C52.7855 17.0452 51.6068 16.5532 50.25 16.5532C48.8932 16.5532 47.7166 17.0452 46.521 17.4703L43.0517 15.0499L39.7812 12.7593ZM50.25 20.7407C51.4602 20.7407 52.5741 21.0338 53.5225 21.5258L54.6322 22.1142L55.6791 21.396L56.5312 20.8077V26.1719C56.5312 28.9272 53.8806 31.4062 50.25 31.4062C46.6194 31.4062 43.9688 28.9272 43.9688 26.1719V20.8056L44.8188 21.396L45.8657 22.1163L46.9796 21.5258C47.9911 21.0061 49.1127 20.7369 50.25 20.7407ZM35.5938 31.4062C29.8192 31.4062 25.125 36.1004 25.125 41.875V58.625H29.3125V41.875C29.3125 38.4161 32.1349 35.5938 35.5938 35.5938C39.0526 35.5938 41.875 38.4161 41.875 41.875V58.625H46.0625V41.875C46.0625 39.8545 45.4909 37.9806 44.4922 36.3789C42.5133 35.4438 40.8193 33.9984 39.5844 32.1914C38.3184 31.6711 36.9625 31.4043 35.5938 31.4062ZM54.4375 37.0343C53.0845 37.4701 51.6714 37.6906 50.25 37.6875V58.625H54.4375V37.0343Z"
fill="#FFD700"
/>
</svg>
</div>
<p>Diviértete</p>
</div>
<!-- /.col-lg-4 -->
</div>
</div>
</section>
<!-- carousel de eventos -->
<section class="py-5 eventos-gatos-home">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center text-gradient mb-5">Descubre categorías de tendencia</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-pills d-flex justify-content-center" id="featuresTab" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
href="#featuresOne"
id="featuresOne-tab"
data-bs-toggle="tab"
data-bs-target="#featuresOne"
role="tab"
aria-controls="featuresOne"
aria-selected="true"
>
Música
</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
href="#featuresTwo"
id="featuresTwo-tab"
data-bs-toggle="tab"
data-bs-target="#featuresTwo"
role="tab"
aria-controls="featuresTwo"
aria-selected="false"
>
Salud
</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
href="#featuresThree"
id="featuresThree-tab"
data-bs-toggle="tab"
data-bs-target="#featuresThree"
role="tab"
aria-controls="featuresThree"
aria-selected="false"
>
Arte
</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
href="#featuresFour"
id="featuresFour-tab"
data-bs-toggle="tab"
data-bs-target="#featuresFour"
role="tab"
aria-controls="featuresFour"
aria-selected="false"
>
Deportes
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- tab-content -->
<div class="tab-content">
<div class="tab-pane fade active show" id="featuresOne" role="tabpanel" aria-labelledby="featuresOne-tab">
<!-- carousel de gatos musica -->
<div
class="main-carousel"
data-flickity='{ "freeScroll": true,
"wrapAround": true}'
>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">Meuwtallica</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
30 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Apollo</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwTalica.png" class="img-cat img-fluid" alt="gato1" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">Lady CatGa</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
15 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Razzmatazz</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/LadyCatGa.png" class="img-cat img-fluid" alt="gato2" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">MeuwDonna</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
30 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Palau Sant Jordi</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwDonna.png" class="img-cat img-fluid" alt="gato3" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">Lady CatGa</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
15 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Razzmatazz</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwTalica.png" class="img-cat img-fluid" alt="gato4" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">MeuwDonna</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
30 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Apolo</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwDonna.png" class="img-cat img-fluid" alt="gato5" />
</div>
</div>
</div>
<!-- end de carousel de gatos musica -->
</div>
<div class="tab-pane fade" id="featuresTwo" role="tabpanel" aria-labelledby="featuresTwo-tab">
<!-- carousel de gatos yoga -->
<div
class="main-carousel"
data-flickity='{ "freeScroll": true,
"wrapAround": true}'
>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">Meuwtallica</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
30 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Apollo</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwTalica.png" class="img-cat img-fluid" alt="gato1" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">Lady CatGa</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
15 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Razzmatazz</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/LadyCatGa.png" class="img-cat img-fluid" alt="gato2" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">MeuwDonna</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
30 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Palau Sant Jordi</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwDonna.png" class="img-cat img-fluid" alt="gato3" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">Lady CatGa</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
15 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Razzmatazz</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwTalica.png" class="img-cat img-fluid" alt="gato4" />
</div>
</div>
<div class="carousel-cell eventos-home">
<div>
<div class="contenido-evento">
<h3 class="display-4">MeuwDonna</h3>
<div class="data-event">
<p class="time-data mb-1">
<i class="bi bi-calendar3-week me-2"></i>
30 Octubre 2022
</p>
<p class="map-data">
<i class="bi bi-geo-alt me-2"></i>
<span>Apolo</span>
<span>Barcelona</span>
</p>
</div>
</div>
<img src="./assets/imagenes/gatos/MeuwDonna.png" class="img-cat img-fluid" alt="gato5" />
</div>
</div>
</div>
<!-- end de carousel de gatos yoga -->
</div>
</div>
</section>
<!-- End de carousel de eventos -->
<section class="testimonials py-5">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h2>What CatSpace user are saying</h2>
</div>
<div class="col">
<div class="slider position-relative">
<div class="buttons">
<div class="previous"></div>
<div class="next"></div>
</div>
<!-- testimonio 1 -->
<div class="slide">
<div class="testimonial">
<blockquote>
“ I’ve been interested in coding for a while but never taken the jump, until now. I couldn’t
recommend this course enough. I’m now in the job of my dreams and so excited about the future. ”
</blockquote>
<p class="author">
Tanya Sinclair
<span>UX Engineer</span>
</p>
</div>
<div class="slider-img">
<img src="./assets/imagenes/gatos/testimonial_1.png" alt="Author Image" />
</div>
</div>
<!-- testimonio 2-->
<div class="slide">
<div class="testimonial">
<blockquote>
“ If you want to lay the best foundation possible I’d recommend taking this course. The depth the
instructors go into is incredible. I now feel so confident about starting up as a professional
developer. ”
</blockquote>
<p class="author">
John Tarkpor
<span>Junior Front-end Developer</span>
</p>
</div>
<div class="slider-img">
<img src="./assets/imagenes/gatos/testimonial_2.png" alt="Author Image" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="position-relative">
<div class="formas-footer">
<img class="star-yellow" src="./assets/formas/StarYellow-footer.svg" alt="yellow star">
<img class="star-white" src="./assets/formas/StarWhite_footer.svg" alt="white star">
<img class="star-orange" src="./assets/formas/StarOranje_footer.svg" alt="orange star">
</div>
<div class="container py-5">
<div class="row text-white">
<div class="col-6 col-md mb-3 mb-md-0">
<img src="./assets/logo/CatSpace_logo.svg" alt="CatSpace" />
<p class="display-6">Un espacio de gatos para gatos</p>
<div class="iconos-footer">
<a class="circulos-social" href="#">
<img src="./assets/iconos/fa_facebook.svg" alt="facebook">
</a>
<a class="circulos-social" href="#">
<img src="./assets/iconos/Twitter.svg" alt="twitter">
</a>
<a class="circulos-social" href="#">
<img src="./assets/iconos/instagram.svg" alt="Instagram">
</a>
</div>
</div>
<div class="col-6 col-md mb-3 mb-md-0">
<h5>Why CatSpace</h5>
<ul>
<li>About</li>
<li>Best practices</li>
<li>Partners</li>
<li>Our investors</li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Legal</h5>
<ul>
<li>Terms and conditions</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Company</h5>
<ul>
<li>About us</li>
<li>Jobs</li>
<li>Press</li>
</ul>
</div>
</div>
</div>
<div class="bg-lila">
<div class="container">
<div class="row">
<div class="col-12">
<small class="text-white text-center d-block py-3">Copyright © 2022 SpaceCat All rights reserved</small>
</div>
</div>
</div>
</div>
</footer>
<!-- Scripts de bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"
integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
crossorigin="anonymous"
></script>
<!-- carousel -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="./testimonial.js"></script>
</body>
</html>