-
Notifications
You must be signed in to change notification settings - Fork 35
/
Copy pathindex.html
3011 lines (2848 loc) · 243 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="en">
<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" />
<meta name="description"
content="Explore the greatness of Lionel Messi – the football legend. Get the latest news, stats, and updates.">
<meta name="keywords" content="Messi, Lionel Messi, football, soccer, fanpage">
<meta name="author" content="Soumyajit Mondal">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://main--ephemeral-crisp-f58c49.netlify.app/">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Messi Mania">
<meta property="og:description"
content="Explore the greatness of Lionel Messi – the football legend. Get the latest news, stats, and updates.">
<meta property="og:image" content="URL to an image">
<meta property="og:url" content="https://main--ephemeral-crisp-f58c49.netlify.app/">
<title>MESSI MANIA | HOME</title>
<link rel="stylesheet" href="aos/aos.css" />
<script src="aos/aos.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="Image/favicon/apple-touch-icon.webp">
<link rel="icon" type="image/png" sizes="32x32" href="Image/favicon/favicon.webp">
<link rel="icon" type="image/png" sizes="16x16" href="Image/favicon/favicon.webp">
<link rel="manifest" href="Image/favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./timeline.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<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=El+Messiri:wght@600&family=Righteous&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- linking css file to html file -->
<style>
h3 {
color: blueviolet;
}
.timeline {
overflow-x: scroll;
overflow-y: hidden !important;
}
.facts {
color: blueviolet;
}
#Bolivia {
fill: rgb(10, 0, 154);
transition: ease 0.3s;
}
#Ecuador {
fill: rgb(3, 55, 177);
transition: ease 0.3s;
z-index: 3;
}
#Brazil,
#Estonia,
#Uruguay,
#Chile,
#Paraguay {
/* fill:url("Image/country/Brazil-Flag-Map.svg"); */
fill: rgb(0, 67, 223);
transition: ease 0.3s;
}
#Venezuela {
fill: rgb(56, 116, 255);
transition: ease 0.3s;
}
#Haiti,
#Nigeria,
#Panama,
#Guatemala,
#Switzerland,
#Mexico,
#Colombia {
fill: rgb(100, 145, 249);
transition: ease 0.3s;
}
#Nicaragua,
#Spain,
#Algeria,
#Croatia {
fill: rgb(140, 173, 249);
transition: ease 0.3s;
}
#Bosnia-and-Herzegovina,
#Serbia,
#Montenegro,
#Germany,
#France,
#Portugal,
#Albania,
#Slovenia,
#Iran,
#United-States {
fill: rgb(177, 199, 251);
transition: ease 0.3s;
}
#Bolivia:hover {
fill: orange;
/* scale: 1.02; */
}
#Ecuador:hover {
fill: orange;
top: -40%;
right: -40%;
z-index: 10;
}
#Estonia:hover {
fill: orange;
/* scale: 1.02; */
}
#Brazil:hover {
fill: orange;
/* scale: 1.02; */
}
#Uruguay:hover {
fill: orange;
/* scale: 1.02; */
}
#Chile:hover {
fill: orange;
/* scale: 1.02; */
}
#Paraguay:hover {
fill: orange;
/* scale: 1.02; */
}
#Venezuela:hover {
fill: orange;
/* scale: 1.02; */
}
#Haiti:hover {
fill: orange;
/* scale: 1.02; */
}
#Nigeria:hover {
fill: orange;
/* scale: 1.02; */
}
#Panama:hover {
fill: orange;
/* scale: 1.02; */
}
#Guatemala:hover {
fill: orange;
/* scale: 1.02; */
}
#Switzerland:hover {
fill: orange;
/* scale: 1.02; */
}
#Mexico:hover {
fill: orange;
/* scale: 1.02; */
}
#Colombia:hover {
fill: orange;
/* scale: 1.02; */
}
#Nicaragua:hover {
fill: orange;
/* scale: 1.02; */
}
#Spain:hover {
fill: orange;
/* scale: 1.02; */
}
#France:hover {
fill: orange;
/* scale: 1.02; */
}
#Portugal:hover {
fill: orange;
/* scale: 1.02; */
}
#United-States:hover {
fill: orange;
/* scale: 1.02; */
}
#Iran:hover {
fill: orange;
/* scale: 1.02; */
}
#Serbia:hover {
fill: orange;
/* scale: 1.02; */
}
#Montenegro:hover {
fill: orange;
/* scale: 1.02; */
}
#Bosnia-and-Herzegovina:hover {
fill: orange;
/* scale: 1.02; */
}
#Albania:hover {
fill: orange;
/* scale: 1.02; */
}
#Slovenia:hover {
fill: orange;
/* scale: 1.02; */
}
#Algeria:hover {
fill: orange;
/* scale: 1.02; */
}
#Germany:hover {
fill: orange;
/* scale: 1.02; */
}
#Croatia:hover {
fill: orange;
/* scale: 1.02; */
}
.tags {
position: fixed;
/* border:4px solid white; */
width: max(100px, 10vw);
height: max(120px, 12vw);
z-index: 20;
left: 10%;
bottom: 40%;
overflow: hidden;
border-radius: 8px;
}
.row-2 {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(195, 216, 232);
box-shadow: inset 5px 0 5px rgba(44, 41, 41, 0.53);
display: none;
transition: ease 0.2s;
padding: 1vh;
margin: auto;
}
.flag {
width: max(90px, 9vw);
height: max(60px, 6vw);
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 20px;
border-radius: 4px;
/* border: 2px solid red; */
}
.name {
text-align: center;
width: max(90px, 9vw);
font-size: max(11px, 1.1vw);
font-weight: bold;
color: black;
/* border:2px solid blue; */
}
#allSvg path {
cursor: pointer;
}
#allSvg {
width: 70vw;
height: 50vw;
}
.box2 {
position: relative;
width: 90vw;
height: 50vw;
border-radius: 20px;
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
overflow-y: hidden;
/* border: 2px dotted red; */
margin: auto;
/* background-color: rgb(19, 19, 19); */
background-image: url("Image/leo-raise2.webp");
background-size: cover;
background-repeat: no-repeat;
/* margin-top:10%; */
}
.container {
width: 90vw;
height: 50vw;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* border:2px solid red;
background-color: yellow; */
}
@media(max-width:599px) {
.timeline {
overflow: hidden;
}
}
/* Media query for computers (desktops) (min-width: 1200px) */
@media only screen and (min-width: 1200px) {
/* Styles for computers (desktops) */
}
/* Media query for tablets (min-width: 768px) and (max-width: 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
/* Styles for tablets */
.box2 {
width: 90vw;
height: 500px;
overflow: auto;
}
.container {
/* width:110vw; */
scale: 1.4;
}
}
/* Media query for mobile devices (max-width: 767px) */
@media only screen and (max-width: 767px) {
/* Styles for mobile devices */
#allSvg {
width: 90vw;
height: auto;
}
.box2 {
width: 90vw;
height: 50vw;
overflow: auto;
}
.container2 {
width: 90vw;
height: 50vw;
scale: 1.2;
}
}
</style>
</head>
<body>
<header>
<figure>
<div class="carousel dissolve">
<div class="items">
<img loading="eager" class="item" src="./Image/Leo.webp" alt="Messi">
<img loading="eager" class="item" src="./Image/WhatsApp-Image-2023-08-20-at-07.11.23-1024x683.webp"
alt="Messi">
<img loading="eager" class="item" src="./Image/messi_barca.webp" alt="Messi">
<img loading="eager" class="item" src="./Image/julienscussel_23-10-30_0304-scaled.webp" alt="Messi">
</div>
</div>
<div class="info">
<div>
</div>
<div class="name-reveal">
<div class="leo">
<p>LIONEL</p>
</div>
<div class="messi"><img src="./Image/messi-lletres.webp" alt="Messi"></div>
</div>
</div>
</header>
<nav id="navbar" class="navbar">
<nav class="nav-2">
<!-- <div class="div-bg"></div> -->
<div class="logo">
<img src="./Image/cropped-messi-logo-01.webp" alt="Messi">
<a href="#" class="a-name">Messi Mania</a>
</div>
<div class="div-navbar">
<a href="#HOME" class="a-home"><i class="fa fa-home"></i> Home</a>
<a href="#STATS" class="a-stats"><i class="fa fa-trophy" aria-hidden="true"></i> Stats</a>
<a href="#VIDEOS" class="a-photos"><i class="fa fa-photo"></i> Videos</a>
<a href="#PHOTOS" class="a-photos"><i class="fa fa-photo"></i> Photos</a>
<a href="#MORE" class="a-more"><i class="fa fa-info-circle"></i> More</a>
<!-- <a href="#" class="a-login" style="text-shadow: 10px -8px 10px rgb(8, 4, 99);"><i class="fa fa-user-plus"></i> Sign Up/Login</a> -->
</div>
<div class="bar"><i class="fa-solid fa-bars"></i></div>
<div class="switch-container">
<div class="box">
<i class="fas fa-sun " id="sun"></i>
<i class="fas fa-moon" id="moon"></i>
<span class="ball"></span>
</div>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!--# Navbar #-->
</nav>
<!-- <button class='top-scroll' onclick="topFunction()" id="Top-scroll-Btn">
<img id="top_scroll" src="Image/favicon/top-scroll-icon.svg"></img>
</button> -->
<button class='top-scroll' onclick="topFunction()" id="Top-scroll-Btn">
<img id="top-scroll-img" src="Image/scroll.webp" alt="Messi"></img>
</button>
<main>
<section class="stats-area">
<div class="stats-messi">
<img alt="Messi" loading="eager" src="./Image/pngwing.com.webp" id="stats-messi-image">
<img alt="Messi" loading="eager" src="./Image/messi-small-width.webp" id="stats-messi-image2">
</div>
<div class="stats-main-content">
<div class="stats-table">
<h2 class="secondary_heading" id="STATS">STATS</h2>
<div class="card">
<div class="card-heading">Appearances</div>
<div class="card-text">989</div>
</div>
<div class="card">
<div class="card-heading">Goals</div>
<div class="card-text">781</div>
</div>
<div class="card">
<div class="card-heading">Assists</div>
<div class="card-text">339</div>
</div>
<div class="card">
<div class="card-heading">Trophies</div>
<div class="card-text">44</div>
</div>
<div class="card">
<div class="card-heading">BALLON D'OR</div>
<div class="card-text">8x</div>
</div>
</div>
<div class="extra-info">
<a target="_blank" href="https://www.messivsronaldo.app/">
<img alt="Messi" src="Image/messi_v_cr7.webp" alt="Messi" width="25%">
<p class="info-label">Messi V Ronaldo lifetime stats</p>
</a>
<a target="_blank" href="https://www.ligue1.com/player?id=lionel-andres-messi-cuccittini">
<img alt="Messi" src="Image/Ligue_1_Uber_Eats_logo.svg.webp" alt="Messi" width="25%">
<p class="info-label">Ligue-1 Stats</p>
</a>
<a target="_blank" href="https://www.uefa.com/uefachampionsleague/clubs/players/95803--lionel-messi/">
<img alt="Messi" src="Image/45de7a047b514046a3cbb1bfb00ffe2b.jpeg" alt="Messi" width="25%">
<p class="info-label">UCL stats 2022-23</p>
</a>
</div>
</div>
</section>
<section class="video-area" data-aos="fade-up" data-aos-duration="2000">
<h2 class="secondary_heading" id="VIDEOS">VIDEOS</h2>
<!-- Flickity HTML init -->
<div class="carousel"
data-flickity='{ "wrapAround": true, "autoPlay": true, "setGallerySize": false, "direction": "rtr"}'>
<div class="carousel-cell"><video src="Video/videoplayback.mp4"
poster="Image/0_GettyImages-1313922671jpgong.webp" class="clip" type="video/mp4" loop controls></video>
</div>
<div class="carousel-cell"><video
src="Video/Lionel-Messi-Best-Skill-Whatsapp-Video-Status-Song-Download-Online-2022-1.mp4"
poster="Image/220807075403-messi-bicycle-kick-0807-restricted-large-169.webp" class="clip" type="video/mp4"
loop controls></video></div>
<div class="carousel-cell"> <video
src="Video/Lionel-Messi-Cristiano-Ronaldo-Best-Whatsapp-Video-Status-2022-1.mp4" poster="Image/4000.webp"
class="clip" type="video/mp4" loop controls></video></div>
<div class="carousel-cell"><video src="Video/Lionel-Messi-Love-Whatsapp-Status-Video-Song-Download-2022.mp4"
poster="Image/6WHENYGXDJIB7KC72MMN3ZIQWU.webp" class="clip" type="video/mp4" loop controls></video></div>
<div class="carousel-cell"><video
src="Video/Lionel-Messi-New-4K-Whatsapp-Status-Video-Online-Download-2022-1.mp4"
poster="Image/TELEMMGLPICT000267249163_1_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwauLYewjGO21NF-o1gxbkUI.webp"
class="clip" type="video/mp4" loop controls></video></div>
<div class="carousel-cell"> <video src="Video/Messi-🔥❤-4k-HD-Fullscreen-WhatsApp-status.mp4"
poster="Image/messi-une.webp" class="clip" type="video/mp4" loop controls></video></div>
<div class="carousel-cell"> <video src="Video/Lionel Messi GOAT.mp4" poster="Image/goat-messi.webp" class="clip"
type="video/mp4" loop controls></video></div>
<div class="carousel-cell"> <video src="Video/Messi•G.O.A.T•Skills.mp4" poster="Image/messi-goat.webp"
class="clip" type="video/mp4" loop controls></video></div>
<div class="carousel-cell"> <video src="Video/talking-to-the-moon-x-playdate-lionel-messi.mp4"
poster="Image/messi-goat.webp" class="clip" type="video/mp4" loop controls></video></div>
</div>
</section>
<section class="image-area">
<!-- <div class="image-back-div"> -->
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<style>
.path-0 {
animation: pathAnim-0 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
0% {
d: path("M 0,700 L 0,105 C 64.16584042421998,95.73755086940436 128.33168084843996,86.47510173880872 178,114 C 227.66831915156004,141.52489826119128 262.83911703046005,205.83714391416947 307,231 C 351.16088296953995,256.1628560858305 404.31185102971995,242.17632260451353 462,256 C 519.68814897028,269.82367739548647 581.9134788506598,311.4575656677766 635,335 C 688.0865211493402,358.5424343322234 732.034233567641,363.9934147243803 780,390 C 827.965766432359,416.0065852756197 879.9495868787766,462.56877543470216 932,493 C 984.0504131212234,523.4312245652978 1036.1674189172525,537.731483536811 1092,556 C 1147.8325810827475,574.268516463189 1207.3807374522135,596.505290418054 1266,622 C 1324.6192625477865,647.494709581946 1382.3096312738933,676.2473547909731 1440,705 L 1440,700 L 0,700 Z");
}
25% {
d: path("M 0,700 L 0,105 C 63.65850289801456,87.42614379084968 127.31700579602912,69.85228758169936 173,97 C 218.68299420397088,124.14771241830064 246.39047971389812,196.01699346405226 296,214 C 345.6095202861019,231.98300653594774 417.1210753483783,196.07973856209153 473,207 C 528.8789246516217,217.92026143790847 569.1252188925885,275.6640522875817 621,316 C 672.8747811074115,356.3359477124183 736.3780490812678,379.2640522875817 796,409 C 855.6219509187322,438.7359477124183 911.3625847823405,475.27973856209155 963,508 C 1014.6374152176595,540.7202614379084 1062.1716117893698,569.6169934640523 1109,586 C 1155.8283882106302,602.3830065359477 1201.9509680601802,606.2522875816993 1257,624 C 1312.0490319398198,641.7477124183007 1376.0245159699098,673.3738562091503 1440,705 L 1440,700 L 0,700 Z");
}
50% {
d: path("M 0,700 L 0,105 C 47.93414724380318,75.34199038105808 95.86829448760636,45.683980762116164 144,53 C 192.13170551239364,60.316019237883836 240.46096929337773,104.60606733259343 290,133 C 339.53903070662227,161.39393266740657 390.2878283388827,173.89174990751013 457,224 C 523.7121716611173,274.10825009248987 606.3877173510913,361.8269330373659 656,381 C 705.6122826489087,400.1730669626341 722.1613022567519,350.80051794302625 779,353 C 835.8386977432481,355.19948205697375 932.9670736219016,408.97099519052904 987,438 C 1041.0329263780984,467.02900480947096 1051.970403255642,471.31550129485754 1091,502 C 1130.029596744358,532.6844987051425 1197.1513133555309,589.7669996300408 1260,628 C 1322.8486866444691,666.2330003699592 1381.4243433222346,685.6165001849796 1440,705 L 1440,700 L 0,700 Z");
}
75% {
d: path("M 0,700 L 0,105 C 44.945221358983844,122.06454556665435 89.89044271796769,139.1290911333087 152,143 C 214.1095572820323,146.8709088666913 293.3834504871131,137.54818103341964 344,163 C 394.6165495128869,188.45181896658036 416.57575533358005,248.6781847330127 459,269 C 501.42424466641995,289.3218152669873 564.3135281785669,269.73908003452954 628,284 C 691.6864718214331,298.26091996547046 756.170131952152,346.36549512886916 812,375 C 867.829868047848,403.63450487113084 915.0059440128252,412.79893944999384 963,448 C 1010.9940559871748,483.20106055000616 1059.8060919965471,544.4387470711556 1119,580 C 1178.1939080034529,615.5612529288444 1247.7696880009864,625.446072265384 1303,642 C 1358.2303119990136,658.553927734616 1399.115155999507,681.776963867308 1440,705 L 1440,700 L 0,700 Z");
}
100% {
d: path("M 0,700 L 0,105 C 64.16584042421998,95.73755086940436 128.33168084843996,86.47510173880872 178,114 C 227.66831915156004,141.52489826119128 262.83911703046005,205.83714391416947 307,231 C 351.16088296953995,256.1628560858305 404.31185102971995,242.17632260451353 462,256 C 519.68814897028,269.82367739548647 581.9134788506598,311.4575656677766 635,335 C 688.0865211493402,358.5424343322234 732.034233567641,363.9934147243803 780,390 C 827.965766432359,416.0065852756197 879.9495868787766,462.56877543470216 932,493 C 984.0504131212234,523.4312245652978 1036.1674189172525,537.731483536811 1092,556 C 1147.8325810827475,574.268516463189 1207.3807374522135,596.505290418054 1266,622 C 1324.6192625477865,647.494709581946 1382.3096312738933,676.2473547909731 1440,705 L 1440,700 L 0,700 Z");
}
}
</style>
<defs>
<linearGradient id="gradient" x1="1%" y1="58%" x2="99%" y2="42%">
<stop offset="5%" stop-color="#0693e3"></stop>
<stop offset="95%" stop-color="#8ED1FC"></stop>
</linearGradient>
</defs>
<path
d="M 0,700 L 0,105 C 64.16584042421998,95.73755086940436 128.33168084843996,86.47510173880872 178,114 C 227.66831915156004,141.52489826119128 262.83911703046005,205.83714391416947 307,231 C 351.16088296953995,256.1628560858305 404.31185102971995,242.17632260451353 462,256 C 519.68814897028,269.82367739548647 581.9134788506598,311.4575656677766 635,335 C 688.0865211493402,358.5424343322234 732.034233567641,363.9934147243803 780,390 C 827.965766432359,416.0065852756197 879.9495868787766,462.56877543470216 932,493 C 984.0504131212234,523.4312245652978 1036.1674189172525,537.731483536811 1092,556 C 1147.8325810827475,574.268516463189 1207.3807374522135,596.505290418054 1266,622 C 1324.6192625477865,647.494709581946 1382.3096312738933,676.2473547909731 1440,705 L 1440,700 L 0,700 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.265"
class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path>
<style>
.path-1 {
animation: pathAnim-1 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
0% {
d: path("M 0,700 L 0,245 C 53.760118386977425,225.4175607349858 107.52023677395485,205.83512146997163 159,217 C 210.47976322604515,228.16487853002837 259.679171291158,270.07707485509934 307,304 C 354.320828708842,337.92292514490066 399.76307806141324,363.85657910963124 460,390 C 520.2369219385868,416.14342089036876 595.268516463189,442.49660870637564 646,456 C 696.731483536811,469.50339129362436 723.1628560858306,470.15698606486615 778,499 C 832.8371439141694,527.8430139351339 916.0800591934888,584.8754470341596 973,617 C 1029.9199408065112,649.1245529658404 1060.5169071402147,656.3412257984954 1102,692 C 1143.4830928597853,727.6587742015046 1195.852312245653,791.7596497718584 1254,822 C 1312.147687754347,852.2403502281416 1376.0738438771737,848.6201751140708 1440,845 L 1440,700 L 0,700 Z");
}
25% {
d: path("M 0,700 L 0,245 C 66.63406091996548,206.58771735109138 133.26812183993096,168.17543470218274 185,196 C 236.73187816006904,223.82456529781726 273.5615735602417,317.8859785423603 322,354 C 370.4384264397583,390.1140214576397 430.48558391910217,368.2806511283759 489,391 C 547.5144160808978,413.7193488716241 604.4960907633493,480.99141694413606 647,517 C 689.5039092366507,553.0085830558639 717.5300530275005,557.7536810950795 771,578 C 824.4699469724995,598.2463189049205 903.3836971266494,633.9938586755457 964,646 C 1024.6163028733506,658.0061413244543 1066.935158465902,646.2708842027376 1123,676 C 1179.064841534098,705.7291157972624 1248.875669009742,776.9226045135035 1304,812 C 1359.124330990258,847.0773954864965 1399.562165495129,846.0386977432482 1440,845 L 1440,700 L 0,700 Z");
}
50% {
d: path("M 0,700 L 0,245 C 48.443852509557274,250.51416944136145 96.88770501911455,256.0283388827229 160,269 C 223.11229498088545,281.9716611172771 300.893032433099,302.40081391046994 347,331 C 393.106967566901,359.59918608953006 407.54016524848925,396.3684054753977 452,429 C 496.45983475151075,461.6315945246023 570.9463065729436,490.12556418793935 642,497 C 713.0536934270564,503.87443581206065 780.6746084597362,489.129337772845 824,513 C 867.3253915402638,536.870662227155 886.355259588112,599.3570847206806 937,640 C 987.644740411888,680.6429152793194 1069.9043531878158,699.4423233444321 1126,723 C 1182.0956468121842,746.5576766555679 1212.027327660624,774.8736219015907 1260,796 C 1307.972672339376,817.1263780984093 1373.986336169688,831.0631890492047 1440,845 L 1440,700 L 0,700 Z");
}
75% {
d: path("M 0,700 L 0,245 C 40.80749784190405,212.89266247379453 81.6149956838081,180.7853249475891 139,206 C 196.3850043161919,231.2146750524109 270.34751510667155,313.7513626834382 336,362 C 401.65248489332845,410.2486373165618 458.9949438895055,424.20922431865836 508,439 C 557.0050561104945,453.79077568134164 597.6727093353064,469.4117400419287 640,487 C 682.3272906646936,504.5882599580713 726.3142187692687,524.1438155136269 790,559 C 853.6857812307313,593.8561844863731 937.0704155876188,644.0129979035638 988,666 C 1038.9295844123812,687.9870020964362 1057.4041188802566,681.8041928721175 1097,693 C 1136.5958811197434,704.1958071278825 1197.3131088913551,732.7702306079664 1258,761 C 1318.6868911086449,789.2297693920336 1379.3434455543224,817.1148846960168 1440,845 L 1440,700 L 0,700 Z");
}
100% {
d: path("M 0,700 L 0,245 C 53.760118386977425,225.4175607349858 107.52023677395485,205.83512146997163 159,217 C 210.47976322604515,228.16487853002837 259.679171291158,270.07707485509934 307,304 C 354.320828708842,337.92292514490066 399.76307806141324,363.85657910963124 460,390 C 520.2369219385868,416.14342089036876 595.268516463189,442.49660870637564 646,456 C 696.731483536811,469.50339129362436 723.1628560858306,470.15698606486615 778,499 C 832.8371439141694,527.8430139351339 916.0800591934888,584.8754470341596 973,617 C 1029.9199408065112,649.1245529658404 1060.5169071402147,656.3412257984954 1102,692 C 1143.4830928597853,727.6587742015046 1195.852312245653,791.7596497718584 1254,822 C 1312.147687754347,852.2403502281416 1376.0738438771737,848.6201751140708 1440,845 L 1440,700 L 0,700 Z");
}
}
</style>
<defs>
<linearGradient id="gradient" x1="1%" y1="58%" x2="99%" y2="42%">
<stop offset="5%" stop-color="#0693e3"></stop>
<stop offset="95%" stop-color="#8ED1FC"></stop>
</linearGradient>
</defs>
<path
d="M 0,700 L 0,245 C 53.760118386977425,225.4175607349858 107.52023677395485,205.83512146997163 159,217 C 210.47976322604515,228.16487853002837 259.679171291158,270.07707485509934 307,304 C 354.320828708842,337.92292514490066 399.76307806141324,363.85657910963124 460,390 C 520.2369219385868,416.14342089036876 595.268516463189,442.49660870637564 646,456 C 696.731483536811,469.50339129362436 723.1628560858306,470.15698606486615 778,499 C 832.8371439141694,527.8430139351339 916.0800591934888,584.8754470341596 973,617 C 1029.9199408065112,649.1245529658404 1060.5169071402147,656.3412257984954 1102,692 C 1143.4830928597853,727.6587742015046 1195.852312245653,791.7596497718584 1254,822 C 1312.147687754347,852.2403502281416 1376.0738438771737,848.6201751140708 1440,845 L 1440,700 L 0,700 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4"
class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 350)"></path>
<style>
.path-2 {
animation: pathAnim-2 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-2 {
0% {
d: path("M 0,700 L 0,385 C 49.518115673942546,412.177358490566 99.03623134788509,439.35471698113207 152,434 C 204.9637686521149,428.64528301886793 261.3731902824022,390.7584905660377 317,410 C 372.6268097175978,429.2415094339623 427.47100752250594,505.6113207547171 488,559 C 548.5289924774941,612.3886792452829 614.7427796275744,642.7962264150942 662,655 C 709.2572203724256,667.2037735849058 737.5578739671968,661.2037735849058 794,666 C 850.4421260328032,670.7962264150942 935.025724503638,686.3886792452829 985,714 C 1034.974275496362,741.6113207547171 1050.3392280182516,781.2415094339624 1092,814 C 1133.6607719817484,846.7584905660376 1201.6173634233567,872.6452830188679 1264,900 C 1326.3826365766433,927.3547169811321 1383.1913182883218,956.1773584905661 1440,985 L 1440,700 L 0,700 Z");
}
25% {
d: path("M 0,700 L 0,385 C 46.479467258601545,403.21082747564435 92.95893451720309,421.42165495128864 150,437 C 207.0410654827969,452.57834504871136 274.64372918978916,465.52420767048966 333,474 C 391.35627081021084,482.47579232951034 440.46614872364034,486.481514366753 489,521 C 537.5338512763597,555.518485633247 585.4916759156492,620.5497348624984 641,660 C 696.5083240843508,699.4502651375016 759.5671476137627,713.3195461832532 821,723 C 882.4328523862373,732.6804538167468 942.2397336293009,738.172080404489 985,743 C 1027.7602663706991,747.827919595511 1053.4739178690343,751.9921321987915 1104,794 C 1154.5260821309657,836.0078678012085 1229.8645948945616,915.8593908003454 1290,954 C 1350.1354051054384,992.1406091996546 1395.0677025527193,988.5703045998273 1440,985 L 1440,700 L 0,700 Z");
}
50% {
d: path("M 0,700 L 0,385 C 41.78305586385497,362.99792822789493 83.56611172770994,340.9958564557899 134,344 C 184.43388827229006,347.0041435442101 243.5186089530152,375.0145024047354 306,420 C 368.4813910469848,464.9854975952646 434.35945246022936,526.9461339252682 486,570 C 537.6405475397706,613.0538660747318 575.0435812060673,637.2009618941918 623,656 C 670.9564187939327,674.7990381058082 729.4662227155013,688.2500184979651 788,703 C 846.5337772844987,717.7499815020349 905.0915279319273,733.7989641139476 963,756 C 1020.9084720680727,778.2010358860524 1078.167665556789,806.5541250462448 1134,824 C 1189.832334443211,841.4458749537552 1244.2378098409174,847.9845357010729 1295,873 C 1345.7621901590826,898.0154642989271 1392.8810950795414,941.5077321494635 1440,985 L 1440,700 L 0,700 Z");
}
75% {
d: path("M 0,700 L 0,385 C 55.94001726476755,362.95708472068077 111.8800345295351,340.9141694413615 168,362 C 224.1199654704649,383.0858305586385 280.4198791466272,447.30040695523496 335,483 C 389.5801208533728,518.699593044765 442.44044888395604,525.8842027376988 489,543 C 535.559551116044,560.1157972623012 575.8183253175484,587.1627820939698 634,601 C 692.1816746824516,614.8372179060302 768.2862498458503,615.4646688864225 827,645 C 885.7137501541497,674.5353311135775 927.0366752990506,732.9785423603404 974,776 C 1020.9633247009494,819.0214576396596 1073.567048957948,846.621161672216 1132,855 C 1190.432951042052,863.378838327784 1254.6951288691578,852.5368109507954 1307,871 C 1359.3048711308422,889.4631890492046 1399.652435565421,937.2315945246023 1440,985 L 1440,700 L 0,700 Z");
}
100% {
d: path("M 0,700 L 0,385 C 49.518115673942546,412.177358490566 99.03623134788509,439.35471698113207 152,434 C 204.9637686521149,428.64528301886793 261.3731902824022,390.7584905660377 317,410 C 372.6268097175978,429.2415094339623 427.47100752250594,505.6113207547171 488,559 C 548.5289924774941,612.3886792452829 614.7427796275744,642.7962264150942 662,655 C 709.2572203724256,667.2037735849058 737.5578739671968,661.2037735849058 794,666 C 850.4421260328032,670.7962264150942 935.025724503638,686.3886792452829 985,714 C 1034.974275496362,741.6113207547171 1050.3392280182516,781.2415094339624 1092,814 C 1133.6607719817484,846.7584905660376 1201.6173634233567,872.6452830188679 1264,900 C 1326.3826365766433,927.3547169811321 1383.1913182883218,956.1773584905661 1440,985 L 1440,700 L 0,700 Z");
}
}
</style>
<defs>
<linearGradient id="gradient" x1="1%" y1="58%" x2="99%" y2="42%">
<stop offset="5%" stop-color="#0693e3"></stop>
<stop offset="95%" stop-color="#8ED1FC"></stop>
</linearGradient>
</defs>
<path
d="M 0,700 L 0,385 C 49.518115673942546,412.177358490566 99.03623134788509,439.35471698113207 152,434 C 204.9637686521149,428.64528301886793 261.3731902824022,390.7584905660377 317,410 C 372.6268097175978,429.2415094339623 427.47100752250594,505.6113207547171 488,559 C 548.5289924774941,612.3886792452829 614.7427796275744,642.7962264150942 662,655 C 709.2572203724256,667.2037735849058 737.5578739671968,661.2037735849058 794,666 C 850.4421260328032,670.7962264150942 935.025724503638,686.3886792452829 985,714 C 1034.974275496362,741.6113207547171 1050.3392280182516,781.2415094339624 1092,814 C 1133.6607719817484,846.7584905660376 1201.6173634233567,872.6452830188679 1264,900 C 1326.3826365766433,927.3547169811321 1383.1913182883218,956.1773584905661 1440,985 L 1440,700 L 0,700 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53"
class="transition-all duration-300 ease-in-out delay-150 path-2" transform="rotate(-180 720 350)"></path>
<style>
.path-3 {
animation: pathAnim-3 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-3 {
0% {
d: path("M 0,700 L 0,525 C 62.64155876186953,496.2316685164632 125.28311752373907,467.4633370329264 176,474 C 226.71688247626093,480.5366629670736 265.50908866691327,522.3783203847577 319,574 C 372.49091133308673,625.6216796152423 440.68052780860774,687.0233814280429 488,726 C 535.3194721913923,764.9766185719571 561.7688000986558,781.5281539030707 621,787 C 680.2311999013442,792.4718460969293 772.2442717967692,786.8640029596744 826,815 C 879.7557282032308,843.1359970403256 895.2541127142679,905.0158342582316 944,929 C 992.7458872857321,952.9841657417684 1074.7392773461588,939.0726600073993 1130,951 C 1185.2607226538412,962.9273399926007 1213.7887779010975,1000.6935257121715 1261,1034 C 1308.2112220989025,1067.3064742878285 1374.1056110494512,1096.1532371439143 1440,1125 L 1440,700 L 0,700 Z");
}
25% {
d: path("M 0,700 L 0,525 C 65.78576889875447,505.8754223702059 131.57153779750894,486.7508447404119 180,499 C 228.42846220249106,511.2491552595881 259.4996177087187,554.8720434085585 307,592 C 354.5003822912813,629.1279565914415 418.42999136761637,659.7609816253545 483,694 C 547.5700086323836,728.2390183746455 612.7804168208164,766.0840300900235 657,788 C 701.2195831791836,809.9159699099765 724.4483413491184,815.9028980145517 776,840 C 827.5516586508816,864.0971019854483 907.4262177827104,906.3043778517696 962,937 C 1016.5737822172896,967.6956221482304 1045.8467875200395,986.8795905783699 1097,1004 C 1148.1532124799605,1021.1204094216301 1221.1866321371317,1036.1772598347513 1282,1056 C 1342.8133678628683,1075.8227401652487 1391.4066839314341,1100.4113700826242 1440,1125 L 1440,700 L 0,700 Z");
}
50% {
d: path("M 0,700 L 0,525 C 67.61050684424713,522.3466518682944 135.22101368849425,519.693303736589 181,531 C 226.77898631150575,542.306696263411 250.72645209027007,567.5734369219387 305,594 C 359.2735479097299,620.4265630780613 443.87317795042543,648.0129485756567 507,660 C 570.1268220495746,671.9870514243433 611.7808361080281,668.3747687754347 663,698 C 714.2191638919719,727.6252312245653 775.0034776174622,790.4879763226045 820,835 C 864.9965223825378,879.5120236773955 894.2052534221235,905.6733259341471 948,909 C 1001.7947465778765,912.3266740658529 1080.1755086940439,892.8187199408064 1139,923 C 1197.8244913059561,953.1812800591936 1237.0927118017019,1033.0517943026268 1284,1075 C 1330.9072881982981,1116.9482056973732 1385.4536440991492,1120.9741028486865 1440,1125 L 1440,700 L 0,700 Z");
}
75% {
d: path("M 0,700 L 0,525 C 65.34946355900853,500.85467998520164 130.69892711801705,476.7093599704033 182,498 C 233.30107288198295,519.2906400295967 270.5537550869404,586.0172401035886 322,635 C 373.4462449130596,683.9827598964114 439.08605253422127,715.2216796152424 498,720 C 556.9139474657787,724.7783203847576 609.1020347761746,703.0960414354421 663,728 C 716.8979652238254,752.9039585645579 772.5058083610803,824.3941546429892 815,857 C 857.4941916389197,889.6058453570108 886.874731779504,883.327339992601 940,888 C 993.125268220496,892.672660007399 1069.995264520903,908.2964853866074 1129,943 C 1188.004735479097,977.7035146133926 1229.1442101368848,1031.4867184609693 1278,1065 C 1326.8557898631152,1098.5132815390307 1383.4278949315576,1111.7566407695153 1440,1125 L 1440,700 L 0,700 Z");
}
100% {
d: path("M 0,700 L 0,525 C 62.64155876186953,496.2316685164632 125.28311752373907,467.4633370329264 176,474 C 226.71688247626093,480.5366629670736 265.50908866691327,522.3783203847577 319,574 C 372.49091133308673,625.6216796152423 440.68052780860774,687.0233814280429 488,726 C 535.3194721913923,764.9766185719571 561.7688000986558,781.5281539030707 621,787 C 680.2311999013442,792.4718460969293 772.2442717967692,786.8640029596744 826,815 C 879.7557282032308,843.1359970403256 895.2541127142679,905.0158342582316 944,929 C 992.7458872857321,952.9841657417684 1074.7392773461588,939.0726600073993 1130,951 C 1185.2607226538412,962.9273399926007 1213.7887779010975,1000.6935257121715 1261,1034 C 1308.2112220989025,1067.3064742878285 1374.1056110494512,1096.1532371439143 1440,1125 L 1440,700 L 0,700 Z");
}
}
</style>
<defs>
<linearGradient id="gradient" x1="1%" y1="58%" x2="99%" y2="42%">
<stop offset="5%" stop-color="#0693e3"></stop>
<stop offset="95%" stop-color="#8ED1FC"></stop>
</linearGradient>
</defs>
<path
d="M 0,700 L 0,525 C 62.64155876186953,496.2316685164632 125.28311752373907,467.4633370329264 176,474 C 226.71688247626093,480.5366629670736 265.50908866691327,522.3783203847577 319,574 C 372.49091133308673,625.6216796152423 440.68052780860774,687.0233814280429 488,726 C 535.3194721913923,764.9766185719571 561.7688000986558,781.5281539030707 621,787 C 680.2311999013442,792.4718460969293 772.2442717967692,786.8640029596744 826,815 C 879.7557282032308,843.1359970403256 895.2541127142679,905.0158342582316 944,929 C 992.7458872857321,952.9841657417684 1074.7392773461588,939.0726600073993 1130,951 C 1185.2607226538412,962.9273399926007 1213.7887779010975,1000.6935257121715 1261,1034 C 1308.2112220989025,1067.3064742878285 1374.1056110494512,1096.1532371439143 1440,1125 L 1440,700 L 0,700 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
class="transition-all duration-300 ease-in-out delay-150 path-3" transform="rotate(-180 720 350)"></path>
</svg>
<h2 class="secondary_heading" id="PHOTOS">PHOTOS</h2>
<div class="img pop-row" loading=" lazy">
<div class="img-row">
<img data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200" loading="lazy"
src="Image/mini__R5I4403.jpeg" alt="MESSI" style="cursor:pointer" />
<img data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" loading="lazy"
src="Image/messi-ronaldo-1593920966.webp" alt="MESSI v CR7" style="cursor:pointer" />
<img data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" loading="lazy"
src="Image/leo-raise.webp" alt="LM10" width="300px" height="200px" style="cursor:pointer" />
<img data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800" loading="lazy"
src="Image/gettyimages-846141966-612x612.webp" alt="LIONEL
MESSI" style="cursor:pointer" />
<img data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200" loading="lazy"
src="Image/lionel-messi-hd-wallpaperkwhcv.webp" alt="Vamos
Messi" style="cursor:pointer" />
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" loading="lazy"
src="Image/6WHENYGXDJIB7KC72MMN3ZIQWU.webp" alt="MESSI MANIA" style="cursor:pointer" />
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" loading="lazy"
src="Image/0_GettyImages-1313922671jpgong.webp" style="cursor:pointer" />
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800" loading="lazy"
src="Image/messi-une.webp" style="cursor:pointer" />
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200" loading="lazy"
src="Image/stats-background.webp" style="cursor:pointer" />
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400" loading="lazy"
src="Image/lionel-messi-fc-barcelona-uefa-champions-league-quarter-final-second-leg-match-juventus-194645949.webp"
style="cursor:pointer;">
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" loading="lazy"
src="Image/Leo.webp" style="cursor:pointer;">
<img alt="Messi" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800" loading="lazy"
src="Image/Lionel-Messi-Barcelona-Champions-League-final.webp" style="cursor: pointer;">
</div>
<!-- </div> -->
</section>
<div class="pop-up">
<span>×</span>
<img src="Image/mini__R5I4403.jpeg" alt="Messi">
</div>
<section class="info-area">
<h2 class="secondary_heading" id="MORE">GOD OF
FOOTBALL</h2>
<div class="main-info">
<div id="image-hover">
<div class="myCard">
<div class="innerCard">
<div class="frontSide">
<img data-aos="zoom-in-up" data-aos-duration="1000"
src="Image/lionel-messi-soccer-photoshop-effects-wallpaper-preview.webp" alt="LIONEL MESSI"
class="mainInfoMessiaCard" />
</div>
<div class="backSide">
<img alt="Worldcup" loading="lazy" src="./Image/wp11948236.webp" class="mainInfoMessiaCard">
</div>
</div>
</div>
</div>
<h3 class="blackText">LIONEL MESSI</h3>
<p><b>Age as
on 2023 (36 Years)</b></p>
<div class="social_links">
<a class="social_link social_link_wikipedia" href="https://en.wikipedia.org/wiki/Lionel_Messi" target="_blank"
rel="noopener noreferrer"><span class="social_icon_wikipedia"><i
class="fa-brands fa-wikipedia-w"></i></span><span>Wikipedia</span></a>
|
<a class="social_link social_link_instagram" href="https://www.instagram.com/leomessi/" target="_blank"
rel="noopener noreferrer"><span class="social_icon_instagram"><i
class="fa-brands fa-instagram"></i></span><span>Instagram</span></a>
|
<a class="social_link social_link_facebook" href="https://www.facebook.com/leomessi" target="_blank"
rel="noopener noreferrer"><span class="social_icon_facebook"><i
class="fa-brands fa-facebook"></i></span><span>Facebook</span></a>
</div>
<h4><b>Lionel Messi,
in full <i>Lionel Andrés Messi</i>,
also called Leo Messi,
(born June 24, 1987, Rosario, Argentina),
Argentine-born football (soccer) player who was named Fédération
Internationale de Football Association (FIFA) world player of the
year six times (2009–12, 2015, and 2019). </b></h4>
<h5 class="messi-facts">
<ul class="points">
<li>Messi
is the only player to top-score in four consecutive Champions
League seasons,
and also holds the record for the most hat-tricks scored in the
competition with five. In March 2012 he made Champions League
history by becoming the first player to score five goals in one
match. </li>
<li>He also matched José Altafini's record of 14
goals in a single
Champions League season. In the 2011–12 season,
Messi set the European record for most goals scored in a season
with 73 goals,
set the goalscoring record in a single La Liga season with 50
goals,
and became the first player ever to score and assist in six
different official competitions in one season. In February 2013
he scored his 300th Barcelona goal. On 30 March 2013,
Messi scored in his 19th consecutive La Liga game,
becoming the first footballer in history to net in consecutive
matches against every team in a professional football league. He
extended his record scoring streak to 21 consecutive league
matches. </li>
<li>In March 2014,
with a hat-trick against Real Madrid,
Messi became the player with the most goals and most hat-tricks
in the history of El Clásico. In October 2014,
Messi,
aged 27,
became the youngest player to score 250 goals in La Liga. In
November 2014,
Messi scored a hat-trick against Sevilla to reach 253 La Liga
goals,
becoming the all-time top scorer in La Liga. Later that month,
he scored his 74th Champions League goal to become its all-time
leading scorer. </li>
</ul>
</h5>
<div>
<h3 class="blackText">Messi was born to play
football. Everyone knew he was going to be the best footballer.<br> 
  -Rodolfo Borell(FC Barcelona Youth Team Coach) </h3>
</div>
<div class="achivements">
<div class="achivements-div">
<img data-aos="zoom-out-down" data-aos-duration="1000" loading="lazy" class="more_img" loading="lazy"
src="Image/Mundial-sub-20.webp" alt="Messi">
<h3>Messi won 2005 FIFA
U-20 World cup</h3>
</div>
<div class="achivements-div">
<img data-aos="zoom-out-down" data-aos-duration="1000" loading="lazy" class="more_img" loading="lazy"
src="Image/_132055952_gettyimages-1451356967.webp" alt="Messi">
<h3>Messi won 2022 FIFA World cup</h3>
</div>
<div class="achivements-div">
<img data-aos="zoom-out-down" data-aos-duration="1000" loading="lazy" class="more_img" loading="lazy"
src="Image/GettyImages-476288434_(1).webp" alt="Messi">
<h3>Barcelona
won 6 trophies in single<br>calender year</h3>
</div>
<div class="achivements-div">
<img data-aos="zoom-out-down" data-aos-duration="1000" loading="lazy" src="Image/sddefault.webp" alt="MESSI"
width="300px" height="200px" />
<h3>Messi has won 8
Ballon d'or,<br>more than any footballer</h3>
</div>
<div class="achivements-div">
<img data-aos="zoom-out-down" data-aos-duration="1000" loading="lazy" src="Image/calender.webp" alt="MESSI"
width="300px" height="200px">
<h3>Messi has scored most goals<br>in a calender
year</h3>
</div>
<div class="facts">
<!-- <img loading="lazy"
src="https://d107a8nc3g2c4h.cloudfront.net/images/blog/wp-content/uploads/Lionel-Messi-facts.webp"
alt="MESSI" width="300px" height="300px"> -->
<h4 class="factsHead">FACTS</h4>
<h5>
<ol class="facts">
<li> Messi had growth hormone deficiency, which was stopping his normal growth rate at a tender age of
11. Most importantly, his parents couldn’t afford his treatment of $900 per month.</li>
<li>Through their relatives in Catalonia, Messi’s family arranged a trial with Barcelona in September
2000. Secondly, he impressed the first team director and he wanted to sign him immediately. Having no
paper at hand, he wrote Messi’s first contract on a paper napkin.</li>
<li> Messi pursued by the Royal Spanish Football Federation to join the Spanish Football Team. However,
Lionel Messi declined the offer.</li>
</ol>
Here are some: <a href="https://www.purevpn.com/blog/top-facts-about-lionel-messi/">More facts about
Messi</a>
</h5>
</div>
</div>
<!-- before class blackText -->
<div class="c-1">
<div class="card_ani1" id="c-2"></div>
<div id="myDiv"></div>
<div class="card_ani1" id="c-1"></div>
</div>
<h3 class="blackText">Messi replicated two of Maradona's most
famous goals in a span of three weeks. In the Copa Del Rey
semi-final,
he scored a goal similar to Maradona's 1986 FIFA World Cup goal
which is known as the Goal of the Century. He scored another in a
similar fashion to Maradona's “Hand of god” goal against Espanyol in
a league fixture.</h3>
<div class="carousel" id="last-info-video">
<video class="carousel-cell info-video" src="Video/Leo Messi Maradona goal vs Getafe, just 19y old.mp4"
poster="Image/download.webp" controls></video>
</div>
</div>
<div class="wim-wrapper">
<span id="wim-text">Where is Messi?</span><br>
<span class="wim-text2">Goals Scored by Messi All around the world</span><br>
<span class="wim-text2">Hover around the countries to see more</span>
</div>
<div class="box2">
<div class="tags">
<div class="row-2" id="f1">
<div class="flag" style="background-image: url('Image/country/bolivia.svg');"></div>
<div class="name">Bolivia: 8 Goals</div>
</div>
<div class="row-2" id="f2">
<div class="flag" style="background-image: url('Image/country/ecuador.svg');"></div>
<div class="name">Ecuador: 6 Goals</div>
</div>
<div class="row-2" id="f3">
<div class="flag" style="background-image: url('Image/country/estonia.svg');"></div>
<div class="name">Estonia: 5 Goals</div>
</div>
<div class="row-2" id="f4">
<div class="flag" style="background-image: url('Image/country/brazil.svg');"></div>
<div class="name">Brazil: 5 Goals</div>
</div>
<div class="row-2" id="f5">
<div class="flag" style="background-image: url('Image/country/uru.svg');"></div>
<div class="name">Uruguay: 5 Goals</div>
</div>
<div class="row-2" id="f6">
<div class="flag" style="background-image: url('Image/country/chile.svg');"></div>
<div class="name">Chile: 5 Goals</div>
</div>
<div class="row-2" id="f7">
<div class="flag" style="background-image: url('Image/country/paraguay.svg');"></div>
<div class="name">Paraguay: 5 Goals</div>
</div>
<div class="row-2" id="f8">
<div class="flag" style="background-image: url('Image/country/vene.svg');"></div>
<div class="name">Venezuela: 4 Goals</div>
</div>
<div class="row-2" id="f9">
<div class="flag" style="background-image: url('Image/country/haiti.svg');"></div>
<div class="name">Haiti: 3 Goals</div>
</div>
<div class="row-2" id="f10">
<div class="flag" style="background-image: url('Image/country/nigeria.svg');"></div>
<div class="name">Nigeria: 3 Goals</div>
</div>
<div class="row-2" id="f11">
<div class="flag" style="background-image: url('Image/country/panama.svg');"></div>
<div class="name">Panama: 3 Goals</div>