-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1436 lines (1422 loc) · 53 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
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/plugins.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.svg" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<title>Rafael Martins | Riot Games</title>
</head>
<body class="gsap-body">
<section class="bg-loader">
<svg
width="125"
height="36"
viewBox="0 0 125 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="logo-riot"
d="M21.1551 0.400377L0 10.1972L5.2711 30.2578L9.28279 29.7652L8.17973 17.1518L9.49697 16.5649L11.7716 29.4589L18.6277 28.6171L17.409 14.6951L18.7134 14.1147L21.215 28.3001L28.1504 27.4477L26.816 12.187L28.1354 11.6001L30.8705 27.1136L37.7266 26.2718V4.55129L21.1551 0.400377ZM21.652 30.8254L22.0011 32.8002L37.7266 35.4218V28.8506L21.6606 30.8254H21.652ZM52.5996 26.7088V29.4139H55.9345C55.9348 29.9626 55.7932 30.5019 55.5232 30.9796C55.241 31.4555 54.8235 31.8365 54.3238 32.0741C53.7263 32.3471 53.0741 32.479 52.4176 32.4596C51.6594 32.4806 50.9127 32.2715 50.2757 31.8599C49.6535 31.428 49.1735 30.8213 48.8963 30.1164C48.5508 29.2351 48.3855 28.2934 48.4101 27.347C48.3849 26.408 48.554 25.4738 48.9071 24.6033C49.1957 23.9095 49.6793 23.3143 50.2993 22.8898C50.9244 22.484 51.6575 22.2764 52.4026 22.2944C52.7905 22.291 53.1769 22.3422 53.5506 22.4465C53.883 22.5417 54.1967 22.6931 54.478 22.8941C54.7452 23.0866 54.9758 23.3252 55.1591 23.5988C55.3508 23.8914 55.4953 24.2123 55.5875 24.5498H59.2865C59.1897 23.7735 58.9376 23.0247 58.5454 22.3479C58.1551 21.6802 57.6429 21.0917 57.0354 20.613C56.3988 20.1154 55.6806 19.732 54.9128 19.48C54.0789 19.2086 53.2066 19.0741 52.3297 19.0816C51.3037 19.0731 50.2857 19.2621 49.3311 19.6385C48.414 20.0037 47.5847 20.5592 46.898 21.2684C46.1794 22.0179 45.6244 22.9084 45.2681 23.8836C44.8611 25.0122 44.6629 26.2054 44.6833 27.4049C44.6833 29.1098 45.0075 30.5798 45.6557 31.8149C46.2687 33.0046 47.2126 33.9917 48.3737 34.6572C49.5502 35.2849 50.8575 35.6281 52.1906 35.6593C53.5237 35.6906 54.8455 35.409 56.0501 34.8371C57.0924 34.3083 57.9602 33.4903 58.5497 32.481C59.1565 31.4544 59.4593 30.2264 59.4578 28.7971V26.7066L52.5996 26.7088ZM98.6559 35.4497V19.2915H109.723V22.2815H102.308V25.8713H108.303V28.8613H102.308V32.4596H109.74V35.4497H98.6559ZM120.466 24.0336C120.45 23.7558 120.374 23.4849 120.243 23.2394C120.112 22.9939 119.93 22.7797 119.708 22.6114C119.26 22.2708 118.637 22.1016 117.847 22.1016C117.39 22.0864 116.935 22.1591 116.506 22.3158C116.182 22.4339 115.898 22.6401 115.686 22.9112C115.502 23.159 115.402 23.4593 115.401 23.768C115.391 24.014 115.449 24.258 115.57 24.4727C115.697 24.6861 115.873 24.866 116.084 24.9974C116.331 25.1577 116.598 25.2865 116.877 25.3808C117.202 25.4942 117.534 25.5879 117.87 25.6614L119.29 25.9912C119.986 26.1393 120.665 26.3604 121.315 26.6509C121.878 26.9021 122.398 27.2404 122.857 27.6533C123.276 28.0355 123.611 28.5018 123.838 29.022C124.075 29.5832 124.193 30.1881 124.182 30.7975C124.207 31.7201 123.941 32.627 123.424 33.3913C122.878 34.1504 122.122 34.7345 121.25 35.0727C120.163 35.4925 119.003 35.6934 117.838 35.6638C116.656 35.6891 115.48 35.4847 114.375 35.062C113.445 34.7006 112.645 34.0678 112.079 33.2457C111.532 32.4375 111.246 31.4294 111.222 30.2214H114.741C114.746 30.6879 114.893 31.1419 115.163 31.5224C115.433 31.9029 115.812 32.1918 116.251 32.3504C116.746 32.5385 117.272 32.6301 117.802 32.6203C118.288 32.6309 118.771 32.5517 119.228 32.3868C119.589 32.2594 119.91 32.0375 120.156 31.7442C120.373 31.4714 120.491 31.1333 120.492 30.7847C120.495 30.4721 120.388 30.1685 120.188 29.928C119.943 29.6611 119.64 29.455 119.301 29.3261C118.823 29.1313 118.33 28.978 117.825 28.8677L116.097 28.4501C114.719 28.1217 113.632 27.6033 112.835 26.8951C112.038 26.1869 111.643 25.2273 111.648 24.0164C111.623 23.0873 111.903 22.1755 112.445 21.4205C113.013 20.6527 113.777 20.0526 114.658 19.6835C115.673 19.2529 116.768 19.0405 117.87 19.0602C118.968 19.0356 120.058 19.2482 121.066 19.6835C121.922 20.0559 122.657 20.6597 123.189 21.4269C123.7 22.1956 123.968 23.0999 123.96 24.0229L120.466 24.0336ZM96.0514 35.4497H92.4381V23.1661L92.0675 23.1618L88.4178 35.4497H84.8066L81.2555 23.1618L80.795 23.1661V35.4497H77.1816V19.2915H83.3223L86.4237 30.1207H86.7986L89.9 19.2915H96.0514V35.4497ZM71.4929 35.4497H75.4061L69.9807 19.2937H65.0224L59.5885 35.4497H63.5081L64.564 31.907H70.437L71.4929 35.4497ZM65.4036 29.0884L67.1642 23.1661H67.8282L69.5974 29.0884H65.4036ZM60.4881 0.550306H64.1399V16.7084H60.4881V0.550306ZM81.4825 8.62937C81.4825 10.4028 81.1462 11.9021 80.4737 13.1273C79.8489 14.31 78.8982 15.289 77.7342 15.9481C76.5375 16.5865 75.2021 16.9205 73.8457 16.9205C72.4894 16.9205 71.1539 16.5865 69.9572 15.9481C68.7929 15.2865 67.8423 14.3054 67.2178 13.1208C66.5452 11.8843 66.2089 10.385 66.2089 8.62295C66.2089 6.86092 66.5452 5.35805 67.2178 4.11435C67.8412 2.93511 68.7887 1.95862 69.9486 1.29995C71.1458 0.66297 72.4811 0.329834 73.8371 0.329834C75.1932 0.329834 76.5285 0.66297 77.7257 1.29995C78.8897 1.95906 79.8404 2.93799 80.4651 4.12077C81.1377 5.35448 81.4739 6.85735 81.4739 8.62937M77.7578 8.62937C77.7856 7.6787 77.6232 6.73205 77.2802 5.84497C77.0088 5.15164 76.5367 4.55504 75.9244 4.13148C75.2979 3.74635 74.5769 3.54245 73.8414 3.54245C73.106 3.54245 72.385 3.74635 71.7585 4.13148C71.1454 4.55536 70.6721 5.15173 70.3984 5.84497C69.7542 7.64535 69.7542 9.61339 70.3984 11.4138C70.6712 12.1075 71.1447 12.7042 71.7585 13.1273C72.385 13.5124 73.106 13.7163 73.8414 13.7163C74.5769 13.7163 75.2979 13.5124 75.9244 13.1273C76.5374 12.7045 77.0097 12.1076 77.2802 11.4138C77.6229 10.5266 77.7853 9.58003 77.7578 8.62937ZM52.8138 11.0754L54.6901 16.7084H58.6975L56.6113 10.6406H53.7776L53.6084 10.118C54.1482 10.013 55.0713 9.85023 55.8895 9.29335C56.4626 8.90348 56.9325 8.38038 57.2589 7.76893C57.5854 7.15748 57.7585 6.47596 57.7636 5.78285C57.7882 4.82548 57.5464 3.88009 57.0654 3.05199C56.5952 2.25012 55.8975 1.60602 55.0606 1.20143C54.0793 0.747031 53.0058 0.527053 51.9249 0.558874H45.4073V16.7084H49.0613V11.0754H52.8138ZM52.7453 7.73194C52.2479 7.91483 51.72 8.00062 51.1903 7.98468H49.0613V3.51677H51.1838C51.7139 3.50151 52.2418 3.59179 52.7367 3.78236C53.1281 3.93802 53.4586 4.21599 53.6791 4.57485C53.9039 4.93661 54.0158 5.3572 54.0004 5.78285C54.0178 6.20208 53.9073 6.6167 53.6834 6.97158C53.4618 7.32042 53.1324 7.5874 52.7453 7.73194ZM81.8273 0.550306V3.5489H88.103L88.2743 4.07365C87.7431 4.17646 86.8457 4.33496 86.0404 4.86614V16.7127H89.6537V3.54033H93.856V0.541739L81.8273 0.550306Z"
/>
</svg>
</section>
<div class="menu js-menu">
<div class="area-menu">
<div class="container">
<ul>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/logos/logo-valorant.svg"
alt="Logo Valorant"
/>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/logos/logo-tft.svg"
alt="Logo Teamfight Tactics"
/>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/logos/logo-wild-rift.svg"
alt="Logo League of Legends Wild Rift"
/>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/logos/logo-runeterra.svg"
alt="Logo League of Runeterra"
/>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="footer-menu">
<ul>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/icons/icon-group-blue.svg"
alt="Icone ver todos os jogos"
/>
</div>
<span>Ver todos jogos</span>
</a>
</li>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/icons/icon-riot.svg"
alt="Icone Riot Games"
/>
</div>
<span>Aplicativo Riot Games</span>
</a>
</li>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/icons/icon-downloads.svg"
alt="Icone downloads"
/>
</div>
<span>Downloads</span>
</a>
</li>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/icons/icon-chat.svg"
alt="Icone fóruns dos jogos"
/>
</div>
<span>Fóruns dos jogos</span>
</a>
</li>
</ul>
</div>
</div>
<div class="menu esportes js-menu">
<div class="area-menu">
<div class="container">
<ul>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/logos/logo-cblol.svg"
alt="Logo CBLOL"
/>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="footer-menu">
<ul>
<li>
<a href="">
<div class="icon">
<img
src="assets/svgs/icons/icon-torneio.svg"
alt="Icone troféu"
/>
</div>
<span>LoL Esports</span>
</a>
</li>
</ul>
</div>
</div>
<header>
<div class="container">
<div class="left-container">
<a href="" class="logo gsap-header-logo">
<img
src="assets/svgs/logos/logo-riot.svg"
alt="Logo da Riot Games"
title="Logo da Riot Games"
/>
</a>
<nav class="gsap-header-nav">
<ul>
<li>
<a href="" class="js-btn-menu">
Jogos
<img
src="assets/svgs/icons/icon-arrow-down.svg"
alt="Icone de seta"
title="Icone de seta"
/>
</a>
</li>
<li>
<a href="" class="js-btn-menu">
Esports
<img
src="assets/svgs/icons/icon-arrow-down.svg"
alt="Icone de seta"
title="Icone de seta"
/>
</a>
</li>
<li>
<a href="">Notícias</a>
</li>
<li>
<a href="">Atualizações</a>
</li>
<li>
<a href="">Suporte</a>
</li>
</ul>
</nav>
</div>
<div class="right-container gsap-header-buttons">
<a href="" class="btn btn-outlined">Iniciar sessão</a>
<a href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</a>
<button class="btn-mobile">
<img
src="assets/svgs/icons/icon-menu.svg"
alt="Icone menu mobile"
/>
</button>
</div>
</div>
</header>
<section class="s-hero">
<div class="slide-thumbnail">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="assets/svgs/icons/icon-assassin-42.svg"
alt="Icone rota assassino"
title="Icone rota assassino"
/>
</div>
<div class="swiper-slide">
<img
src="assets/svgs/icons/icon-figther-42.svg"
alt="Icone rota lutador"
title="Icone rota lutador"
/>
</div>
<div class="swiper-slide">
<img
src="assets/svgs/icons/icon-mage-42.svg"
alt="Icone rota mago"
title="Icone rota mago"
/>
</div>
<div class="swiper-slide">
<img
src="assets/svgs/icons/icon-marksman-42.svg"
alt="Icone rota atirador"
title="Icone rota atirador"
/>
</div>
<div class="swiper-slide">
<img
src="assets/svgs/icons/icon-support-42.svg"
alt="Icone rota suporte"
title="Icone rota suporte"
/>
</div>
<div class="swiper-slide">
<img
src="assets/svgs/icons/icon-tank-42.svg"
alt="Icone rota tanque"
title="Icone rota tanque"
/>
</div>
</div>
</div>
<div class="slide-principal">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping slide-01">
<div class="container">
<div class="left-content gsap-slide-text">
<h2>Akali, a assassina renegada</h2>
<p>
Sua mensagem será ouvida em voz alta e clara: “Temam a
assassina sem mestre”
</p>
<button href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</button>
</div>
<div class="right-content gsap-slide-trailer">
<div class="logo">
<img
src="assets/svgs/logos/logo-league.svg"
alt="Logo League of Legends"
title="Logo League of Legends"
/>
</div>
<div class="video">
<span>Assista o trailer</span>
<button class="btn-video">
<img
src="assets/imgs/thumbs/thumbnail1.jpg"
alt="Thumbnail Akali"
title="Thumbnail Akali"
class="thumb default"
/>
<img
src="assets/gifs/akali.gif"
alt="Gif Akali"
title="Gif Akali"
class="thumb hover"
/>
<div class="icon">
<img
src="assets/svgs/icons/icon-play.svg"
alt="Icone play"
title="Icone play"
/>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping slide-02">
<div class="container">
<div class="left-content">
<h2>Pantheon, a lança indestrutível</h2>
<p>
Sua inabalável determinação é o que alimenta as armas do
antigo Aspecto no campo de batalha
</p>
<button href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</button>
</div>
<div class="right-content">
<div class="logo">
<img
src="assets/svgs/logos/logo-league.svg"
alt="Logo League of Legends"
title="Logo League of Legends"
/>
</div>
<div class="video">
<span>Assista o trailer</span>
<button class="btn-video">
<img
src="assets/imgs/thumbs/thumbnail2.jpg"
alt="Thumbnail Pantheon"
title="Thumbnail Pantheon"
class="thumb default"
/>
<img
src="assets/gifs/pantheon.gif"
alt="Gif Pantheon"
title="Gif Pantheon"
class="thumb hover"
/>
<div class="icon">
<img
src="assets/svgs/icons/icon-play.svg"
alt="Icone play"
title="Icone play"
/>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping slide-03">
<div class="container">
<div class="left-content">
<h2>Fiddlesticks, o terror ancestral</h2>
<p>
Muito cuidado com o som dos corvos, ou com os sussurros de uma
figura que parece quase humana
</p>
<button href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</button>
</div>
<div class="right-content">
<div class="logo">
<img
src="assets/svgs/logos/logo-league.svg"
alt="Logo League of Legends"
title="Logo League of Legends"
/>
</div>
<div class="video">
<span>Assista o trailer</span>
<button class="btn-video">
<img
src="assets/imgs/thumbs/thumbnail3.jpg"
alt="Thumbnail Fiddlesticks"
title="Thumbnail Fiddlesticks"
class="thumb default"
/>
<img
src="assets/gifs/fiddlesticks.gif"
alt="Gif Fiddlesticks"
title="Gif Fiddlesticks"
class="thumb hover"
/>
<div class="icon">
<img
src="assets/svgs/icons/icon-play.svg"
alt="Icone play"
title="Icone play"
/>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping slide-04">
<div class="container">
<div class="left-content">
<h2>Varus, a flecha da vingança</h2>
<p>
Na caça daqueles que o aprisionaram para decretar sua vingança
brutal
</p>
<button href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</button>
</div>
<div class="right-content">
<div class="logo">
<img
src="assets/svgs/logos/logo-league.svg"
alt="Logo League of Legends"
title="Logo League of Legends"
/>
</div>
<div class="video">
<span>Assista o trailer</span>
<button class="btn-video">
<img
src="assets/imgs/thumbs/thumbnail4.jpg"
alt="Thumbnail Varus"
title="Thumbnail Varus"
class="thumb default"
/>
<img
src="assets/gifs/varus.gif"
alt="Gif Varus"
title="Gif Varus"
class="thumb hover"
/>
<div class="icon">
<img
src="assets/svgs/icons/icon-play.svg"
alt="Icone play"
title="Icone play"
/>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping slide-05">
<div class="container">
<div class="left-content">
<h2>Pike, o estripador das águas</h2>
<p>
Os mesmos habitantes da cidade que se orgulham de caçar
monstros estão sendo caçados por um
</p>
<button href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</button>
</div>
<div class="right-content">
<div class="logo">
<img
src="assets/svgs/logos/logo-league.svg"
alt="Logo League of Legends"
title="Logo League of Legends"
/>
</div>
<div class="video">
<span>Assista o trailer</span>
<button class="btn-video">
<img
src="assets/imgs/thumbs/thumbnail5.jpg"
alt="Thumbnail Pike"
title="Thumbnail Pike"
class="thumb default"
/>
<img
src="assets/gifs/pyke.gif"
alt="Gif Pyke"
title="Gif Pyke"
class="thumb hover"
/>
<div class="icon">
<img
src="assets/svgs/icons/icon-play.svg"
alt="Icone play"
title="Icone play"
/>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-no-swiping slide-06">
<div class="container">
<div class="left-content">
<h2>Sion, o colosso morto-vivo</h2>
<p>
Lutando para se lembrar do seu verdadeiro ser entre cada
ataque de seu machado.
</p>
<button href="" class="btn btn-primary js-open-modal">
<img
src="assets/svgs/icons/icon-perfil.svg"
alt="Icone de perfil"
title="Icone de perfil"
/>
Jogar agora
</button>
</div>
<div class="right-content">
<div class="logo">
<img
src="assets/svgs/logos/logo-league.svg"
alt="Logo League of Legends"
title="Logo League of Legends"
/>
</div>
<div class="video">
<span>Assista o trailer</span>
<button class="btn-video">
<img
src="assets/imgs/thumbs/thumbnail6.jpg"
alt="Thumbnail Sion"
title="Thumbnail Sion"
class="thumb default"
/>
<img
src="assets/gifs/sion.gif"
alt="Gif Sion"
title="Gif Sion"
class="thumb hover"
/>
<div class="icon">
<img
src="assets/svgs/icons/icon-play.svg"
alt="Icone play"
title="Icone play"
/>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-progress-bar js-progress">
<span class="slide-progress-bar"></span>
</div>
</section>
<section class="s-games">
<div class="container">
<div class="top">
<div class="left-top">
<span>CHAMPIONS</span>
<h2>Campeões exclusivos</h2>
</div>
<div class="right-top">
<ul class="js-nav-games">
<li>
<a href="" class="active">
<img
src="assets/svgs/icons/icon-assassin.svg"
alt="Icone rota assassino"
title="Icone rota assassino"
/>
</a>
</li>
<li>
<a href="">
<img
src="assets/svgs/icons/icon-figther.svg"
alt="Icone rota lutador"
title="Icone rota lutador"
/>
</a>
</li>
<li>
<a href="">
<img
src="assets/svgs/icons/icon-mage.svg"
alt="Icone rota mago"
title="Icone rota mago"
/>
</a>
</li>
<li>
<a href="">
<img
src="assets/svgs/icons/icon-marksman.svg"
alt="Icone rota atirador"
title="Icone rota atirador"
/>
</a>
</li>
<li>
<a href="">
<img
src="assets/svgs/icons/icon-support.svg"
alt="Icone rota suporte"
title="Icone rota suporte"
/>
</a>
</li>
<li>
<a href="">
<img
src="assets/svgs/icons/icon-tank.svg"
alt="Icone rota tanque"
title="Icone rota tanque"
/>
</a>
</li>
</ul>
<a href="" class="btn-all-games">
<img
src="assets/svgs/icons/icon-group-white.svg"
alt="Icone todos campeões"
title="Icone todos campeões"
/>
Ver todos campeões
</a>
</div>
</div>
<div class="tab-games-content">
<!-- Assassin -->
<div class="tab-pane-games active">
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion3.jpg" alt="" />
</div>
<div class="info">
<h3>Akali</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion27.jpg" alt="" />
</div>
<div class="info">
<h3>Ekko</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion33.jpg" alt="" />
</div>
<div class="info">
<h3>Fizz</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion55.jpg" alt="" />
</div>
<div class="info">
<h3>Kassadin</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion56.jpg" alt="" />
</div>
<div class="info">
<h3>Katarina</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion57.jpg" alt="" />
</div>
<div class="info">
<h3>Kha'Zix</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion58.jpg" alt="" />
</div>
<div class="info">
<h3>Leblanc</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion63.jpg" alt="" />
</div>
<div class="info">
<h3>Master Yi</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion67.jpg" alt="" />
</div>
<div class="info">
<h3>Nidalee</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion68.jpg" alt="" />
</div>
<div class="info">
<h3>Nocturne</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion71.jpg" alt="" />
</div>
<div class="info">
<h3>Qyana</h3>
<span>Assassino</span>
</div>
</a>
<a href="" class="card-all-games">
<img src="assets/svgs/logos/logo-riot.svg" alt="" />
<span>
<img src="assets/svgs/icons/icon-group-white.svg" alt="" />
Ver todos campeões
</span>
</a>
</div>
<!-- Figther -->
<div class="tab-pane-games">
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion1.jpg" alt="" />
</div>
<div class="info">
<h3>Aatrox</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion14.jpg" alt="" />
</div>
<div class="info">
<h3>Bel'Veth</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion19.jpg" alt="" />
</div>
<div class="info">
<h3>Camille</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion23.jpg" alt="" />
</div>
<div class="info">
<h3>Darius</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion24.jpg" alt="" />
</div>
<div class="info">
<h3>Diana</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion25.jpg" alt="" />
</div>
<div class="info">
<h3>Dr. Mundo</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion32.jpg" alt="" />
</div>
<div class="info">
<h3>Fiora</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion35.jpg" alt="" />
</div>
<div class="info">
<h3>Gangplank</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion36.jpg" alt="" />
</div>
<div class="info">
<h3>Garen</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion37.jpg" alt="" />
</div>
<div class="info">
<h3>Gnar</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion38.jpg" alt="" />
</div>
<div class="info">
<h3>Gragas</h3>
<span>Lutador</span>
</div>
</a>
<a href="" class="card-all-games">
<img src="assets/svgs/logos/logo-riot.svg" alt="" />
<span
><img src="assets/svgs/icons/icon-group-white.svg" alt="" /> Ver
todos os campeões</span
>
</a>
</div>
<!-- Mage -->
<div class="tab-pane-games">
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion2.jpg" alt="" />
</div>
<div class="info">
<h3>Ahri</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion7.jpg" alt="" />
</div>
<div class="info">
<h3>Anivia</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion8.jpg" alt="" />
</div>
<div class="info">
<h3>Annie</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion11.jpg" alt="" />
</div>
<div class="info">
<h3>Aurelion Sol</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion16.jpg" alt="" />
</div>
<div class="info">
<h3>Brand</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion20.jpg" alt="" />
</div>
<div class="info">
<h3>Cassiopeia</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion28.jpg" alt="" />
</div>
<div class="info">
<h3>Elise</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion29.jpg" alt="" />
</div>
<div class="info">
<h3>Evelynn</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion31.jpg" alt="" />
</div>
<div class="info">
<h3>Fiddlesticks</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion12.jpg" alt="" />
</div>
<div class="info">
<h3>Azir</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="game-card">
<div class="image">
<img src="assets/imgs/cards/champion42.jpg" alt="" />
</div>
<div class="info">
<h3>Heimerdinger</h3>
<span>Mago</span>
</div>
</a>
<a href="" class="card-all-games">
<img src="assets/svgs/logos/logo-riot.svg" alt="" />
<span
><img src="assets/svgs/icons/icon-group-white.svg" alt="" /> Ver
todos os campeões</span
>
</a>
</div>