web-dev/Gallery.html at main · eri-adepoju/web-dev · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Book Haven Bookstore - Gallery</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://kit.fontawesome.com/34c2d0a39f.js" crossorigin="anonymous"></script>
    <script type="module" src="shared.js"></script>
    <script type="module" src="cart.js"></script>
  </head>
  <body>
    <header>
      <nav>
        <div class="header-nav-left">
          <img
            src="images/logo.png"
            height="50"
            width="50"
            alt="Book Haven Bookstore Logo"
          />
          <h1>Book Haven Bookstore</h1>
          <p>Gallery</p>
        </div>
        <div class="header-nav-right">
          <a href="/index.html" aria-label="link to home page">Home</a>
          <a href="/About Us.html" aria-label="link to About Us page">About Us</a>
          <a href="/Gallery.html" aria-label="link to Gallery page">Gallery</a>
          <a href="/Events.html" aria-label="link to events page">Events</a>
        </div>
        <div class="burger-menu">
          <svg xmlns="http://www.w3.org/2000/svg" height="2.0em" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
          <div class="burger-menu-links">
            <a href="/index.html" aria-label="link to home page">Home</a>
            <a href="/About Us.html" aria-label="link to About Us page">About Us</a>
            <a href="/Gallery.html" aria-label="link to Gallery page">Gallery</a>
            <a href="/Events.html" aria-label="link to events page">Events</a>
            </div>
        </div>
      </nav>
      <button id="view-cart">View Cart</button>
    </header>
    <main>
      <dialog id="cart-dialog" class="cart-modal">
        <h1>Cart</h1>
        <div id="cart-table"></div>
        <div class="cart-buttons">
          <button class="clear-cart-button" id="clear-cart-button">Clear Cart</button>
          <button class="process-order-button" id ="process-order-button">Process Order</button>
        </div>
      </dialog>
      <h1>All Products</h1>
        <div class="table" aria-label="table">
          <div class="row" aria-label="row">
                <div class="cell" aria-label="cell">
                    <img src="images/Client3_Book1.png"
                    height="100"
                    width="150"alt="Brie Mine 4Ever, a book for cheese lovers">
                    <p>Brie Mine 4Ever, a book for cheese lovers</p>
                    <button class="add-to-cart" data-value="Brie Mine 4Ever">Add to cart</button>
                </div>
                <div class="cell" aria-label="cell">
                    <img src="images/Client3_Book2.png"
                    height="100"
                    width="150"alt="Glory Riders, a book about bikers">
                    <p>Glory Riders, a book about bikers</p>
                    <button  class="add-to-cart" data-value="Glory Riders">Add to cart</button>
                </div>
                <div class="cell" aria-label="cell">
                  <img src="images/Client3_Book3.png"
                  height="100"
                  width="150"alt="Sorcerer's Shadowed Chronicles, a fantasy books">
                  <p>Sorcerer's Shadowed Chronicles, a fantasy book</p>
                  <button class="add-to-cart" data-value="Sorcerer's Shadowed Chronicles">Add to cart</button>
              </div>
          </div>
          <div class="row" aria-label="row">
            <div class="cell" aria-label="cell">
                <img src="images/Client3_Magazine1.png"
                height="100"
                width="150"alt="Ball, a magazine about pickleball">
                <p>Ball, a magazine about pickleball</p>
                <button class="add-to-cart" data-value="Ball">Add to cart</button>
            </div>
            <div class="cell" aria-label="cell">
                <img src="images/Client3_Magazine2.png"
                height="100"
                width="150"alt="Travel, a magazine for travelers">
                <p>Travel, a magazine for travelers</p>
                <button  class="add-to-cart" data-value="Travel">Add to cart</button>
            </div>
            <div class="cell" aria-label="cell">
              <img src="images/Client3_Magazine3.png"
              height="100"
              width="150"alt="Eat., a magazine for foodies">
              <p>Eat., a magazine for foodies</p>
              <button   class="add-to-cart" data-value="Eat">Add to cart</button>
          </div>
          </div>
          <div class="row" aria-label="row">
            <div class="cell" aria-label="cell">
                <img src="images/Client3_ToteBag.png"
                height="100"
                width="150"alt="A canvas tote bag with black lettering that says ALL I DO IS READ READ READ">
                <p>A canvas tote bag with black lettering that says ALL I DO IS READ READ READ</p>
                <button   class="add-to-cart" data-value="Tote">Add to cart</button>
            </div>
            <div class="cell" aria-label="cell">
                <img src="images/Client3_Notebook.png"
                height="100"
                width="150"alt="A notebook with text on the cover that says Book Haven Bookstore">
                <p>A notebook with text on the cover that says Book Haven Bookstore</p>
                <button   class="add-to-cart" data-value="Notebook">Add to cart</button>
            </div>
            <div class="cell" aria-label="cell">
              <img src="images/Client3_Stickers.png"
              height="100"
              width="150"alt="A set of four Book Haven Bookstore stickers that promote reading">
              <p>A set of four Book Haven Bookstore stickers that promote reading</p>
              <button   class="add-to-cart" data-value="Stickers">Add to cart</button>
          </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="logo-terms">
        <img
          src="images/logo.png"
          height="50"
          width="50"
          alt="Book Haven Bookstore Logo"
        />
        <p>2010-2025</p>
        <p>Privacy Terms</p>
      </div>
      <form id="subscribe-form">
        <p>Subscribe to our newsletter</p>
        <label>Email: <input type="email" required/></label><br />
        <button class="footer-form-submit" type="submit">Subscribe</button>
      </form>
      <div class="icons-links">
      <div class="social-icons">
        <a href="https://www.twitter.com">
          <i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
        </a>
        <a href="https://www.instagram.com">
          <i class="fa-brands fa-instagram" aria-hidden="true"></i>
        </a>
        <a href="https://www.youtube.com">
          <i class="fa-brands fa-youtube" aria-hidden="true"></i>
        </a>
        <a href="https://www.linkedin.com">
          <i class="fa-brands fa-linkedin" aria-hidden="true"></i>
        </a>
      </div>
      <nav>
        <a href="/index.html" aria-label="link to home page">Home</a>
        <a href="/About Us.html" aria-label="link to About Us page">About Us</a>
        <a href="/Gallery.html" aria-label="link to Gallery page">Gallery</a>
        <a href="/Events.html" aria-label="link to events page">Events</a>
      </nav>
    </div>
    </footer>
  </body>
</html>