-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (232 loc) · 17.9 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
<!DOCTYPE html>
<html lang="en">
<head> <!--Head includes all stylesheets, imported fonts, js and meta information-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<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=Caveat&family=Kristi&family=Radio+Canada:wght@300;400;500;600;700&family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<title>Home | Laufey</title>
</head>
<body>
<header> <!--Header includes navigation bar that sticks to the top as the page scrolls-->
<nav id = "nav-container"> <!--Container for all navigation bar items-->
<ul id = "navigation-buttons"> <!--Unordered list for all navigation buttons-->
<li><a href="html/tour.html">Tour</a></li>
<li><a href="html/music.html">Music</a></li>
<li><a href="html/merch.html">Merch</a></li>
<li><a href="html/about.html">About</a></li>
<li><a href="html/contact.html">Contact</a></li>
</ul>
<a id = "main-logo" href="index.html">LAUFEY</a> <!--Main Logo for header-->
<ul id = "nav-socialmedia-buttons"> <!--Unordered list for all social media buttons-->
<li><a href="https://www.tiktok.com/@laufey?lang=en" target="_blank"><img src="images/socialmedia/tiktok.png" alt="TikTok"></a></li>
<li><a href="https://www.facebook.com/laufeymusic/" target="_blank"><img src="images/socialmedia/facebook.png" alt="Facebook"></a></li>
<li><a href="https://twitter.com/laufey?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="images/socialmedia/twitter.png" alt="Twitter"></a></li>
<li><a href="https://www.instagram.com/laufey/?hl=en" target="_blank"><img src="images/socialmedia/instagram.png" alt="Instagram"></a></li>
<li><a href="https://www.youtube.com/channel/UChpKl3waLmccNeYH9LGYjUQ" target="_blank"><img src="images/socialmedia/youtube.png" alt="Youtube"></a></li>
<li><a href="https://open.spotify.com/artist/7gW0r5CkdEUMm42w9XpyZO" target="_blank"><img src="images/socialmedia/spotify.png" alt="Spotify"></a></li>
<li><a href="https://music.apple.com/us/artist/laufey/1504424880" target="_blank"><img src="images/socialmedia/applemusic.png" alt="Apple Music"></a></li>
</ul>
<button class = "hamburger" onclick="hamburgerClick()"> <!--Hamburger icon for mobile view -->
<i class = "bar"></i>
<i class = "bar"></i>
<i class = "bar"></i>
</button>
</nav>
</header>
<main> <!--Main content of the page-->
<div class = "featured-video"> <!--Featured video section that includes featured youtube video and listen now button-->
<iframe src="https://www.youtube.com/embed/lSD_L-xic9o?si=01YDSaUPALRLnz-w&autoplay=1&mute=1&rel=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<a class = "listen-now-button" href = "https://laufey.ffm.to/bewitched" target="_blank">LISTEN NOW</a> <!--Listen now button redirects users to the Bewitched album-->
</div>
<section class = "featured-merch"> <!--Featured Merch section that includes featured merch and merch details-->
<h1 class = "merch-title">MERCH</h1> <!--Featured merch title-->
<div class = "featured-merch-container"> <!--Container for all featured merch items-->
<div class = "merch-items"> <!--Container for merch items that includes image of Merch and Details on Merch-->
<a href="https://store.laufeymusic.com/" target="_blank"><img src="images/merch/laufeymerch-1.webp" alt="Bewitched Vinyl"></a>
<p class = "merch-details">
<span>Bewitched Vinyl</span><br>
SGD$49.99
</p>
</div>
<div class = "merch-items"> <!--Container for merch items that includes image of Merch and Details on Merch-->
<a href="https://store.laufeymusic.com/" target="_blank"><img src="images/merch/laufeymerch-2.webp" alt="Bewitched Cassette"></a>
<p class = "merch-details">
<span>Bewitched Cassett</span><br>
SGD$19.99
</p>
</div>
<div class = "merch-items"> <!--Container for merch items that includes image of Merch and Details on Merch-->
<a href="https://store.laufeymusic.com/" target="_blank"><img src="images/merch/laufeymerch-3.webp" alt="Bewitched Sheet Music"></a>
<p class = "merch-details">
<span>Bewitched Sheet Music</span><br>
SGD$9.99
</p>
</div>
</div>
<a class = "more-merch-button" href = "html/merch.html"> <!--Button for more merch that redirects to merch page-->
MORE MERCH
</a>
</section>
<section id = "featured-tour"> <!--Features tour section that includes latest tour details-->
<h1 class = "tour-title">TOUR</h1> <!--Featured tour title-->
<div id = "featured-tour-container"> <!--Container to hold all featured tour items and see more button-->
<img src="images/tour/feature-image.png" alt="Laufey on Tour"> <!--Featured tour image that only shows on desktop view-->
<div class = "tour-items"> <!--Container to hold all featured tour items-->
<div class = "tour-date-details"> <!--Container to hold all tour date detalis for respective tour location-->
<p class = "tour-date">
NOV 15, 2024<br><span>Friday</span>
</p>
<p class = "tour-country">
SINGAPORE, <br>SINGAPORE
</p>
<p class = "tour-location">
SINGAPORE INDOOR STADIUM<br><span>with Dodie</span>
</p>
<a class = "buy-tickets-button" href = "https://www.songkick.com/artists/10139459-laufey" target="_blank">
BUY TICKETS
</a>
</div>
<div class = "tour-date-details"> <!--Container to hold all tour date detalis for respective tour location-->
<p class = "tour-date">
NOV 17, 2024<br><span>Sunday</span>
</p>
<p class = "tour-country">
KUALAR LUMPUR, <br>MALAYSIA
</p>
<p class = "tour-location">
BUKIT JALIL NATIONAL STADIUM<br><span>with Dodie</span>
</p>
<a class = "buy-tickets-button" href = "https://www.songkick.com/artists/10139459-laufey" target="_blank">
BUY TICKETS
</a>
</div>
<div class = "tour-date-details"> <!--Container to hold all tour date detalis for respective tour location-->
<p class = "tour-date">
NOV 20, 2024<br><span>Thursday</span>
</p>
<p class = "tour-country">
BANGKOK, <br>THAILAND
</p>
<p class = "tour-location">
TRUE ICON HALL<br><span>with Dodie</span>
</p>
<a class = "buy-tickets-button" href = "https://www.songkick.com/artists/10139459-laufey" target="_blank">
BUY TICKETS
</a>
</div>
<div class = "tour-date-details"> <!--Container to hold all tour date detalis for respective tour location-->
<p class = "tour-date">
NOV 23, 2024<br><span>Sunday</span>
</p>
<p class = "tour-country">
HANOI, <br>VIETNAM
</p>
<p class = "tour-location">
HANOI OPERA HOUSE<br><span>with VNSO</span>
</p>
<a class = "buy-tickets-button" href = "https://www.songkick.com/artists/10139459-laufey" target="_blank">
BUY TICKETS
</a>
</div>
<a class = "see-more-button" href = "html/tour.html"> <!--Container to hold all tour date detalis for respective tour location-->
SEE MORE
</a>
</div>
</div>
</section>
<section id = "featured-music"> <!--Features music section that includes newly published music-->
<h1 class = "music-title">MUSIC</h1> <!--Features music title-->
<div id = "featured-music-wrapper"> <!--Featured music wrapper for featured music items carousell-->
<!--To make it an ininfite loop that doesn't have any blank images, need to repeat the images for seamless loop-->
<div class = "featured-music-items-carousell">
<a href="https://laufey.ffm.to/bewitched" target="_blank"><img src="images/music/bewitched.jpeg" alt="Bewitched Album"></a>
<a href="https://laufey.ffm.to/eikaldeluxe" target="_blank"><img src="images/music/everything-i-know-about-love.jpeg" alt="Everything I Know About Love Album"></a>
<a href="https://laufey.ffm.to/christmasdreaming" target="_blank"><img src="images/music/a-very-laufey-holiday.jpeg" alt="A Very Laufey Holiday! Album"></a>
<a href="https://beabadoobee.ffm.to/anighttoremember" target="_blank"><img src="images/music/a-night-to-remember.jpg" alt="A Night To Remember Album"></a>
</div>
<div class = "featured-music-items-carousell">
<a href="https://laufey.ffm.to/bewitched" target="_blank"><img src="images/music/bewitched.jpeg" alt="Bewitched Album"></a>
<a href="https://laufey.ffm.to/eikaldeluxe" target="_blank"><img src="images/music/everything-i-know-about-love.jpeg" alt="Everything I Know About Love Album"></a>
<a href="https://laufey.ffm.to/christmasdreaming" target="_blank"><img src="images/music/a-very-laufey-holiday.jpeg" alt="A Very Laufey Holiday! Album"></a>
<a href="https://beabadoobee.ffm.to/anighttoremember" target="_blank"><img src="images/music/a-night-to-remember.jpg" alt="A Night To Remember Album"></a>
</div>
<div class = "featured-music-items-carousell">
<a href="https://laufey.ffm.to/bewitched" target="_blank"><img src="images/music/bewitched.jpeg" alt="Bewitched Album"></a>
<a href="https://laufey.ffm.to/eikaldeluxe" target="_blank"><img src="images/music/everything-i-know-about-love.jpeg" alt="Everything I Know About Love Album"></a>
<a href="https://laufey.ffm.to/christmasdreaming" target="_blank"><img src="images/music/a-very-laufey-holiday.jpeg" alt="A Very Laufey Holiday! Album"></a>
<a href="https://beabadoobee.ffm.to/anighttoremember" target="_blank"><img src="images/music/a-night-to-remember.jpg" alt="A Night To Remember Album"></a>
</div>
</div>
<a class = "more-music-button" href = "html/music.html"> <!--More music button that leads to music page-->
MORE MUSIC
</a>
</section>
<section id = "featured-videos"> <!--Featured videos section that includes newly published videos-->
<h1 class = "videos-title">VIDEOS</h1> <!--Featured videos title-->
<div id = "featured-videos-wrapper"> <!--Featured music wrapper for featured music items carousell-->
<!--To make it an ininfite loop that doesn't have any blank images, need to repeat the images for seamless loop-->
<div class = "featured-videos-carousell">
<iframe src="https://www.youtube.com/embed/lSD_L-xic9o?si=9SP8mvfur13lxUok&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen rel="noopener noreferrer"></iframe>
<iframe src="https://www.youtube.com/embed/KUNcP1H7Wi4?si=IbpnPXdK4eJZMkLF&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/z2PzxLwA4rM?si=NZvHhBS_fOPgGl9A&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class = "featured-videos-carousell">
<iframe src="https://www.youtube.com/embed/lSD_L-xic9o?si=9SP8mvfur13lxUok&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/KUNcP1H7Wi4?si=IbpnPXdK4eJZMkLF&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/z2PzxLwA4rM?si=NZvHhBS_fOPgGl9A&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<a class = "see-more-button" target="_blank" href = "https://www.youtube.com/channel/UChpKl3waLmccNeYH9LGYjUQ"> <!--See more button that leads users to Luafey's youtube channel-->
SEE MORE
</a>
</section>
<section id = "newsletter"> <!--Newsletter section to allow users to sign up for newsletter-->
<h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
<form id = "newsletter-form"> <!--Newsletter form for users to fill in their information and submit-->
<input type="email" name="email" class="email" placeholder="YOUR EMAIL ADDRESS" required>
<input type="submit" value="SUBMIT" class="submit">
</form>
<div id = "submitted-newsletter-form"> <!--Submitted message that appears after user has filled in the newsletter popup form-->
<p>Welcome to the Laufey Communtiy!</p>
</div>
</section>
<section id = "newsletter-popup"> <!--Newsletter popup that appears when the website loads-->
<button id="close-popup-button" onclick = "CloseNewsletter()">x</button> <!--Close button that closes the popup-->
<h2 id = "newsletter-h2">SUBSCRIBE TO OUR NEWSLETTER</h2>
<form id = "newsletter-popup-form">
<input type="email" name="email" class="email" placeholder="YOUR EMAIL ADDRESS" required>
<input type="submit" value="SUBMIT" class="submit">
</form>
<div id = "submitted-popup-form"> <!--Submitted message that appears after user has filled in the newsletter popup form-->
<p>Welcome to the Laufey Communtiy!</p>
</div>
</section>
</main>
<footer id = "footer-container"> <!--Footer section that includes copyright, footer buttons and social media buttons-->
<a id = "footer-logo" href="index.html">LAUFEY</a>
<p id = "copyright">Copyright © 2023</p>
<ul id = "footer-socialmedia-buttons">
<li><a href="https://www.tiktok.com/@laufey?lang=en" target="_blank"><img src="images/socialmedia/tiktok.png" alt="TikTok"></a></li>
<li><a href="https://www.facebook.com/laufeymusic/" target="_blank"><img src="images/socialmedia/facebook.png" alt="Facebook"></a></li>
<li><a href="https://twitter.com/laufey?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="images/socialmedia/twitter.png" alt="Twitter"></a></li>
<li><a href="https://www.instagram.com/laufey/?hl=en" target="_blank"><img src="images/socialmedia/instagram.png" alt="Instagram"></a></li>
<li><a href="https://www.youtube.com/channel/UChpKl3waLmccNeYH9LGYjUQ" target="_blank"><img src="images/socialmedia/youtube.png" alt="Youtube"></a></li>
<li><a href="https://open.spotify.com/artist/7gW0r5CkdEUMm42w9XpyZO" target="_blank"><img src="images/socialmedia/spotify.png" alt="Spotify"></a></li>
<li><a href="https://music.apple.com/us/artist/laufey/1504424880" target="_blank"><img src="images/socialmedia/applemusic.png" alt="Apple Music"></a></li>
</ul>
<ul id = "footer-buttons">
<li><a href="html/tour.html">Tour</a></li>
<li><a href="html/music.html">Music</a></li>
<li><a href="html/merch.html">Merch</a></li>
<li><a href="html/about.html">About</a></li>
<li><a href="html/contact.html">Contact</a></li>
</ul>
</footer>
<script src="js/main.js"></script> <!--Javascript file link-->
<script src="js/home.js"></script>
</body>
</html>