bracelets/about.html at main · aspiece/bracelets · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About — My Honey's BeadBox</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

<header>
  <h1>My Honey's BeadBox</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="shop.html">Shop</a>
    <a href="cart.html" class="cart-link">
      🛒 Cart <span id="cart-count">0</span>
    </a>
    <a href="about.html">About</a>
  </nav>
</header>

<main>
  <section class="about-section">
    <h2>About Us</h2>
    <p>
      Welcome to My Honey's BeadBox! As small, family-ran business, we pour love and care into every bracelet we create.
      Each piece is handmade and crafted with beautiful materials from around the worl, making every design truly one of a kind.
    </p>
    <p>
      Our mission is to spread joy through wearable art. whether it's a gift for someone special or a treat for yourself,
      each piece is made to bring a little happiness to your day.
    </p>

    <h3>Contact Us</h3>
    <p>Have any questions or custom request? We would love to hear from you!</p>

    <form id="contact-form" class="contact-form" novalidate>
      <div>
        <label for="contact-name">Your Name</label>
        <input type="text" id="contact-name" name="name" placeholder="Enter here" required>
      </div>
      <div>
        <label for="contact-email">Email Address</label>
        <input type="email" id="contact-email" name="email" placeholder="Enter here" required>
      </div>
      <div>
        <label for="contact-message">Message</label>
        <textarea id="contact-message" name="message" placeholder="Your message…" required></textarea>
      </div>
      <button type="submit" class="btn">Send Message</button>
    </form>
  </section>
</main>

<footer>
  <p>© 2026 My Honey's BeadBox — Handcrafted with ❤️</p>
</footer>

<div id="toast"></div>

<script src="js/products.js"></script>
<script src="js/cart.js"></script>
<script>
  // Simple toast for form submission
  const toast = document.getElementById('toast');

  document.getElementById('contact-form').addEventListener('submit', function(e){
      e.preventDefault();
      toast.textContent = "Message sent! We'll get back to you soon.";
      toast.style.opacity = 1;
      setTimeout(()=>{ toast.style.opacity = 0; }, 3000);
      this.reset();
  });
</script>
</body>
</html>