web-dev/index.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Book Haven Bookstore - Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="shared.js"></script>
    <script src="https://kit.fontawesome.com/34c2d0a39f.js" crossorigin="anonymous"></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>Home page</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>
      </nav>
    </header>
    <main>
      <section class="promos">
        <h1>Welcome to Book Haven Bookstore</h1>
        <div class="flex-container">
          <div class="promo">Buy one sticker pack, get one free</div>
          <div class="promo">25% off all traveling magazines</div>
          <div class="promo">Buy 2 books for 10% off</div>
          <div class="promo">New Tote Bag for sale!</div>
        </div>
        <a href="/Gallery.html" class="button">Shop Now</a>
      </section>
      <section class="product-images">
        <div class="flex-container">
          <img
            src="images/Client3_Book1.png"
            height="200"
            width="250"
            alt="Book for sale at Book Haven Bookstore"
          />
          <img
          src="images/Client3_Magazine1.png"
          height="200"
          width="250"
          alt="Magazine for sale at Book Haven Bookstore"
        />
        <img
        src="images/Client3_Stickers.png"
        height="200"
        width="250"
        alt="Stickers for sale at Book Haven Bookstore"
      />
        </div>
      </section>
      <section class="shop-here">
        <h2>Why shop here…</h2>
        <div class="flex-container">
          <div class="perk">Affordable prices</div>
          <div class="perk">10% frequent buyers discount</div>
          <div class="perk">High-quality reading materials and office essentials</div>
          <div class="perk">Signed book copies</div>
        </div>
      </section>
      <section class="categories">
        <h2>Shop by categories</h2>
        <div class="flex-container">
            <a href="/Gallery.html">Books</a>
            <a href="/Gallery.html">Magazines</a>
            <a href="/Gallery.html">Others</a>
        </div>
      </section>
    </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>