Music-Instruments-Store/store.html at main · imyatendra32/Music-Instruments-Store · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Musicon Store</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <header>
      <section class="container">
        <h1 class="branding">Musicon</h1>

        <nav>
          <ul class="navbar">
            <li><a href="index.html">Home</a></li>
            <li class="current"><a href="store.html">Store</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </section>
    </header>

    <article id="showcase">
      <section class="container">
        <article class="instrument">
          <img
            class="image"
            src="https://content.codecademy.com/courses/learn-handlebars/musicon/electronic-keyboard.png"
            alt="Electronic Keyboard"
          />
          <section class="details">
            <h2 class="name">Electronic Keyboard</h2>
            <p class="description">
              A piano welcomed to the 21th century. Pianists celebrate the
              compact form factor and the diversity of synthesized rhythms all
              in one masterful musical machine.
            </p>
            <p class="price"><del>Price: $1,999.00</del></p>
            <p class="sale">On Sale! $1,699.89</p>
          </section>
        </article>

        <article class="instrument">
          <img
            class="image"
            src="https://content.codecademy.com/courses/learn-handlebars/musicon/electric-guitar.png"
            alt="Electric Guitar"
          />
          <section class="details">
            <h2 class="name">Electric Guitar</h2>
            <p class="description">
              Join the legends of the '50s and '60s when the marriage of guitar
              and electricity created the most influential instrument of a
              generation. Note: picks sold separately.
            </p>
            <p class="price">Price: $599.99</p>
          </section>
        </article>

        <article class="instrument">
          <img
            class="image"
            src="https://content.codecademy.com/courses/learn-handlebars/musicon/bass-guitar.png"
            alt="Bass Guitar"
          />
          <section class="details">
            <h2 class="name">Bass Guitar</h2>
            <p class="description">
              Experience the embodiment of funkadelic frequencies that is the
              bass guitar. Let the deep low notes of the bass guitar resonate
              with heartbeats everywhere.
            </p>
            <p class="price">Price: $624.99</p>
          </section>
        </article>

        <article class="instrument">
          <img
            class="image"
            src="https://content.codecademy.com/courses/learn-handlebars/musicon/drum-kit.png"
            alt="Drum Kit"
          />
          <section class="details">
            <h2 class="name">Drum Kit</h2>
            <p class="description">
              Ever thought, "one instrument isn't enough?" Find an answer in the
              Drum Kit. Coordinate a collection of drums and cymbals to dictate
              the rhythm of musical masterpiece.
            </p>
            <p class="price"><del>Price: $649.00</del></p>
            <p class="sale">On Sale!</p>
            <p class="deal">With Deal: $349.00</p>
          </section>
        </article>
      </section>
    </article>

    <footer>
      <p>&copy; Musicon 2018</p>
    </footer>

    <!-- your JS (context/Handlebars will use this later) -->
    <script src="script.js"></script>
  </body>
</html>