Equalizer/index.html at main · naskriK/Equalizer · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Equalizer</title>
    <meta
      name="description"
      content="A system audio equalizer specifically designed for Android and iOS. Freely tune the way your music sounds with a professional grade parametric EQ & volume mixer. Control bass, mids, treble, gain control, reverb, and more! "
    />
    <meta
      name="keywords"
      content="Equalizer, bst in market, music, extraordinary, premium"
    />

    <link rel="stylesheet" href="./src/style/style.css" />
  </head>
  <body>
    <div class="content">
      <div class="wrapper">
        <header class="header">
          <a href="#" class="logo">
            <img
              src="./src/assets/logo.svg"
              alt="equalizer"
              class="logo__image"
            />
          </a>
        </header>
      </div>
      <main class="main">
        <div class="wrapper wrapper--hero">
          <section class="hero">
            <h1 class="heading__primary">
              We make your music sound extraordinary.
            </h1>
            <p class="description">
              A system audio equalizer specifically designed for Android and
              iOS. Freely tune the way your music sounds with a professional
              grade parametric EQ & volume mixer. Control bass, mids, treble,
              gain control, reverb, and more!
            </p>
          </section>
        </div>

        <div class="wrapper">
          <section class="order">
            <img
              src="./src/assets/illustration-app.png"
              alt="equalizer app"
              class="order__image"
            />
            <div class="order__card">
              <h2 class="order__title">Premium EQ</h2>
              <p class="order__description">
                Get expert-level control with a robust equalizer, volume mixer,
                and spatial audio. Take your listening experience to a whole new
                level and access all our incredible features!
              </p>
              <div class="order__price-container">
                <p class="order__price">
                  <strong>$4</strong>
                </p>
                <span class="order__per"> / month </span>
              </div>

              <div class="order__actions">
                <button class="btn btn--ios">
                  <img
                    src="./src/assets/icon-apple.svg"
                    alt="Apple"
                    class="btn__image"
                  />
                  <span>iOS Download</span>
                </button>
                <button class="btn btn--android">
                  <img
                    src="./src/assets/icon-android.svg"
                    alt="Android"
                    class="btn__image"
                  />
                  <span>Android Download</span>
                </button>
              </div>
            </div>
          </section>
        </div>
      </main>
      <div class="wrapper">
        <footer class="footer">
          <a href="#" class="logo">
            <img
              src="./src/assets/logo.svg"
              alt="equalizer"
              class="logo__image"
            />
          </a>
          <p class="footer__content">
            All rights reserved © Equalizer 2021 Have any problems? Contact us
            via social media or email us at
            <a href="mailto:equalizer@example.com" class="footer__mail">
              equalizer@example.com
            </a>
          </p>
          <ul class="footer__links">
            <li class="footer__item">
              <a href="#" class="footer__link">
                <img
                  src="./src/assets/icon-facebook.svg"
                  alt="Facebook"
                  class="footer__icon"
                />
              </a>
            </li>
            <li class="footer__item">
              <a href="#" class="footer__link">
                <img
                  src="./src/assets/icon-instagram.svg"
                  alt="Instagram"
                  class="footer__icon"
                />
              </a>
            </li>
            <li class="footer__item">
              <a href="#" class="footer__link">
                <img
                  src="./src/assets/icon-twitter.svg"
                  alt="Twitter"
                  class="footer__icon"
                />
              </a>
            </li>
          </ul>
        </footer>
      </div>
      <img src="./src/assets/bg-pattern-1.svg" alt="" class="decoration" />
    </div>
  </body>
</html>