-
Notifications
You must be signed in to change notification settings - Fork 0
/
music.html
119 lines (99 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Henry's Music Page!</title>
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/printstyle.css" media="print">
</head>
<body>
<div id="main">
<!-- This HTML5 header element will contain a picture, title of the page, and the nav element -->
<header>
<figure>
<img src="images/music.jpg" alt="Me playing piano." title="Picture of me playing piano."
width="600" height="450"/>
<figcaption>Picture of my keyboard!</figcaption>
</figure>
<h1>Henry's Music Page</h1>
<!-- This HTML5 nav element will contain the nav bar -->
<nav>
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="academic.html">School</a> </li>
<li><a href="professional.html">Work</a> </li>
<li class="dropdown">
<a href="#" class="active">Play</a>
<ul>
<li><a href="hiking.html">Hiking</a></li>
<li><a href="music.html" class="active">Music</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Apps</a>
<ul>
<li><a href="weather.html">Weather</a></li>
<li><a href="stocks.html">Stocks</a></li>
<li><a href="covid.html">Covid</a></li>
<li><a href="todo.html">To-Do</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</li>
</ul>
</nav>
<hr>
</header>
<!-- This HTML5 section element will contain my article about Joplin -->
<section>
<h2>Music</h2>
<article class="with-aside">
<h3>Scott Joplin - The King of Ragtime</h3>
<p>
When I was in college, I became interested in ragtime piano, and quickly became a fan of the genre. I especially liked the works of
Scott Joplin (1868-1917), who is largely considered the greatest ragtime composer of all time. Most people will recognize his famous
pieces such as "The Entertainer" and "Maple Leaf Rag", but Joplin also composed over 100 other original ragtime pieces, including an
opera! Check out the links to the right to learn more about this great composer. Below are some of my recordings of my favorite Joplin
rags. Enjoy!
</p>
<!-- This HTML5 aside element will articles about Joplin -->
<aside>
<h4>Articles</h4>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Scott_Joplin" target ="_blank">Scott Joplin Wikipedia Page</a></li>
<li><a href="https://www.scottjoplin.org/joplin-biography.html" target ="_blank">ScottJoplin.org - Biography</a></li>
</ul>
</aside>
</article>
<ul>
<li><a href="https://youtu.be/7cFkae0j_Ns" target ="_blank">The Entertainer</a></li>
<li><a href="https://youtu.be/0B04--XmZiE" target ="_blank">Maple Leaf Rag</a></li>
<li><a href="https://youtu.be/BGDqO7mVp-Y" target ="_blank">Fig Leaf Rag</a></li>
<li><a href="https://youtu.be/CF-mBeT_ZaQ" target ="_blank">Elite Syncopations</a></li>
<li><a href="https://youtu.be/LVPrKl5Y9p8" target ="_blank">Bethena</a></li>
<li><a href="https://youtu.be/fjoUqVgs0RA" target ="_blank">Something Doing</a></li>
<li><a href="https://youtu.be/Ps15671_EiQ" target ="_blank">Pine Apple Rag</a></li>
<li><a href="https://youtu.be/5Fp2zdAPKyY" target ="_blank">The Chrysanthemum</a></li>
<li><a href="https://youtu.be/T22xXlPlleI" target ="_blank">Magnetic Rag</a></li>
<li><a href="https://youtu.be/W_j5aSnoqbQ" target ="_blank">Palm Leaf Rag</a></li>
<li><a href="https://youtu.be/wtaEezWURNo" target ="_blank">Solace</a></li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wtaEezWURNo" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<!-- This HTML5 footer element will contain my name, email, and last updated date, as well as printed from line -->
<footer>
<div id="footer-left"><p>© 2020 Henry Choy</p></div>
<div id="footer-center"><p><a href="mailto:[email protected]">[email protected]</a></p></div>
<div id="footer-right"><p id="last-updated"></p></div>
<p class="printed-from">Printed from http://henrychoy.com/</p>
</footer>
</div>
<br>
<br>
<br>
<script>
// last updated in footer
document.getElementById("last-updated").textContent = "Last Updated: " + document.lastModified;
</script>
</body>
</html>