forked from Saif-Haq/music-website-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (66 loc) · 2.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>By Saif</title>
</head>
<body>
<div class="splash-wrap" id="splash-wrap">
<img src="assets/sine-symbol.png" class="splash" id="splash"
alt="splash screen with a spinning Chromatica logo." />
</div>
<nav>
<ul>
<!-- <li><a href="javascript:" onclick="showPopup();">Sign Up</a></li> -->
<li><a href="#spotify">Preview</a></li>
<li><a href="#lyrics-main">Unlock Lyrics</a></li>
</ul>
</nav>
<div class="hero-section" id="hero-background">
<div class="hero-section-circle" id="circle">
<img src="assets/parental-advisory-sticker.png" class="advisory-sticker" id="advisory-sticker"
alt="Parental Advisory Explicit Content">
<div class="hero-square">
<!-- <img src="assets/free_pack_01 (2)/free_pack_01/0_CIRCLES/PsychoEye.png"
alt="Eyes in the style of surrealism " class="eyes" id="eyes"> -->
<video poster="//gagadaily.com/images/banners/plasticdoll_poster.jpg"
src="//gagadaily.com/images/banners/plasticdoll_video.mp4" autoplay="" loop="" muted=""
playsinline="">
</video>
</div>
</div>
</div>
<img src="assets/barbed-wire.png" alt="Barbed Wire" class="barbed-wire" height="auto">
<div style="margin-bottom: 20%;" id="lyrics-main">
<h1>
<span class="magic"><span class="magic-text">LUST FOR LIFE</span>
</span>
<p>02/16</p>
</h1>
</div>
<div class="lyrics-unlock flex-center flex-column">
<img src="assets/heart.png" alt="Heart Shaped Lock" class="heart" id="heart">
<div class="pin-code" id="pin-code">
<input type="number" maxlength="1" id="digit1">
<input type="number" maxlength="1" id="digit2">
<input type="number" maxlength="1" id="digit3">
<div id="lyrics-unlock-button">
<button class="arrow-button" id="arrow-button"> ➤</button>
</div>
</div>
<div class="lyrics" id="lyrics">It's funny how life can change or be shaped passing by a stranger
</div>
</div>
<div class="lyrics-unlock flex-center flex-column" id="spotify">
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/album/05c49JgPmL4Uz2ZeqRx5SP?utm_source=generator" width="100%"
height="652" frameBorder="0" allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy">
</iframe>
</div>
<script src="script.js"></script>
</body>
</html>