-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (135 loc) · 5.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab 2 Part 1</title>
<meta name="description" content="Music Club Meeting 2 Minutes">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header id="header">
<h1>Music Club Meeting Minutes</h1>
<h2>Today's topic: Jazz</h2>
<h3>Date: Wed, Apr 10</h3>
<nav>
<ul>
<li class="navlist"><a href="#header">Header</a></li>
<li class="navlist"><a href="#main">Main Part</a></li>
<li class="navlist"><a href="#footer">Footer</a></li>
</ul>
</nav>
</header>
<main id="main">
<section>
<h4>Attendance</h4>
<ul id="attendance">
<li class="attendancelist"><strong>Dhruv</strong></li>
<li class="attendancelist"><strong>Ryan</strong></li>
<li class="attendancelist"><strong>Brandon</strong></li>
<li class="attendancelist"><strong>Pranav</strong></li>
</ul>
<hr>
<h4><em>Agenda</em></h4>
<ol>
<li><i>Favorite jazz musician</i></li>
<li><i>Favorite jazz subgenre</i></li>
<li><i>Practice jazz soloing and trading 4's</i></li>
</ol>
<hr>
<div id = "lastmeeting">
<div>
<h4>Unfinished Business from Last Meeting</h4>
</div>
<div>
<p id="lastWeek">Last week our meeting was about rock and roll. We went over our favorite rock and roll bands, but not our favorite songs by those bands. If time permits, we will revisit this.</p>
</div>
<div>
<p> There is a lot to learn from last week's meeting about rock and roll that can be applied to this week's jazz meeting. As styles evolve they tend to draw from each other so keep an ear out for some cool overlaps.</p>
</div>
</div>
<br>
<br>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Some interesting jazz facts</a>
<div class = "comments">
<h4>Miscellaneous Comments</h4>
<ul">
<li><b>Ryan</b>: Due to his influence and technical ability, Louis Armstrong was a better jazz musician than Dizzy Gillespie</li>
<li><b>Brandon</b>: Jazz music is the best genre because of the amount of freedom it gives musicians to experiment with different techniques and sounds</li>
<li><b>Pranav</b>: Jazz has declined as a genre partially due to the modern preference for streaming music rather than live performance, which is fundamental to the identity of jazz</li>
</ul>
</div>
</section>
</main>
<div class = "box">
<img src="LouisArmstrong.jpeg" alt="Louis Armstrong">
<p>This is Louis Armstrong, arguably the greatest jazz musician ever. A fun fact is that not only was he an incredible trumpet player, but he also had a very distinct gravelly voice that made his music very unique.</p>
<br>
<details>
<summary>About the featured artist</summary>
<p>Louis Armstrong was pretty lit and made good music. Isn't that neat.</p>
</details>
</div>
<br>
<br>
<div id = "instruments">
<div class = "instrument">
<h3>Drums give the music structure</h3>
</div>
<div class = "instrument">
<h3>Bass gives the ensembly rhythmn</h3>
</div>
<div class = "instrument">
<h3>Wind instruments provide melody and harmony</h3>
</div>
</div>
<br>
<br>
<div class="form">
<form>
<fieldset>
<legend>Subscription Form for Music Club Newsletter</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="birthdate">Date of Birth:</label>
<input type="date" id="birthdate" name="birthdate"><br><br>
<label for="subscribe">Subscribe to newsletter</label>
<input type="checkbox" id="subscribe" name="subscribe"><br><br>
<label for="gender_male">Male</label>
<input type="radio" id="gender_male" name="gender" value="male">
<label for="gender_female">Female</label>
<input type="radio" id="gender_female" name="gender" value="female"><br><br>
<label for="info">Tell us about yourself and what you like about jazz:</label>
<textarea id="info" name="info"></textarea><br><br>
<label for="section">Choose your ensemble section from the list:</label>
<input list="sections" id="section" name="section">
<datalist id="sections">
<option value="Rhythmn">
<option value="Woodwind">
<option value="Brass">
</datalist><br><br>
<label for="artist">Choose your favorite artist:</label>
<select id="artist" name="artist">
<option value="armstrong">Louis Armstrong</option>
<option value="gillespie">Dizzy Gillespie</option>
<option value="coltrane">John Coltrane</option>
<option value="davis">Miles Davis</option>
</select><br><br>
<button type="submit">Submit</button>
</fieldset>
</form>
</div>
<br>
<div>
<video controls>
<source src="CSE110Lab2Vid.mp4" type="video/mp4">
</video>
<br>
<audio controls>
<source src="CSE110Lab2Vid.mp4" type="audio/mp4">
</audio>
</div>
<footer id="footer">
<h3>Hope to see you at the next meeting.</h3>
</footer>
</body>
</html>