-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (154 loc) · 9.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Afrojack Clone</title>
<link rel="shortcut icon" href="//gavn.in/fav" type="image/x-icon">
<script type="module" crossorigin src="./assets/index.3e52e1b6.js"></script>
<link rel="stylesheet" href="./assets/index.39e6bdf4.css">
</head>
<body class="font-barlow">
<header class="bg-black text-white sticky top-0 w-full left-0 z-30">
<div class="container mx-auto px-5 py-8 ">
<nav class="max-w-7xl flex items-center justify-center gap-16 mx-auto">
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1">Home</a>
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1">Tour</a>
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1">Shop</a>
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1">Contact</a>
<a href="#"><img src="./assets/logo.06a6b743.svg" alt="Afrojack" class="h-8" /></a>
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1"><img
class=" invert h-4" src="./assets/spotify.f28f8ec8.svg" />Spotify</a>
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1"><img
class=" invert h-4" src="./assets/soundcloud.4b65a4be.svg" />iTunes</a>
<a href="#" class="uppercase text-neutral-100 font-bold text-sm flex items-center gap-1"><img
class=" invert h-4" src="./assets/youtube.beca3c78.svg" />Youtube</a>
</nav>
</div>
</header>
<section class="max-h-[620px] overflow-hidden flex items-center justify-center">
<a href="#" class="-z-10 rellax" data-rellax-speed="-10">
<img src="./assets/merch.72ae58b2.jpg" alt="New merch available" />
</a>
</section>
<section class="bg-white -mb-16">
<div class="container mx-auto px-5 ">
<div class="uppercase max-w-3xl mx-auto text-center bg-white p-16 z-20 relative bottom-16">
<h1 class="text-6xl font-black">The Official Afrojack Website</h1>
<p class="text-3xl mt-4">'Lose You' w/ James Arthur is out now!</p>
<div class="w-20 mx-auto h-0.5 bg-neutral-200 my-5"></div>
<a href="#"
class="py-3 px-5 border-2 border-black text-sm inline-block hover:bg-black hover:text-white transition-colors duration-300">Listen
Here</a>
</div>
</div>
</section>
<section class="bg-neutral-100 ">
<div class="container mx-auto px-5 py-20">
<h2 class="uppercase text-2xl font-bold text-center">Latest Music</h2>
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mt-10 mx-auto">
<a href="#" class="relative group overflow-hidden bg-black">
<img src="./assets/lose-you.f82c5bd3.jpg"
class="group-hover:scale-110 transition-all duration-300 hover:opacity-40" />
<div
class="absolute bottom-0 right-0 bg-black text-white group-hover:bg-white group-hover:text-black transition-all duration-300 px-3 py-2 font-bold text-sm uppercase flex items-center justify-end group-hover:pr-6">
<h3 class="">
Lose
You
</h3>
<img src="./assets/pop.e63c0847.svg" alt="" class="h-4 hidden group-hover:inline relative left-2">
</div>
<img src="./assets/plus.64fa2d39.svg" alt=""
class="h-20 absolute top-1/2 left-1/2 fill-white -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</a>
<a href="#" class="relative group overflow-hidden bg-black">
<img src="./assets/unholy.6421cbff.jpg"
class="group-hover:scale-110 transition-all duration-300 hover:opacity-40" />
<div
class="absolute bottom-0 right-0 bg-black text-white group-hover:bg-white group-hover:text-black transition-all duration-300 px-3 py-2 font-bold text-sm uppercase flex items-center justify-end group-hover:pr-6">
<h3 class="">
Unholy
</h3>
<img src="./assets/pop.e63c0847.svg" alt="" class="h-4 hidden group-hover:inline relative left-2">
</div><img src="./assets/plus.64fa2d39.svg" alt=""
class="h-20 absolute top-1/2 left-1/2 fill-white -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</a>
<a href="#" class="relative group overflow-hidden bg-black">
<img src="./assets/get-it.3308bb9e.jpg"
class="group-hover:scale-110 transition-all duration-300 hover:opacity-40" />
<div
class="absolute bottom-0 right-0 bg-black text-white group-hover:bg-white group-hover:text-black transition-all duration-300 px-3 py-2 font-bold text-sm uppercase flex items-center justify-end group-hover:pr-6">
<h3 class="">
Get it
</h3>
<img src="./assets/pop.e63c0847.svg" alt="" class="h-4 hidden group-hover:inline relative left-2">
</div><img src="./assets/plus.64fa2d39.svg" alt=""
class="h-20 absolute top-1/2 left-1/2 fill-white -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</a>
<a href="#" class="relative group overflow-hidden bg-black">
<img src="./assets/party-girl.010b89a7.jpg"
class="group-hover:scale-110 transition-all duration-300 hover:opacity-40" />
<div
class="absolute bottom-0 right-0 bg-black text-white group-hover:bg-white group-hover:text-black transition-all duration-300 px-3 py-2 font-bold text-sm uppercase flex items-center justify-end group-hover:pr-6">
<h3 class="">
Party Girl
</h3>
<img src="./assets/pop.e63c0847.svg" alt="" class="h-4 hidden group-hover:inline relative left-2">
</div><img src="./assets/plus.64fa2d39.svg" alt=""
class="h-20 absolute top-1/2 left-1/2 fill-white -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</a>
<a href="#" class="relative group overflow-hidden bg-black">
<img src="./assets/feels-like-home.ad070244.jpg"
class="group-hover:scale-110 transition-all duration-300 hover:opacity-40" />
<div
class="absolute bottom-0 right-0 bg-black text-white group-hover:bg-white group-hover:text-black transition-all duration-300 px-3 py-2 font-bold text-sm uppercase flex items-center justify-end group-hover:pr-6">
<h3 class="">
Feels Like Home
</h3>
<img src="./assets/pop.e63c0847.svg" alt="" class="h-4 hidden group-hover:inline relative left-2">
</div><img src="./assets/plus.64fa2d39.svg" alt=""
class="h-20 absolute top-1/2 left-1/2 fill-white -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</a>
<a href="#" class="relative group overflow-hidden bg-black">
<img src="./assets/day-n-night.6b8d81cf.jpg"
class="group-hover:scale-110 transition-all duration-300 hover:opacity-40" />
<div
class="absolute bottom-0 right-0 bg-black text-white group-hover:bg-white group-hover:text-black transition-all duration-300 px-3 py-2 font-bold text-sm uppercase flex items-center justify-end group-hover:pr-6">
<h3 class="">
Day n Night
</h3>
<img src="./assets/pop.e63c0847.svg" alt="" class="h-4 hidden group-hover:inline relative left-2">
</div><img src="./assets/plus.64fa2d39.svg" alt=""
class="h-20 absolute top-1/2 left-1/2 fill-white -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
</a>
</div>
</div>
</section>
<footer
class="bg-black text-white bg-[url('./img/lettermark.svg')] bg-no-repeat bg-right sticky bottom-0 left-0 w-full -z-20">
<div class="container mx-auto px-5 py-20">
<h2 class="uppercase text-2xl font-bold text-center">Connect</h2>
<div class="flex items-center justify-center gap-8 mt-10">
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/facebook.f3a45cbf.svg" />
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/instagram.99547b3c.svg" />
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/snapchat.5e99f845.svg" />
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/soundcloud.4b65a4be.svg" />
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/spotify.f28f8ec8.svg" />
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/twitter.045dacb3.svg" />
<img class="cursor-pointer opacity-100 hover:opacity-50 transition-opacity duration-300 invert h-6"
src="./assets/youtube.beca3c78.svg" />
</div>
<p class=" uppercase mt-10 text-sm text-center">
<span class="opacity-50">All rights reserved Afrojack.com 2022 /</span> <a href="//gavinpereira.in"
class="opacity-50 hover:opacity-100 transition-opacity duration-300">Code by GavinPereira</a>
</p>
</div>
</footer>
</body>
</html>