Easy Detailing index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easy Detailing</title>
  <style>/* Basic styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

header {
  background-color: #0073e6;
  color: #fff;
  padding: 1em;
  text-align: center;
}

header h1 {
  margin: 0;
}

nav a {
  color: #fff;
  margin: 0 1em;
  text-decoration: none;
}

section {
  padding: 2em;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
}

label, input, select, textarea, button {
  margin-bottom: 0.5em;
  width: 100%;
}

button {
  background-color: #0073e6;
  color: #fff;
  border: none;
  padding: 0.5em;
  cursor: pointer;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}
</style>
  <script>// Contact form submission handler
document.getElementById("contactForm").addEventListener("submit", function (event) {
  event.preventDefault();
  alert("Thank you for your message! We will contact you shortly.");
});

// Payment handling function
function makePayment() {
  const serviceType = document.getElementById("serviceType").value;
  const paymentAmount = document.getElementById("paymentAmount").value;

  if (serviceType && paymentAmount) {
    alert(`Thank you for your payment of $${paymentAmount} for ${serviceType} service.`);
  } else {
    alert("Please select a service type and enter the payment amount.");
  }
}
</script>
</head>
<body>
  <!-- Header -->
  <header>
    <h1>Easy Detailing</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
      <a href="#order">Order Now</a>
    </nav>
  </header>

  <!-- Home Section -->
  <section id="home">
    <h2>Welcome to Easy Detailing</h2>
    <p>Your trusted partner in car coating services.</p>
  </section>

  <!-- Services Section -->
  <section id="services">
    <h2>Our Services</h2>
    <p>We offer top-notch car coating services to keep your vehicle looking brand new.</p>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <h2>Contact Us</h2>
    <form id="contactForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <label for="issue">Your Issue:</label>
      <textarea id="issue" name="issue" required></textarea>
      <button type="submit">Submit</button>
    </form>
  </section>

  <!-- Order Section -->
  <section id="order">
    <h2>Order Our Service</h2>
    <form id="orderForm">
      <label for="serviceType">Service Type:</label>
      <select id="serviceType" name="serviceType" required>
        <option value="basic">Basic Coating</option>
        <option value="premium">Premium Coating</option>
      </select>
      <label for="paymentAmount">Amount:</label>
      <input type="text" id="paymentAmount" name="paymentAmount" required>
      <button type="button" onclick="makePayment()">Pay Now</button>
    </form>
  </section>

  <!-- Footer -->
  <footer>
    <p>&copy; 2024 Easy Detailing. All rights reserved.</p>
  </footer>
</body>
</html>