Plugin-Review-Website/reviews.html at main · tumerf/Plugin-Review-Website · 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Reviews | Plugin Review</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body class="bg-dark text-light">
  <nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top border-bottom border-secondary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="index.html">
        <img src="images/favicon.svg" alt="Logo" width="30" height="30" class="d-inline-block align-text-top me-2">
        Plugin Review
      </a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="reviews.html">Reviews</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about-us.html">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>

        <form class="d-flex align-items-center" role="search">
          <input class="form-control me-2 form-control-sm bg-dark text-light border-secondary" type="search"
            placeholder="Search VST..." aria-label="Search" />
          <button class="btn btn-outline-warning btn-sm me-3" type="submit">
            <i class="fa-solid fa-search"></i>
          </button>

          <div class="d-flex align-items-center">
            <a href="https://www.instagram.com/pluginreview_demo" target="_blank" class="text-secondary me-3"><i
                class="fa-brands fa-instagram fa-lg"></i></a>
            <a href="https://www.youtube.com/@pluginreview_demo" target="_blank" class="text-secondary"><i
                class="fa-brands fa-youtube fa-lg"></i></a>
          </div>
        </form>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <div class="text-center py-5">
      <h1 class="display-5 fw-bold text-white">Plugin Catalog</h1>
      <p class="lead text-secondary">
        Browse our extensive library of VST reviews.
      </p>
    </div>

    <div class="row mb-4 justify-content-center">
      <div class="col-auto">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-outline-warning active filter-btn" data-category="all">
            All
          </button>
          <button type="button" class="btn btn-outline-warning filter-btn" data-category="synth">
            Synths
          </button>
          <button type="button" class="btn btn-outline-warning filter-btn" data-category="effect">
            Effects
          </button>
          <button type="button" class="btn btn-outline-warning filter-btn" data-category="free">
            Free Stuff
          </button>
        </div>
      </div>
    </div>

    <div class="row" id="plugin-container">
      <div class="col-md-4 mb-4 plugin-item" data-category="synth">
        <div class="card bg-secondary bg-opacity-10 border-secondary text-light h-100">
          <div class="card-body">
            <span class="badge bg-primary mb-2">Synth</span>
            <h5 class="card-title">Xfer Serum</h5>
            <p class="card-text text-secondary small">
              Advanced wavetable synthesizer.
            </p>
            <a href="xfer-serum.html" class="btn btn-sm btn-outline-light stretched-link">Read More</a>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-4 plugin-item" data-category="effect">
        <div class="card bg-secondary bg-opacity-10 border-secondary text-light h-100">
          <div class="card-body">
            <span class="badge bg-success mb-2">Effect</span>
            <h5 class="card-title">FabFilter Pro-Q 3</h5>
            <p class="card-text text-secondary small">
              Top-tier equalizer plugin.
            </p>
            <a href="fabfilter-pro-q3.html" class="btn btn-sm btn-outline-light stretched-link">Read More</a>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-4 plugin-item" data-category="free synth">
        <div class="card bg-secondary bg-opacity-10 border-secondary text-light h-100">
          <div class="card-body">
            <span class="badge bg-warning text-dark mb-2">Free</span>
            <h5 class="card-title">Vital</h5>
            <p class="card-text text-secondary small">
              Spectral warping wavetable synth.
            </p>
            <a href="vital.html" class="btn btn-sm btn-outline-light stretched-link">Read More</a>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-4 plugin-item" data-category="effect">
        <div class="card bg-secondary bg-opacity-10 border-secondary text-light h-100">
          <div class="card-body">
            <span class="badge bg-success mb-2">Effect</span>
            <h5 class="card-title">Valhalla Room</h5>
            <p class="card-text text-secondary small">
              Versatile algorithmic reverb.
            </p>
            <a href="valhalla-room.html" class="btn btn-sm btn-outline-light stretched-link">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4 plugin-item" data-category="free effect">
        <div class="card bg-secondary bg-opacity-10 border-secondary text-light h-100">
          <div class="card-body">
            <span class="badge bg-warning text-dark mb-2">Free</span>
            <h5 class="card-title">Xfer OTT</h5>
            <p class="card-text text-secondary small">
              Multiband upwards/downwards compressor.
            </p>
            <a href="xfer-ott.html" class="btn btn-sm btn-outline-light stretched-link">Read More</a>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-4 plugin-item" data-category="effect">
        <div class="card bg-secondary bg-opacity-10 border-secondary text-light h-100">
          <div class="card-body">
            <span class="badge bg-success mb-2">Effect</span>
            <h5 class="card-title">RC-20 Retro Color</h5>
            <p class="card-text text-secondary small">
              Creative FX plugin for vintage color.
            </p>
            <a href="rc20-retro-color.html" class="btn btn-sm btn-outline-light stretched-link">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-black text-secondary py-4 mt-5 border-top border-secondary">
    <div class="container text-center">
      <p class="mb-0">
        &copy; 2025 Plugin Review.
        <br>
        <small class="text-secondary opacity-75">All product images and trademarks belong to their respective owners.
          Used for educational purposes only.</small>
      </p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>