YourSounds/Instruments.html at main · ArhamNotSheikh/YourSounds · 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
89
90
91
<!DOCTYPE html>
<html>
<head>
    <Title>YourSounds-Instruments</Title>
    <link rel="stylesheet" href=Home.css >
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
    <body>
      <!-- NAVIGATION -->
  <div id="Navigation">
    <a href="Home.html"><button>Home</button></a>

    <a href="About.html"><button>About</button></a>

    <a href="mysounds.html"><button>My-Sounds</button></a>

    <a href="Instruments.html"><button>Instruments</button></a>

    <a href="HowToUse.html"><button>How to use</button></a>

    <div id="signups">
      <a href="Login.html"><button id="loginBtnNav">Log in</button></a>

     <a href="Signup.html"> <button id="signupBtnNav">Sign up</button></a>

     <button id="logoutBtnNav" style="display:none;">Log out</button>
    </div>
  </div>

  <h1 id="title-fixed">YourSounds</h1>

  <div id="instrument-container">

    <div class="instrument-card">
        <img src="Images/piano.jpg" alt="Piano">
        <h2>Piano</h2>
        <p>The piano produces warm, expressive tones that can shift from gentle and emotional to powerful and dramatic.
        Its wide range and ability to play melody and harmony together make it one of the most versatile instruments in music.</p>
        <a href="play.html"><button id="playBtn">Play</button></a>

    </div>

    <div class="instrument-card">
        <img src="Images/Kaspar-40-inch-guitar-k307sce.webp" alt="Guitar">
        <h2>Guitar</h2>
        <p>The guitar blends rhythm and melody effortlessly, offering bright strums, soft fingerpicking, and energetic riffs.
        Its sound adapts to almost any genre, giving it a unique emotional quality shaped entirely by a player's touch.</p>
        <a href="play.html"><button id="playBtn">Play</button></a>

    </div>

    <div class="instrument-card">
        <img src="Images/violin.jpg" alt="Violin">
        <h2>Violin</h2>
        <p>The violin's voice-like tone gives it an emotional, singing quality that stands out in both classical and modern music.
        Its ability to move smoothly between soft, delicate notes and intense, dramatic highs makes it deeply expressive.</p>
        <a href="play.html"><button id="playBtn">Play</button></a>

    </div>

    <div class="instrument-card">
        <img src="Images/Flute.jpg" alt="Flute">
        <h2>Flute</h2>
        <p>The flute creates light, airy tones that feel smooth, calm, and breath-like.
        Its clean sound floats above other instruments, bringing a sense of clarity and peacefulness to melodies.</p>
        <a href="play.html"><button id="playBtn">Play</button></a>

    </div>

    <div class="instrument-card">
        <img src="Images/synth.jpg" alt="Synth">
        <h2>Synth</h2>
        <p>The synthesizer shapes sound electronically, allowing it to create anything from warm pads to futuristic textures.
        Its flexibility makes it essential in electronic, pop, ambient, and modern cinematic music.</p>
        <a href="play.html"><button id="playBtn">Play</button></a>

    </div>

</div>


    <script src="instruments.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="nav.js"></script>

    </body>

</html>