Molten Copper Search Results with Interactive Filter Rail

Loading…

Molten Copper Search Results with Interactive Filter Rail | GoSnippets

Source Code

1
2
3<section class="gs-stage">
4  <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
5  <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
6  <div class="gs-grid-overlay" aria-hidden="true"></div>
7  <div class="gs-card">
8    <div class="gs-card-inner">
9      <header class="gs-card-header">
10        <h1 class="text-center">Search Results</h1>
11      </header>
12      <div class="d-flex">
13        <aside class="gs-filter-rail">
14          <h2>Filter by Type</h2>
15          <ul class="list-unstyled">
16            <li>
17              <button class="btn btn-filter">Images</button>
18            </li>
19            <li>
20              <button class="btn btn-filter">Videos</button>
21            </li>
22            <li>
23              <button class="btn btn-filter">Articles</button>
24            </li>
25          </ul>
26        </aside>
27        <main class="gs-results-container">
28          <ul class="gs-results-list">
29            <li class="gs-result-item">
30              <div class="gs-result-type-icon">
31                <svg xmlns="http://www.w3.org/2000/svg" fill="none">
32                  <rect></rect>
33                  <line></line>
34                </svg>
35              </div>
36              <div class="gs-result-content">
37                <h3>Image Collection</h3>
38                <p>Capture the world through vibrant lenses. See the stunning visuals captured around you.</p>
39              </div>
40            </li>
41            <li class="gs-result-item">
42              <div class="gs-result-type-icon">
43                <svg xmlns="http://www.w3.org/2000/svg" fill="none">
44                  <circle></circle>
45                  <polygon></polygon>
46                </svg>
47              </div>
48              <div class="gs-result-content">
49                <h3>Latest Video</h3>
50                <p>Tune into the latest visual stories and immersive experiences curated just for you.</p>
51              </div>
52            </li>
53            <li class="gs-result-item">
54              <div class="gs-result-type-icon">
55                <svg xmlns="http://www.w3.org/2000/svg" fill="none">
56                  <path d="M19 21v-7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
57                  <path d="M9 7h6M12 3v4m0 0v2m0-6h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2"></path>
58                </svg>
59              </div>
60              <div class="gs-result-content">
61                <h3>Article Insight</h3>
62                <p>Dive deep into articles that provide insightful perspectives and knowledge.</p>
63              </div>
64            </li>
65          </ul>
66        </main>
67      </div>
68    </div>
69  </div>
70</section>

Molten Copper Search Results with Interactive Filter Rail

Source Code

More Other snippets

Comments(0)