-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (100 loc) · 7.23 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
<!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">
<title>Metallica | Rock in Rio</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mukta:wght@300;400&display=swap" rel="stylesheet">
<script src="./js/svg-inject.min.js"></script>
</head>
<body>
<!-- LOADER -->
<section class="bg-loader">
<svg width="120" height="120" viewBox="0 0 912 211" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="logo-intro" d="M6 159.801H32.393L68.0235 108.334V200.71L128.727 108.334V159.801L149.842 166.399L161.718 147.924L149.842 140.006V12L87.8182 108.334V12L6 159.801Z" fill="#14181F" />
<path class="logo-intro" d="M243.537 147.924V184.874L227.701 196.751L173.595 143.965V38.393H243.537H343.83V66.1056H306.88V184.874L280.487 159.801V66.1056H243.537H199.988V85.9003H218.463V112.293H199.988V132.088L227.701 159.801L243.537 147.924Z" fill="#14181F" />
<path class="logo-intro" d="M536.499 21.2375L519.343 41.0323L533.859 52.9091V146.604L601.161 178.276V147.924L565.531 132.088V38.393L536.499 21.2375Z" fill="#14181F" />
<path class="logo-intro" d="M648.669 30.4751L616.997 41.0323V146.604L644.71 167.718L664.504 141.326L648.669 126.809V30.4751Z" fill="#14181F" />
<path class="logo-intro" d="M767.437 21.2375L656.587 100.416L767.437 194.111V120.211H739.724V141.326L700.135 105.695L739.724 75.3431V96.4575H767.437V21.2375Z" fill="#14181F" />
<path class="logo-intro" fill-rule="evenodd" clip-rule="evenodd" d="M774.035 159.801L785.912 132.088L774.035 126.809L785.912 100.416L799.109 105.695L834.739 30.4751L906 167.718L812.305 141.326L803.068 159.801H774.035ZM838.698 92.4985L826.821 114.933L851.894 122.85L838.698 92.4985Z" fill="#14181F" />
<path class="logo-intro" fill-rule="evenodd" clip-rule="evenodd" d="M331.953 125.49L343.83 97.7771L359.666 105.695L396.616 30.4751L448.082 136.047V52.9091L437.525 41.0323L453.361 21.2375L478.434 38.393V132.088L515.384 147.924V178.276L453.361 147.924L466.557 170.358L374.182 140.006L363.625 159.801H331.953L346.469 133.408L331.953 125.49ZM396.616 93.8182L387.378 112.293L411.132 122.85L396.616 93.8182Z" fill="#14181F" />
<path class="logo-intro" d="M243.537 66.1056H199.988V85.9003H218.463V112.293H199.988V132.088L227.701 159.801L243.537 147.924V184.874L227.701 196.751L173.595 143.965V38.393H243.537M243.537 66.1056V38.393M243.537 66.1056H280.487V159.801L306.88 184.874V66.1056H343.83V38.393H243.537M32.393 159.801H6L87.8182 12V108.334L149.842 12V140.006L161.718 147.924L149.842 166.399L128.727 159.801V108.334L68.0235 200.71V108.334L32.393 159.801ZM331.953 125.49L343.83 97.7771L359.666 105.695L396.616 30.4751L448.082 136.047V52.9091L437.525 41.0323L453.361 21.2375L478.434 38.393V132.088L515.384 147.924V178.276L453.361 147.924L466.557 170.358L374.182 140.006L363.625 159.801H331.953L346.469 133.408L331.953 125.49ZM519.343 41.0323L536.499 21.2375L565.531 38.393V132.088L601.161 147.924V178.276L533.859 146.604V52.9091L519.343 41.0323ZM616.997 41.0323L648.669 30.4751V126.809L664.504 141.326L644.71 167.718L616.997 146.604V41.0323ZM656.587 100.416L767.437 21.2375V96.4575H739.724V75.3431L700.135 105.695L739.724 141.326V120.211H767.437V194.111L656.587 100.416ZM774.035 159.801L785.912 132.088L774.035 126.809L785.912 100.416L799.109 105.695L834.739 30.4751L906 167.718L812.305 141.326L803.067 159.801H774.035ZM826.821 114.933L838.698 92.4985L851.894 122.85L826.821 114.933ZM387.378 112.293L396.616 93.8182L411.132 122.85L387.378 112.293Z" stroke="#E5E9EF" stroke-width="6" />
<path class="logo-intro" d="M446 141L445 136H451V143.5L446 141Z" fill="#E5E9EF" />
</svg>
</section>
<!-- HEADER -->
<header>
<nav class="navbar">
<div class="nav-menu">
<ul class="nav-list">
<li><a href="./index.html" class="nav-link" title="Home Page">Home</a></li>
<li><a href="https://en.wikipedia.org/wiki/Metallica" class="nav-link" title="Read about Metallica" target="_blank">About Metallica</a></li>
<li><a href="https://wall.alphacoders.com/by_sub_category.php?id=173555&name=Metallica+Wallpapers" class="nav-link" title="Get Metallica Wallpapers" target="_blank">Wallpapers</a></li>
<li><a href="https://rockinrio.com/rio/pt-br/home/" class="nav-link" title="Visit Rock in Rio website" target="_blank" style="color: #FFF; font-style: italic;">#RockInRio</a></li>
</ul>
</div>
<div class="nav-social">
<a href="https://www.facebook.com/Metallica" title="Visit Metallica Facebook" target="_blank"><img src="./svg/facebook.svg" onload="SVGInject(this)" /></a>
<a href="https://www.instagram.com/metallica" title="Visit Metallica Instagram" target="_blank"><img src="./svg/instagram.svg" onload="SVGInject(this)" />
</a>
<a href="https://www.youtube.com/c/metallica" title="Visit Metallica YouTube" target="_blank"><img src="./svg/youtube.svg" onload="SVGInject(this)" />
</a>
<a href="https://twitter.com/metallica" title="Visit Metallica Twitter" target="_blank"><img src="./svg/twitter.svg" onload="SVGInject(this)" />
</a>
</div>
</nav>
</header>
<!-- BG-VIDEO -->
<section class="bg-video">
<video class="video" autoplay muted loop>
<source src="./video/metallica-fuel-frontWeek.mp4" type="video/mp4">
</video>
</section>
<!-- CONTAINER -->
<section class="container flex">
<div class="wrapper">
<div class="container-item-1">
<div class="js-tilt">
<div class="img-metallica">
<img src="./img/img-metallica-2.png" onload="SVGInject(this)" alt="Photo Metallica" />
</div>
</div>
<div class="metallica-logo">
<img src="./svg/metallica-logo.svg" onload="SVGInject(this)" class="" />
</div>
</div>
<div class="container-item-2">
<div class="cta">
<div class="mb-2">
<a href="https://youtu.be/_zg7OpXIwAw" class="btn" title="Watch Metallica at Rock in Rio" target="_blank">Watch Now</a>
</div>
<div class="">
<a href="https://wall.alphacoders.com/by_sub_category.php?id=173555&name=Metallica+Wallpapers" class="btn-secondary" title="Get Metallica Wallpapers" target="_blank">Wallpapers</a>
</div>
</div>
<div class="flex stamps">
<img src="./svg/explicit-content.svg" class="w-auto mr-2" onload="SVGInject(this)" />
<img src="./svg/rock-in-rio.svg" class="w-auto" onload="SVGInject(this)" alt="Logo Festival Rock In Rio" />
</div>
</div>
</div>
</section>
<!-- JAVASCRIPT -->
<script src="./js/app.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js">
</script>
<script>
$('.js-tilt').tilt({
perspective: 500,
scale: 1.07
});
</script>
</body>
</html>