<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Braidslayer KiKi | Booking</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <header class="header">
    <div class="logo">Braidslayer KiKi</div>
    <nav class="nav">
      <a href="#home">Home</a>
      <a href="#booking">Book</a>
      <a href="#gallery">Gallery</a>
      <a href="#policies">Policies</a>
    </nav>
  </header>

  <section id="home" class="hero">
    <div class="hero-content">
      <h1>Slay Your Look With KiKi</h1>
      <p>Chicago’s go‑to braider for knotless, feed‑ins, and protective styles.</p>
      <a href="#booking" class="btn-primary">Book Your Appointment</a>
    </div>
  </section>

  <section id="booking" class="booking-section">
    <h2>Book an Appointment</h2>

    <form id="booking-form" class="booking-form">
      <div class="form-group">
        <label>Name</label>
        <input type="text" id="name" placeholder="Your full name" required />
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" id="email" placeholder="you@example.com" required />
      </div>

      <div class="form-group">
        <label>Style</label>
        <select id="service" required>
          <option value="">Select a style</option>
          <option value="Knotless Braids">Knotless Braids</option>
          <option value="Feed‑In Braids">Feed‑In Braids</option>
          <option value="Boho Braids">Boho Braids</option>
          <option value="Soft Locs">Soft Locs</option>
          <option value="Kids Braids">Kids Braids</option>
        </select>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label>Date</label>
          <input type="date" id="date" required />
        </div>

        <div class="form-group">
          <label>Time</label>
          <input type="time" id="time" required />
        </div>
      </div>

      <button type="submit" class="btn-primary">Confirm Booking</button>
    </form>

    <div id="message" class="message hidden"></div>

    <div class="booking-list">
      <h3>Your Appointments</h3>
      <ul id="booking-list"></ul>
    </div>
  </section>

  <section id="gallery" class="gallery-section">
    <h2>Style Gallery</h2>
    <p>More photos coming soon.</p>
  </section>

  <section id="policies" class="policies-section">
    <h2>Salon Policies</h2>
    <ul>
      <li>No extra guests</li>
      <li>15‑minute grace period</li>
      <li>Non‑refundable deposit required</li>
      <li>Hair must be clean & blown out</li>
    </ul>
  </section>

  <footer class="footer">
    <p>© <span id="year"></span> Braidslayer KiKi — Chicago, IL</p>
  </footer>

  <script src="script.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Braidslayer KiKi | Booking</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <header class="header">
    <div class="logo">Braidslayer KiKi</div>
    <nav class="nav">
      <a href="#home">Home</a>
      <a href="#booking">Book</a>
      <a href="#gallery">Gallery</a>
      <a href="#policies">Policies</a>
    </nav>
  </header>

  <section id="home" class="hero">
    <div class="hero-content">
      <h1>Slay Your Look With KiKi</h1>
      <p>Chicago’s go‑to braider for knotless, feed‑ins, and protective styles.</p>
      <a href="#booking" class="btn-primary">Book Your Appointment</a>
    </div>
  </section>

  <section id="booking" class="booking-section">
    <h2>Book an Appointment</h2>

    <form id="booking-form" class="booking-form">
      <div class="form-group">
        <label>Name</label>
        <input type="text" id="name" placeholder="Your full name" required />
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" id="email" placeholder="you@example.com" required />
      </div>

      <div class="form-group">
        <label>Style</label>
        <select id="service" required>
          <option value="">Select a style</option>
          <option value="Knotless Braids">Knotless Braids</option>
          <option value="Feed‑In Braids">Feed‑In Braids</option>
          <option value="Boho Braids">Boho Braids</option>
          <option value="Soft Locs">Soft Locs</option>
          <option value="Kids Braids">Kids Braids</option>
        </select>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label>Date</label>
          <input type="date" id="date" required />
        </div>

        <div class="form-group">
          <label>Time</label>
          <input type="time" id="time" required />
        </div>
      </div>

      <button type="submit" class="btn-primary">Confirm Booking</button>
    </form>

    <div id="message" class="message hidden"></div>

    <div class="booking-list">
      <h3>Your Appointments</h3>
      <ul id="booking-list"></ul>
    </div>
  </section>

  <section id="gallery" class="gallery-section">
    <h2>Style Gallery</h2>
    <p>More photos coming soon.</p>
  </section>

  <section id="policies" class="policies-section">
    <h2>Salon Policies</h2>
    <ul>
      <li>No extra guests</li>
      <li>15‑minute grace period</li>
      <li>Non‑refundable deposit required</li>
      <li>Hair must be clean & blown out</li>
    </ul>
  </section>

  <footer class="footer">
    <p>© <span id="year"></span> Braidslayer KiKi — Chicago, IL</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>
const form = document.getElementById("booking-form");
const messageEl = document.getElementById("message");
const listEl = document.getElementById("booking-list");
const yearEl = document.getElementById("year");

yearEl.textContent = new Date().getFullYear();

let bookings = [];

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const name = document.getElementById("name").value.trim();
  const email = document.getElementById("email").value.trim();
  const service = document.getElementById("service").value;
  const date = document.getElementById("date").value;
  const time = document.getElementById("time").value;

  if (!name || !email || !service || !date || !time) {
    showMessage("Please fill out all fields", "error");
    return;
  }

  const booking = { id: Date.now(), name, email, service, date, time };
  bookings.push(booking);

  renderBookings();
  showMessage("Appointment booked, babe!", "success");
  form.reset();
});

function renderBookings() {
  listEl.innerHTML = "";

  bookings.forEach((b) => {
    const li = document.createElement("li");
    li.className = "booking-item";
    li.innerHTML = `
      <strong>${b.name}</strong> — ${b.service}<br>
      ${b.date} at ${b.time}<br>
      <small>${b.email}</small>
    `;
    listEl.appendChild(li);
  });
}

function showMessage(text, type) {
  messageEl.textContent = text;
  messageEl.className = `message ${type}`;
  messageEl.classList.remove("hidden");

  setTimeout(() => {
    messageEl.classList.add("hidden");
  }, 3000);
}
<section id="pricing" class="pricing-section">
  <h2>Style Menu & Pricing</h2>

  <div class="price-card">
    <h3>Knotless Braids</h3>
    <p class="price">$180–$320</p>
    <p class="desc">Small, medium, or large. Hair included.</p>
  </div>

  <div class="price-card">
    <h3>Feed‑In Braids</h3>
    <p class="price">$85–$150</p>
    <p class="desc">Straight backs or freestyles.</p>
  </div>

  <div class="price-card">
    <h3>Boho Braids</h3>
    <p class="price">$250–$380</p>
    <p class="desc">Curly pieces added for a soft, romantic look.</p>
  </div>

  <div class="price-card">
    <h3>Soft Locs</h3>
    <p class="price">$200–$350</p>
    <p class="desc">Lightweight, natural, and flexible.</p>
  </div>

  <div class="price-card">
    <h3>Kids Braids</h3>
    <p class="price">$65–$120</p>
    <p class="desc">Ages 5–12. Beads available.</p>
  </div>
</section>
<section id="deposit" class="deposit-section">
  <h2>Deposit Policy</h2>
  <p>A <strong>$25 non‑refundable deposit</strong> is required to secure your appointment.</p>
  <p>Deposit goes toward your final balance.</p>

  <a href="https://cash.app/$YourCashTag" class="btn-primary">
    Pay Deposit
  </a>
</section>
<a href="https://instagram.com/BRAIDSLAYER_KI" target="_blank" class="btn-ig">
  💖 Follow Me on Instagram
</a>


