-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathinstruction.html
115 lines (96 loc) · 4.49 KB
/
instruction.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="assets\css\instruction.css">
<title>Document</title>
</head>
<body>
<section class="hero">
<div class="hero-body">
<button class="button is-black" id="homeButton">Home</button>
<p class="title" id="text">
Instructions
</p>
</div>
</section>
<div class="container">
<div class="columns">
<div class="column is-half">
<img src="https://guitargearfinder.com/wp-content/uploads/2019/12/guitar-chord-diagram-strings.jpg">
</div>
<div class="column">
<div class="notification">
<p class="is-size-5">
<h4 class="title is-4">Verticle Lines</h4>
When you read a guitar chord diagram, it’s showing you your guitar from a sideways point of view. The vertical lines represent the strings on your guitar. The far-left line represents the thickest string on your guitar (low E) and the far-right line represents the thinnest string on your guitar (high E).
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-half">
<img src="https://guitargearfinder.com/wp-content/uploads/2019/12/guitar-chord-diagram-frets.jpg">
</div>
<div class="column">
<div class="notification">
<p class="is-size-5">
<h4 class="title is-4">Horizontal Lines</h4>
Horizontal lines represent the frets on your guitar with the thickest top line representing the guitar nut.
In the near photo, you should be able to see how the frets match up to the lines in the diagram.
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-half">
<img src="https://guitargearfinder.com/wp-content/uploads/2019/12/guitar-chord-diagram-black-dots.jpg">
</div>
<div class="column">
<div class="notification">
<p class="is-size-5">
<h4 class="title is-4">Numbers</h4>
The numbers on the black dots or below the chord diagram tell us which fingers to use to play the notes.
sometimes the numbers are shown on the black dots, sometimes they’re shown below the diagram, and sometimes they’re not shown at all. If a diagram doesn’t show you any numbers, you should place your fingers wherever they feel comfortable to play the chord.
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-half">
<img src="https://guitargearfinder.com/wp-content/uploads/2019/12/guitar-chord-diagram-numbers.jpg">
</div>
<div class="column">
<div class="notification">
<p class="is-size-5">
<h4 class="title is-4">Black Dots</h4>
The black dots show you where to place your fingers on the guitar fretboard. The first dot is on the first fret on the second (B) string. The second dot is on the second fret on the fourth (D) string. The third dot is on the third fret on the fifth (A) string. The diagram is telling us we need to use three fingers to play this chord.
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-half">
<img src="https://guitarlessons-com.s3.amazonaws.com/media/blog/BGQS-finger-numbers.png">
</div>
<div class="column">
<div class="notification">
<p class="is-size-5">
<h4 class="title is-4">Fingers</h4>
The cartoon hand in the picture is showing us how we number the fingers on our fretting hand. <br>
Below is our lead-guitarist, meet Johnny ROCK-it..
</p>
<img src="https://image.freepik.com/free-vector/rockstar-guy-playing-guitar-vector-illustration_460848-6792.jpg">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="assets\javascript\instruction.js"></script>
</body>
<footer>Chord-Base</footer>
</html>