-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1137 lines (1010 loc) · 45.4 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
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
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="José Senent" />
<meta
name="description"
content="Floristería con más de 10 años de experiencia. La entrega de cualquier arreglo se garantiza en 24h máximo."
/>
<meta name="theme-color" content="#1ea992" />
<link rel="shortcut icon" type="image/svg" href="images/system/logo.svg" />
<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=Lato:wght@300;400;700;900&family=Oranienbaum&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.min.css" />
<script
src="https://kit.fontawesome.com/71deb8a10f.js"
crossorigin="anonymous"
></script>
<title>La Floroteca | Envío de flores a dcomicilio en 24h</title>
</head>
<body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Atribución de la autoría de la página web -->
<meta name="author" content="José Senent" />
<!-- Descripción de la página web -->
<meta
name="description"
content="Floristería con más de 10 años de experiencia. La entrega de cualquier arreglo se realiza en un plazo de 24h garantizado."
/>
<!-- Cambia el color del menú superior cuando se visualiza la web en móvil -->
<meta name="theme-color" content="#1ea992" />
<!-- Favicon de la página web -->
<link
rel="shortcut icon"
type="image/svg"
href="images/sistema/favicon.svg"
/>
<!-- Fuentes importadas de Google Fonts, en este caso «Lato» y «Oranienbaum» -->
<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=Lato:wght@300;400;700;900&family=Oranienbaum&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<!-- Enlace de Fontawesome desde el que se han importado todos los iconos de la página web -->
<script
src="https://kit.fontawesome.com/71deb8a10f.js"
crossorigin="anonymous"
></script>
<title>La Floroteca | Envío de flores a domicilio en 24h</title>
</head>
<body>
<!-- Menú de navegación emergente en la versión móvil -->
<div class="mb-navigation" id="nav-menu">
<!-- Menú nav de la versión móvil -->
<nav class="mb-navigation__nav">
<ul class="mb-navigation__nav__list">
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">Diseña tu ramo</a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">Ocasiones</a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">Ramos de flores</a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">Centros de mesa</a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link"
>Cestas de flores</a
>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">Complementos</a>
</li>
<!-- Línea divisoria -->
<div class="line-break"></div>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">
Preguntas frecuentes
</a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link"> Contáctanos </a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link">
Sobre nosotros
</a>
</li>
<li class="mb-navigation__nav__item">
<a href="#" class="mb-navigation__nav__link"> Blog </a>
</li>
</ul>
</nav>
<!-- Iconos de las redes sociales -->
<div class="social__container u-margin-top-xl">
<a href="#" class="social__link">
<i class="fa-brands fa-instagram social__icon"></i>
</a>
<a href="#" class="social__link">
<i class="fa-brands fa-facebook social__icon"></i>
</a>
<a href="#" class="social__link">
<i class="fa-brands fa-twitter social__icon"></i>
</a>
<a href="#" class="social__link">
<i class="fa-brands fa-pinterest social__icon"></i>
</a>
</div>
</div>
<!-- Menú del carrito de la compra -->
<div class="cart-menu" id="cart-menu">
<!-- Parte superior del menú donde se indica el número de compras y se encuentra el botón de cierre -->
<div class="cart-menu__top-bar">
<!-- Aquí se muestra el número de productos adquiridos -->
<span class="cart-menu__top-bar__content">
Tu carrito (<span
class="js-purchase-count cart-menu__top-bar__purchase-count"
>0</span
>)
</span>
<!-- Botón de cierre de menú -->
<button class="js-close-cart-btn close-btn">
<i class="fa-solid fa-xmark close-btn__icon"></i>
</button>
</div>
<!-- Cuerpo del menú del carrito de la compra. Abajo se muestra el código por defecto. Éste cambia si se ha adquirido un producto -->
<div class="cart-menu__body" id="render-cart-menu">
<div class="cart-menu__body__img-container">
<img
src="images/cart-menu/jarron-trazado.png"
alt="jarrón de girasoles"
class="cart-menu__body__img"
loading="lazy"
/>
</div>
<span class="cart-menu__body__text u-bold u-margin-top-s">
¡Tu carrito está vacío!
</span>
<span class="cart-menu__body__text">
Llénalo con flores de verdad.
</span>
<!-- Este botón también sirve para cerrar el menú -->
<button class="js-close-cart-btn btn u-margin-top-l">
Seguir comprando
</button>
</div>
</div>
<!-- Inicio del header -->
<header class="header">
<!-- Menú hamburguesa que despliega el menú de navegación para móviles -->
<div class="bg-menu" id="bg-menu">
<!-- El icono del menú es creado mediante CSS -->
<span class="bg-menu__icon u-disable-select" id="bg-menu-icon">
</span>
</div>
<!-- Logo de la página web -->
<a href="#" class="header__logo-container">
<img
src="images/system/logo.svg"
alt="logo"
class="header__logo u-disable-select"
/>
</a>
<!-- Menú móvil del header con los iconos de usuario, carrito y búsqueda -->
<div class="header__mb-personal">
<a href="#" class="header__mb-personal__icon-container">
<i class="fa-solid fa-user header__mb-personal__icon"></i>
</a>
<!-- El botón del carrito despliega el menú -->
<button class="js-cart-btn header__mb-personal__icon-container">
<i
class="fa-solid fa-cart-shopping header__mb-personal__icon"
></i>
<span class="js-purchase-count header__mb-personal__info">0</span>
</button>
<a href="#" class="header__mb-personal__icon-container">
<i
class="fa-solid fa-magnifying-glass header__mb-personal__icon"
></i>
</a>
</div>
<!-- Menú desktop del header -->
<div class="header__menu">
<!-- Parte superior del header con los menús de contactio y personal -->
<div class="header__top-menu">
<!-- Menú de contacto con el teléfono, móvil y un enlace a la página de contacto -->
<div class="header__contact__container">
<a href="#" class="header__contact__item">
<i class="fa-solid fa-phone header__contact__icon"></i>
<span class="header__contact__info">963 210 8852</span>
</a>
<a href="#" class="header__contact__item">
<i class="fa-brands fa-whatsapp header__contact__icon"></i>
<span class="header__contact__info">601 321 0885</span>
</a>
<a href="#" class="header__contact__item">
<span class="header__contact__info">Contáctanos</span>
</a>
</div>
<!-- Menú personal desktop con los iconos de usuario, carrito y búsqueda -->
<div class="header__dk-personal__container">
<a href="#" class="header__dk-personal__icon-box">
<i class="fa-solid fa-user header__dk-personal__icon"></i>
</a>
<button class="js-cart-btn header__dk-personal__icon-box">
<i
class="fa-solid fa-cart-shopping header__dk-personal__icon"
>
</i>
<span class="js-purchase-count header__dk-personal__info"
>0</span
>
</button>
<a href="#" class="header__dk-personal__icon-box">
<i
class="fa-solid fa-magnifying-glass header__dk-personal__icon"
>
</i>
</a>
</div>
</div>
<!-- Menú navegación desktop situado en la parte inferior del header -->
<nav class="dk-navigation">
<ul class="dk-navigation__list">
<li class="dk-navigation__item">
<a href="#" class="dk-navigation__link">Diseña tu ramo</a>
</li>
<li class="dk-navigation__item">
<a href="#" class="dk-navigation__link">Ocasiones</a>
</li>
<li class="dk-navigation__item">
<a href="#" class="dk-navigation__link">Ramos de flores</a>
</li>
<li class="dk-navigation__item">
<a href="#" class="dk-navigation__link">Centros de mesa</a>
</li>
<li class="dk-navigation__item">
<a href="#" class="dk-navigation__link">Cestas de flores</a>
</li>
<li class="dk-navigation__item">
<a href="#" class="dk-navigation__link">Complementos</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Main, la parte principal de una página web -->
<main class="main" id="main">
<!-- Sección «hero» aquí se muestra la cabecera de la página -->
<section class="hero">
<div class="hero__text-content">
<h1 class="heading-1">¡Disfruta este verano!</h1>
<h3 class="heading-3--sans u-color-white u-margin-top-xs">
Nuevas flores y grandes descuentos por <br />
<span class="u-extra-bold">tiempo limitado</span>
</h3>
<button class="cta-btn u-margin-top-xl">
<a href="#" class="cta-btn__link">Celebrar el verano »</a>
</button>
</div>
</section>
<!-- Sección de «Ramos destacados» mediante JavaScript se despliegan las cartas de cada ramo de flores -->
<section class="featured-bouquets u-margin-top-xl">
<h2 class="heading-2">Flores destacadas</h2>
<h3 class="heading-3--sans">Entrega garantizada en 24 horas</h3>
<!-- Aquí se renderizarán los distintos ramos de flores -->
<div class="u-margin-top-m" id="render-bouquets"></div>
<button class="cta-btn u-margin-top-xl">
<a href="#" class="cta-btn__link">Ver todos los ramos »</a>
</button>
</section>
<!-- Sección «Sobre nosotros», aquí se comenta un poco sobre la tienda -->
<section class="about-us u-margin-top-xl">
<h2 class="heading-2">¿Quiénes somos?</h2>
<div class="about-us__container u-margin-top-m">
<div class="about-us__image-container">
<img
src="images/about-us/Floristeria.jpg"
alt="La floristería"
class="about-us__image"
loading="lazy"
/>
</div>
<div class="about-us__text-container">
<h3 class="heading-3">
Nada de floripondios, nuestros arreglos son de calidad
</h3>
<p class="paragraph u-margin-top-xs">
Todos los arreglos florales que se muestran en la página web
son auténticos. Han sido Realizados con mucho esmero por
nuestros expertos floristas que han utilizado flores y plantas
de alta calidad, además de poner mucha atención al detalle en
la elaboración de la composición.
</p>
<h3 class="heading-3 u-margin-top-s">
Los clientes son nuestro vergel
</h3>
<p class="paragraph u-margin-top-xs">
De nada sirve un ramo de flores si éste llega en mal estado o
tarde, por ello disponemos de un gran servicio de transporte
que puede llegar en 24h a cualquier parte del país y en las
mejores condiciones.
</p>
</div>
</div>
<button class="text-btn u-margin-top-xs">
<a href="#" class="text-btn__link">Saber más »</a>
</button>
</section>
<!-- Sección de «Ocasiones» aquí se muestran las distintas ocasiones para las que se han creado arreglos de flores -->
<section class="events u-margin-top-xl">
<h2 class="heading-2">
Flores para <br />
cualquier ocasión
</h2>
<div class="events__container u-margin-top-s">
<a href="#" class="events__box">
<i class="fa-solid fa-ring events__icon"></i>
<span class="events__content">Bodas</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
<a href="#" class="events__box">
<i class="fa-solid fa-baby events__icon"></i>
<span class="events__content">Nacimientos</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
<a href="#" class="events__box">
<i class="fa-solid fa-cake-candles events__icon"></i>
<span class="events__content">Cumpleaños</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
<a href="#" class="events__box">
<i class="fa-solid fa-heart-crack events__icon"></i>
<span class="events__content">Pedir perdón</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
<a href="#" class="events__box">
<i class="fa-regular fa-face-kiss-wink-heart events__icon"></i>
<span class="events__content">Amor</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
<a href="#" class="events__box">
<i class="fa-solid fa-cross events__icon"></i>
<span class="events__content">Funerales</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
<a href="#" class="events__box">
<i class="fa-solid fa-user-injured events__icon"></i>
<span class="events__content">Mejórate</span>
<i class="fa-solid fa-angles-right events__arrow"></i>
</a>
</div>
<button class="cta-btn u-margin-top-l">
<a href="#" class="cta-btn__link">Ver todas las ocasiones »</a>
</button>
</section>
<!-- Sección de «Características», aquí se muestran 4 cualidades de la tienda -->
<section class="features u-margin-top-xl">
<h2 class="heading-2">
¿Por qué elegir <br />
la Floroteca?
</h2>
<div class="features__container u-margin-top-s">
<div class="features__card">
<i class="fa-regular fa-clock features__icon"></i>
<h3 class="heading-3--sans u-margin-top-s">Experiencia</h3>
<p class="paragraph u-margin-top-s">
Llevamos más de 10 años en el arte de los arreglos florales
artesanales. Ponemos máxima atención para garantizar una mayor
satisfacción.
</p>
</div>
<div class="features__card">
<i class="fa-solid fa-truck features__icon"></i>
<h3 class="heading-3--sans u-margin-top-s">Entrega en 24h</h3>
<p class="paragraph u-margin-top-s">
Nos comprometemos a entregar los pedidos en un plazo máximo de
24h, siempre poniendo énfasis en que la entrega llegue en el
mejor estado posible.
</p>
</div>
<div class="features__card">
<i class="fa-regular fa-calendar-days features__icon"></i>
<h3 class="heading-3--sans u-margin-top-s">Elige una fecha</h3>
<p class="paragraph u-margin-top-s">
Puedes realizar tu pedido con la antelación que desees.
¡Avísanos lo antes posible e iremos prefeccionando tu regalo
hasta que se ajuste a tu gusto!
</p>
</div>
<div class="features__card">
<i class="fa-solid fa-certificate features__icon"></i>
<h3 class="heading-3--sans u-margin-top-s">Alta calidad</h3>
<p class="paragraph u-margin-top-s">
Nuestros productos son de alta calidad. Nuestros floricultores
le dedican máxima atención en todo el proceso, desde el
cultivo hasta el envío.
</p>
</div>
</div>
</section>
<!-- Sección de «Centros de mesa destacados», aquí se muestran los mejores centros de mesa disponibles en tienda -->
<section class="featured-centerpieces u-margin-top-xl">
<h2 class="heading-2">
Nuestros mejores <br />
centros de mesa
</h2>
<!-- Los centros de mesa se renderizan aquí mediante cógido JS -->
<div class="u-margin-top-m" id="render-centerpieces"></div>
<button class="cta-btn u-margin-top-l">
<a href="#" class="cta-btn__link"
>Ver todos los centros de mesa »</a
>
</button>
</section>
<!-- Sección «Cestas de flores destacadas» -->
<section class="featured-flowerbaskets u-margin-top-xl">
<h2 class="heading-2">
Regala fantásticas <br />
cestas de flores
</h2>
<!-- Mediante código JavaScript, las distintas cestas de flores se renderizarán aquí -->
<div class="u-margin-top-m" id="render-flowerbaskests"></div>
<button class="cta-btn u-margin-top-l">
<a href="#" class="cta-btn__link">
Ver todas las cestas de flores »
</a>
</button>
</section>
<!-- Sección «Novedades», aquí se muestran las últimas noticias del blog -->
<section class="blog-news u-margin-top-xl">
<h2 class="heading-2 u-margin-top-m">
¿Qué novedades hay <br />
en nuestro blog?
</h2>
<div class="blog-news__container u-margin-top-m">
<a href="#" class="blog-news__card">
<div class="blog-news__image-container">
<img
src="images/blog-news/noticia-1.jpg"
alt="Ideas de arreglos florales para bodas"
class="blog-news__image"
loading="lazy"
/>
</div>
<div class="blog-news__text-container">
<h3 class="heading-3">
¿Planeas una boda? 12 ideas florales con las que trinfurarás
en tu evento soñado
</h3>
<p class="paragraph u-margin-top-s">
Una boda supone una celebración en la que no se puede
descuidar la decoración. ¿Necesitas ideas para darle un
toque único a esta ocasión? ¡Aquí te proponemos 12 ideas
fáciles de hacer y baratas que seguro te encandilarán!
</p>
</div>
</a>
<a href="#" class="blog-news__card">
<div class="blog-news__image-container">
<img
src="images/blog-news/noticia-2.jpg"
alt="Ideas de regalos para el día de la madre"
class="blog-news__image"
loading="lazy"
/>
</div>
<div class="blog-news__text-container">
<h3 class="heading-3">
7 posibles regalos para dar este Día de la madre que seguro
le encantarán.
</h3>
<p class="paragraph u-margin-top-s">
Se acerca el Día de la madre y es la ocasión perfecta para
recordarle lo mucho que la quieres con un bonito detalle.
Con estas ideas, de regalos caseros demuestra que le has
dedicado tiempo y has pensado en ella.
</p>
</div>
</a>
<a href="#" class="blog-news__card">
<div class="blog-news__image-container">
<img
src="images/blog-news/noticia-3.jpg"
alt="Curiosidades acerca del lirio de araña rojo"
class="blog-news__image"
loading="lazy"
/>
</div>
<div class="blog-news__text-container">
<h3 class="heading-3">
El lirio de araña rojo, bajo su llamativa apariencia, trae
consigo un aciago recuerdo.
</h3>
<p class="paragraph u-margin-top-s">
¿Por qué esta flor no se recomienda regalarla como ramo de
flores? Esta insólita planta de un color rojo vivaz suele
brotar durante las fechas cercanas al equinocio otoñal. En
Japón guarda un significado muy profundo.
</p>
</div>
</a>
</div>
<button class="btn u-margin-top-l">
<a href="#" class="btn__link">Ver todas las noticias »</a>
</button>
</section>
<!-- Sección «Complementos», aquí se muestran otra clase de artículos que se pueden adquirir junto con los arreglos florales -->
<section class="complements u-margin-top-xl">
<h2 class="heading-2">
Añádele un capricho <br />
a tus pedidos
</h2>
<div class="card-container u-margin-top-m">
<a href="#" class="card card--3-col">
<div class="card__image-container">
<img
src="images/complements/plushies/osito-de-peluche.jpg"
alt=""
class="card__image"
loading="lazy"
/>
</div>
<div class="card__body">
<h3 class="heading-3 u-margin-top-xs">Peluches</h3>
</div>
</a>
<a href="#" class="card card--3-col">
<div class="card__image-container">
<img
src="images/complements/fruitbaskets/bocado-carnoso.jpg"
alt=""
class="card__image"
loading="lazy"
/>
</div>
<div class="card__body">
<h3 class="heading-3 u-margin-top-xs">Cestas de frutas</h3>
</div>
</a>
<a href="#" class="card card--3-col">
<div class="card__image-container">
<img
src="images/complements/chocolates/Chococorazones.jpg"
alt=""
class="card__image"
loading="lazy"
/>
</div>
<div class="card__body">
<h3 class="heading-3 u-margin-top-xs">Bombones</h3>
</div>
</a>
<a href="#" class="card card--3-col">
<div class="card__image-container">
<img
src="images/complements/sweets/brocheta-dulzona.jpg"
alt=""
class="card__image"
loading="lazy"
/>
</div>
<div class="card__body">
<h3 class="heading-3 u-margin-top-xs">Dulces</h3>
</div>
</a>
<a href="#" class="card card--3-col">
<div class="card__image-container">
<img
src="images/complements/vases/jarron-oriental.jpg"
alt=""
class="card__image"
loading="lazy"
/>
</div>
<div class="card__body">
<h3 class="heading-3 u-margin-top-xs">Jarrones</h3>
</div>
</a>
<a href="#" class="card card--3-col">
<div class="card__image-container">
<img
src="images/complements/wines/rasteau.jpg"
alt=""
class="card__image"
loading="lazy"
/>
</div>
<div class="card__body">
<h3 class="heading-3 u-margin-top-xs">Vinos y licores</h3>
</div>
</a>
</div>
</section>
<!-- Sección de «reseñas», aquí se muestran opiniones vertidas por distintos usuarios en internet -->
<section class="reviews u-margin-top-xl">
<h2 class="heading-2">
Lo que opinan <br />
nuestros clientes
</h2>
<!-- Contenedor de todas las reseñas -->
<div class="reviews__container u-margin-top-s">
<!-- Carta de reseña individual -->
<article class="reviews__card">
<!-- Cabecera de la reseña, contiene la imagen de usuario, el nombre, la puntuación y en enlace donde realizó su crítica -->
<div class="reviews__card-header">
<div class="reviews__card-header__user">
<!-- Imagen del usuario -->
<div class="reviews__card-header__img-container">
<img
src="images/reviews/critico-1.jpg"
alt="crítico 1"
class="reviews__card-header__img"
loading="lazy"
/>
</div>
<!-- Nombre de usuario -->
<h4 class="heading-4 u-bold">Lontano</h4>
</div>
<!-- Contenedor del enlace y de la puntuación -->
<div
class="reviews__card-header__link-rate-container u-margin-top-xs"
>
<!-- Contenedor de las cinco estrellas que conforman la puntuación -->
<div class="reviews__card-header__rate-container">
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
</div>
<!-- Enlace donde se realizó la crítica -->
<a href="#" class="reviews__card-header__link"
>@tripadvisor</a
>
</div>
</div>
<div class="reviews__card-body">
<h5 class="heading-5">05/07/2023</h5>
<h3 class="heading-3--sans">¡Superó mis expectativas!</h3>
<p class="paragraph u-margin-top-xs">
No conocía la floristería y me sorprendió para bien. Le
llevé la cesta de flores a un familiar enfermo y le encantó.
Seguiré confiando en esta empresa para futuros pedidos.
</p>
</div>
</article>
<article class="reviews__card">
<div class="reviews__card-header">
<div class="reviews__card-header__user">
<div class="reviews__card-header__img-container">
<img
src="images/reviews/critico-2.jpg"
alt="crítico 2"
class="reviews__card-header__img"
loading="lazy"
/>
</div>
<h4 class="heading-4 u-bold">Pick_A_Peck</h4>
</div>
<div
class="reviews__card-header__link-rate-container u-margin-top-xs"
>
<div class="reviews__card-header__rate-container">
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--empty"></div>
</div>
<a href="#" class="reviews__card-header__link">@ekomi</a>
</div>
</div>
<div class="reviews__card-body">
<h5 class="heading-5">30/06/2023</h5>
<h3 class="heading-3--sans">Esperaba más</h3>
<p class="paragraph u-margin-top-xs">
Pedí un ramo de flores acompañado de unos caramelos como
complemento. Pues sólo me dieron una brocheta dulce. Creo
que eso deberían aclararlo. Por todo lo demás no tengo
queja.
</p>
</div>
</article>
<article class="reviews__card">
<div class="reviews__card-header">
<div class="reviews__card-header__user">
<div class="reviews__card-header__img-container">
<img
src="images/reviews/critico-3.jpg"
alt="crítico 3"
class="reviews__card-header__img"
loading="lazy"
/>
</div>
<h4 class="heading-4 u-bold">P1t1m1n1</h4>
</div>
<div
class="reviews__card-header__link-rate-container u-margin-top-xs"
>
<div class="reviews__card-header__rate-container">
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
<div class="reviews__card-header__star--fill"></div>
</div>
<a href="#" class="reviews__card-header__link">@google</a>
</div>
</div>
<div class="reviews__card-body">
<h5 class="heading-5">27/06/2023</h5>
<h3 class="heading-3--sans">Mi floristería de confianza</h3>
<p class="paragraph u-margin-top-xs">
Siempre que necesito un ramo o una cesta recurro a este
sitio. Las flores siempre están bien frescas y muy bonitas,
tal y como se ve en las fotos de la página web. Todos muy
profesionales.
</p>
</div>
</article>
</div>
</section>
<!-- Sección «Ramo Personalizado», aquí se avisa de que el usuario puede crear un ramo de flores a su medida -->
<section class="custom-bouquet">
<h2 class="heading-2 u-margin-top-l">
¡Diseña tu propio <br />
ramo de flores!
</h2>
<div class="custom-bouquet__container u-margin-top-m">
<div class="custom-bouquet__image-container">
<img
src="images/custom-bouquet/personaliza-tu-ramo.jpg"
alt="personaliza tu ramo"
class="custom-bouquet__image"
loading="lazy"
/>
</div>
<div class="custom-bouquet__text-container">
<h3 class="heading-3">
Crea un ramo a tu gusto, que se ajuste a tu estilo
</h3>
<p class="paragraph u-margin-top-xs">
Aquí en la floroteca puedes crear un ramo de flores a tu
gusto. Si tienes en mente alguna composición, ¡saca a relucir
tu creatividad y haz un arreglo propio!
</p>
<p class="paragraph u-margin-top-xs">
Escoge entre los jarrones o cestas disponibles, añade las
flores que más te gusten y adereza la composición con las
plantas que prefieras.
</p>
<p class="paragraph u-margin-top-xs">
No hay mejor regalo que un ramo de flores hecho por tí mismo
para que la otra persona se sienta especial.
</p>
</div>
</div>
<button class="cta-btn u-margin-top-l">
<a href="#" class="cta-btn__link"> Crear ramo personalizado » </a>
</button>
</section>
<!-- Sección «Galería», aquí se muestran varias imágenes de distintos arreglos florales -->
<section class="gallery u-margin-top-xl">
<h2 class="heading-2">
La Floroteca <br />
en imágenes
</h2>
<h3 class="heading-3--sans u-margin-top-s">
Síguenos en <a href="#" class="gallery__text-link">Instagram</a> y
<br />
etiquétanos con #YoDisfrutoConLaFloroteca
</h3>
<div class="gallery__container u-margin-top-s">
<div class="gallery__image-box gallery__image-box--1">
<img
src="images/gallery/image-1.jpg"
alt="anillo de compromiso"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--2">
<img
src="images/gallery/image-2.jpg"
alt="cesta de rosas"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--3">
<img
src="images/gallery/image-3.jpg"
alt="cesta de rosas"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--4">
<img
src="images/gallery/image-4.jpg"
alt="flores coloridas"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--5">
<img
src="images/gallery/image-5.jpg"
alt="campo vasto de flores"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--6">
<img
src="images/gallery/image-6.jpg"
alt="centro de mesa"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--7">
<img
src="images/gallery/image-7.jpg"
alt="jarrón de rosas"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--8">
<img
src="images/gallery/image-8.jpg"
alt="ramo de rosas nítidas"
class="gallery__image"
loading="lazy"
/>
</div>
<div class="gallery__image-box gallery__image-box--9">
<img
src="images/gallery/image-9.jpg"
alt="jarrón de tulipanes rojos"
class="gallery__image"
loading="lazy"
/>
</div>
</div>
<button class="btn u-margin-top-l">
<a href="#" class="btn__link">
<i class="fa-brands fa-instagram btn__icon"></i>
Síguenos en Instagram »
</a>
</button>
</section>
<!-- Sección «Newsletter», aquí se encuentra un formulario para suscribirse a una newlstetter -->
<section class="newsletter u-margin-top-xl">
<h2 class="heading-2 u-color-white">
¡Apúntate a <br />
nuestra newsletter!
</h2>
<div class="newsletter__container u-margin-top-m">
<div class="newsletter__image">
<h3 class="heading-3 newsletter__image__heading">
Entérate de todas las novedades, además de recibir descuentos
y ventajas exclusivas.
</h3>
</div>
<div class="newsletter__card">
<h3 class="heading-3 newsletter__card__heading">
Entérate de todas las novedades, además de recibir descuentos
y ventajas exclusivas.
</h3>