How-To-Play/index.html at master · DusVen44/How-To-Play · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Play</title>
    <link rel="stylesheet" type="text/css" href="main.css" id="style">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@600&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/site.webmanifest">
</head>

<body>

<!--Below are the background images for the different themes-->
    <div>
        <img src="images/purple-guitar1.png" class="guitar-purple">
        <img src="images/blue-guitar1.png" class="guitar-blue">
        <img src="images/drums-red1.png" class="drums-red">
        <img src="images/drums-green1.png" class="drums-green">
        <img src="images/guitar-neck.png" class="guitar-neck">
    </div>

    <main>
    <header>
        <img src="images/title-1.png" class="title">
        <h1 class="title2">How to Play</h1>
    </header>

    <section class="intro-container">
        <h2>Welcome to How to Play! Here's how it works...</h2><br>
        <p class="intro">Type in an artist and/or a song, select and instrument, and smash that search button.
                         The 1st set of results will be links to the sheet music of what you searched for. The link
                         will take you to the sheet music on Songsterr.com. Here is where you can change the instrument,
                         and the notes will change accordingly. The 2nd set of results will provide the lyrics to the
                         song or songs related to your search. The 3rd set will be the video tutorials. These are links
                         to YouTube videos showing you how to play the song on the selected instrument. An example is
                         shown below. Rock on!!
        </p>
    </section>

    <form>
        <label for="artist-song">Artist and/or Song:</label>
        <input type="text" name="artitst-song" id="artist-song" value="Pearl Jam Alive" required><br>

        <label for="instrument">Instrument:</label>
        <select name="instrument" id="instrument">
            <option value="guitar" class="option">Guitar</option>
            <option value="bass" class="option">Bass</option>
            <option value="drums" class="option">Drums</option>
        </select><br>

        <input type="submit" value="Search" class="button">
    </form>

    <section class="results">

        <section class="sheet-music">
            <h1>Sheet Music</h1>
                <div class="sheet-music-results-container">
            </div>
        </section>

        <section class="lyrics">
            <h1>Lyrics</h1>
            <div class="lyrics-container">
            </div>
        </section>

        <section class="videos">
            <h1>Video Tutorials</h1>
            <div class="videos-container">
            </div>
        </section>

    </section>
    </main>

    <script src="https://code.jquery.com/jquery-3.5.0.js"
    integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
    crossorigin="anonymous"></script>
    <script src="action.js"></script>

</body>
</html>