stackblitz-html-image-gallery-unsolved/index.html at main · devslopes/stackblitz-html-image-gallery-unsolved · 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" />

    <!-- TODO: add relative path to connect the scripts.js file -->
    <script src="" defer></script>

    <!-- TODO: add relative path to connect the layout.css file -->
    <link rel="stylesheet" href="" />

    <!-- TODO: add relative path to connect the image-lists.css file -->
    <link rel="stylesheet" href="" />

    <!-- Google custom fonts connection, don't edit these lines -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <!-- End of Google custom fonts connection -->

    <title>Digital Art Gallery</title>
  </head>
  <body>
    <div class="bg"></div>
    <header>
      <nav>
        <ul class="top-nav" id="topNav">
          <!-- TODO: add relative path to nature.html file -->
          <li><a href="">Nature</a></li>

          <!-- TODO: add relative path to space.html file -->
          <li><a href="">Space</a></li>

          <!-- TODO: add relative path to modern-design.html file -->
          <li><a href="">Modern Design</a></li>

          <!-- TODO: add relative path to plants.html file -->
          <li><a href="">Plants</a></li>
        </ul>
        <button id="nav-toggler" aria-expanded="false">&#9783;</button>
      </nav>
    </header>
    <main>
      <h1>Digital Art Gallery</h1>
      <p>
        Welcome to our digital art gallery, where creativity comes to life in
        pixel-perfect form. Immerse yourself in a virtual world filled with
        breathtaking masterpieces from talented artists around the globe. From
        mesmerizing abstract compositions to stunning landscapes and
        thought-provoking portraits, our curated collection showcases the
        diversity of digital art. Explore the captivating works, effortlessly
        navigating through the intuitive interface that enhances your viewing
        experience. Discover the meticulous attention to detail, vibrant colors,
        and innovative techniques that push the boundaries of traditional art
        forms.
      </p>
      <section class="gallery-items">
        <!-- ITEM 1 (Modern Design) -->
        <article class="item">
          <h2>Modern Design</h2>
          <div class="img-wrapper">
            <!-- TODO: add absolute path to design-image.jpg file -->
            <img src="" alt="Modern Design Image" />
          </div>
          <!-- TODO: add relative path to modern-design.html file -->
          <a href="pages/modern-design.html" class="details"
            >Modern Design Details</a
          >
        </article>
        <!-- ITEM 2 (Plants) -->
        <article class="item">
          <h2>Plants</h2>
          <div class="img-wrapper">
            <!-- TODO: add absolute path to plant-image.jpg file -->
            <img src="" alt="Plants image" />
          </div>
          <!-- TODO: add relative path to plants.html file -->
          <a href="" class="details">Plants Details</a>
        </article>
        <!-- ITEM 3 (Space) -->
        <article class="item">
          <h2>Space</h2>
          <div class="img-wrapper">
            <!-- TODO: add absolute path to space-image.jpg file -->
            <img src="" alt="Space image" />
          </div>
          <!-- TODO: add relative path to space.html file -->
          <a href="" class="details">Space Details</a>
        </article>
        <!-- ITEM 4 (Nature) -->
        <article class="item">
          <h2>Nature</h2>
          <div class="img-wrapper">
            <!-- TODO: add absolute path to nature-image.jpg file -->
            <img src="" alt="Nature Image" />
          </div>
          <!-- TODO: add relative path to nature.html file -->
          <a href="" class="details">Nature Details</a>
        </article>
      </section>
    </main>
    <footer></footer>
  </body>
</html>