-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (69 loc) · 3.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Clef Notes</title>
</head>
<body>
<script src="script.js"></script>
<div class="title">
<h1>CLEF NOTES</h1>
<h2>A BRIEF INTRODUCTION TO A FEW FAVORITE MUSICAL INSTRUMENTS</h2>
</div>
<p><!--- Brief introduction to the site ---> </p>
<div class="main">
<div class="image-on-left">
<img id="piano" src="./images/piano.jpeg" alt="Piano" onclick="playAudio('piano-sound')" />
<div class="text-box">
<h3>Piano</h3>
<p>A large keyboard musical instrument with a wooden case enclosing a soundboard and metal strings,
which are struck by hammers when the keys are depressed. The strings' vibration is stopped by dampers
when the keys are released and can be regulated for length and volume by two or three pedals.
</p>
</div>
</div>
<div class="image-on-right">
<div class="text-box">
<h3>Guitar</h3>
<p>A stringed musical instrument, with a fretted fingerboard, typically incurved sides, and six or twelve
strings, played by plucking or strumming with the fingers or a pick.
</p>
</div>
<img id="guitar" src="./images/guitar.jpeg" alt="Guitar" onclick="playAudio('guitar-sound')" />
</div>
<div class="image-on-left">
<img id="cello" src="./images/cello.jpeg" alt="Cello" onclick="playAudio('cello-sound')" />
<div class="text-box">
<h3>Cello</h3>
<p>A bass instrument of the violin family, held upright on the floor between the legs of the seated player.
</p>
</div>
</div>
<div class="image-on-right">
<div class="text-box">
<h3>Timpani</h3>
<p>A large drum shaped like a bowl, with a membrane adjustable for tension (and so pitch)
stretched across.
</p>
</div>
<img id="timpani" src="./images/timpani.jpeg" alt="Timpani" onclick="playAudio('timpani-sound')" />
</div>
<div class="image-on-left">
<img id="trumpet" src="./images/trumpet.jpeg" alt="Trumpet" onclick="playAudio('trumpet-sound')" />
<div class="text-box">
<h3>Trumpet</h3>
<p>A brass musical instrument with a flared bell and a bright, penetrating tone. The modern
instrument has the tubing looped to form a straight-sided coil, with three valves.
</p>
</div>
</div>
</div>
<div class="audio-clips">
<audio id="piano-sound" src="./audio/piano.mp3"></audio>
<audio id="guitar-sound" src="./audio/guitar.mp3"></audio>
<audio id="cello-sound" src="./audio/cello.mp3"></audio>
<audio id="timpani-sound" src="./audio/Timpani-sound-effect.mp3"></audio>
<audio id="trumpet-sound" src="./audio/Trumpet-sound.mp3"></audio>
</div>
</body>
</html>