Day 2/100 - 💳 Build a Clean Credit Card Checkout Form 🎯 (No JavaScript Needed!)

Hey Devs! 👋

Welcome to Day 2 of my #100DaysOfUI journey — today I built a clean and colorful Credit Card Checkout Page using just HTML & CSS.

🔥 The goal? Make payment forms not just functional but beautiful and user-friendly too.

🎨** What I Built**
A sleek, modern credit card checkout form including

✅ Billing Information
✅ Credit Card Details (with expiry and CVV)
✅ Address Fields
✅ Payment Summary

🖼️ Preview
Here's a sneak peek of what it looks like 👇

Code Preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Credit Card Checkout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Credit Card Checkout</h1>
    <form>
      <section>
        <h2>Billing Information</h2>
        <div class="form-group">
          <label>Full Name</label>
          <input type="text" placeholder="John Doe" required>
        </div>
        <div class="form-group">
          <label>Email Address</label>
          <input type="email" placeholder="john@example.com" required>
        </div>
        <div class="form-group">
          <label>Phone Number</label>
          <input type="tel" placeholder="+1 234 567 8901" required>
        </div>
      </section>
      <section>
        <h2> Credit Card Information</h2>
        <div class="form-group">
          <label>Cardholder Name</label>
          <input type="text" placeholder="John Doe" required>
        </div>
        <div class="form-group">
          <label>Credit Card Number</label>
          <input type="text" maxlength="19" placeholder="1234 5678 9012 3456" required>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>Expiration Date</label>
            <input type="text" placeholder="MM / YY" required>
          </div>
          <div class="form-group">
            <label>CVV</label>
            <input type="password" maxlength="4" placeholder="123" required>
          </div>
        </div>
      </section>
      <section>
        <h2>Billing Address</h2>
        <div class="form-group">
          <label>Street Address</label>
          <input type="text" placeholder="123 Main St" required>
        </div>
        <div class="form-group">
          <label>City</label>
          <input type="text" placeholder="New York" required>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>State/Province</label>
            <input type="text" placeholder="NY" required>
          </div>
          <div class="form-group">
            <label>ZIP/Postal Code</label>
            <input type="text" placeholder="10001" required>
          </div>
        </div>
        <div class="form-group">
          <label>Country</label>
          <select required>
            <option>Select Country</option>
            <option>India</option>
            <option>USA</option>
            <option>UK</option>
            <option>Canada</option>
          </select>
        </div>
      </section>
      <section class="summary">
        <h2>Payment Summary</h2>
        <p>Total Amount: <strong>$100.00</strong></p>
        <button type="submit">Pay Now</button>
      </section>
    </form>
  </div>
</body>
</html>

🛠️ Technologies Used