-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusic.html
225 lines (210 loc) · 12.6 KB
/
music.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Music</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Web Page</h1>
<h5>This web page was made for me to talk a bit about myself.</h5>
</header>
<nav>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link" href="index.html">
<svg class="bi bi-house-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.293l6 6V13.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z" clip-rule="evenodd"/>
</svg>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="games.html">
<svg class="bi bi-controller" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.119 2.693c.904.19 1.75.495 2.235.98.407.408.779 1.05 1.094 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.815-.059 1.602-.328 2.21a1.42 1.42 0 01-1.445.83c-.636-.067-1.115-.394-1.513-.773a11.307 11.307 0 01-.739-.809c-.126-.147-.25-.291-.368-.422-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.422-.243.283-.494.576-.739.81-.398.378-.877.705-1.513.772a1.42 1.42 0 01-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772.486-.485 1.331-.79 2.235-.98.932-.196 2.03-.292 3.119-.292 1.089 0 2.187.096 3.119.292zm-6.032.979c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 00-.748 2.295 12.351 12.351 0 00-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 00.426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.505C4.861 9.97 5.978 9.026 8 9.026s3.139.943 3.965 1.855c.164.182.307.35.44.505.214.25.403.472.615.674.318.303.601.468.929.503a.42.42 0 00.426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 00-.339-2.406 13.753 13.753 0 00-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z" clip-rule="evenodd"/>
<path d="M11.5 6.026a.5.5 0 11-1 0 .5.5 0 011 0zm-1 1a.5.5 0 11-1 0 .5.5 0 011 0zm2 0a.5.5 0 11-1 0 .5.5 0 011 0zm-1 1a.5.5 0 11-1 0 .5.5 0 011 0zm-7-2.5h1v3h-1v-3z"/>
<path d="M3.5 6.526h3v1h-3v-1zM3.051 3.26a.5.5 0 01.354-.613l1.932-.518a.5.5 0 01.258.966l-1.932.518a.5.5 0 01-.612-.354zm9.976 0a.5.5 0 00-.353-.613l-1.932-.518a.5.5 0 10-.259.966l1.932.518a.5.5 0 00.612-.354z"/>
</svg>
Games
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="music.html">
<svg class="bi bi-music-player-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 2a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V2zm2 1a1 1 0 011-1h6a1 1 0 011 1v2.5a1 1 0 01-1 1H5a1 1 0 01-1-1V3zm7 8a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"/>
<circle cx="8" cy="11" r="1"/>
</svg>
Music
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">
<svg class="bi bi-at" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z" clip-rule="evenodd"/>
</svg>
Contact
</a>
</li>
</ul>
</nav>
<div class="container-fluid title">
<div class="row justify-content-center">
<h2>Some Music I Like</h2>
</div>
</div>
<div class="container-fluid title">
<div class="row justify-content-center">
<h3>Songs</h3>
</div>
</div>
<div class="container music">
<div class="row justify-content-center">
<table class="table table-dark table-striped">
<thead>
<tr>
<th></th>
<th>Song</th>
<th class="album">Album</th>
<th>Artist(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=d0eUMnJ5kTA&list=RDAMVMd0eUMnJ5kTA" target="_blank">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>Faded</td>
<td class="album">Different World</td>
<td>Alan Walker</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=mfEfCA8ZAzo&list=RDAMVMmfEfCA8ZAzo">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>Leaving</td>
<td class="album">Awake</td>
<td>ILLENIUM</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=V-KY9Z3WMi8&list=RDAMVMV-KY9Z3WMi8">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>End of Time</td>
<td class="album">End of Time</td>
<td>K-391, Alan Walker, Ahrix</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=kLxmFBNccSc&list=RDAMVMkLxmFBNccSc">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>Play</td>
<td class="album">Play</td>
<td>K-391, Alan Walker, Tungevaag</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=Qq4GfT52-Co&list=PLkcQFlrH90QioO7CokNnatpnutdSsBVQ0">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>start//end</td>
<td class="album">vertigo</td>
<td>EDEN</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=M0Y1ImXOfn8&list=RDAMVMM0Y1ImXOfn8">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>Almost nothing ("Death Stranding" Ending Song)</td>
<td class="album">Almost nothing ("Death Stranding" Ending Song)</td>
<td>Silent Poets, Okay Kaya</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=XJMc7V_hOZw&list=RDAMVMXJMc7V_hOZw">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>Asylums for the feeling feat. Leila Adu</td>
<td class="album">dawn</td>
<td>Silent Poets, Leila Adu</td>
</tr>
<tr>
<td>
<a href="https://music.youtube.com/watch?v=E3Vyt0Vs_90&list=RDAMVME3Vyt0Vs_90">
<img src="https://s.ytimg.com/yts/img/music/web/ytm_favicon_32-vfl2lNWut.png" alt="Icon">
</a>
</td>
<td>Monody (feat. Laura Brehm)</td>
<td class="album">Monody (feat. Laura Brehm)</td>
<td>TheFatRat</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid title">
<div class="row justify-content-center">
<h3>Favourite Artists</h3>
</div>
</div>
<div class="container-fluid artists">
<div class="row justify-content-lg-center">
<div class="col-xl-2 text-xl-left text-center">
<img src="images/ILLENIUM.jpg" class="align-self-start mr-3" alt="ILLENIUM">
</div>
<div class="col-xl-10 text-xl-left text-center">
<h2 class="mt-0">ILLENIUM</h2>
<p>
His real name is Nicholas Miller, he's a producer and DJ that produces dubstep and trap music
with a strong sentimentality and melody. I first listened to him on YouTube when I was starting
to like electronic music years ago. I still listen to his songs to this day and never get sick
of them.
</p>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-xl-2 text-xl-left text-center">
<img src="images/EDEN.jpg" class="align-self-start mr-3" alt="EDEN">
</div>
<div class="col-xl-10 text-xl-left text-center">
<h2 class="mt-0">EDEN</h2>
<p>
EDEN (real name Jonathon Ng) is an Irish singer. When I first listened to him his alias was
still "The Eden Project", which was discontinued in 2015, and his music had more of a dubstep
style to it. As years passed he went for a pop and indie style, but I never got bored of his
songs and still listen to him occasionally.
</p>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-xl-2 text-xl-left text-center">
<img src="images/AW.jpg" class="align-self-start mr-3" alt="Alan Walker">
</div>
<div class="col-xl-10 text-xl-left text-center">
<h2 class="mt-0">Alan Walker</h2>
<p>
Alan Walker is a DJ and producer from Norway. I found him first in the NCS channel with his song
"Fade", at that time I didn't really listen to his songs that much, but one day he released a
sung version of that song called "Faded" and I became his fan since I listened to it. I like the
way he mixes electronic with a very melodic style.
</p>
</div>
</div>
</div>
</body>
</html>