index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Rent A Car</title>
  <link rel="stylesheet" href="CSS/home-page.css" />
</head>
<body>

<section class="header"> 
  <div class="logo-container">
    <h1>Royal<span>Ride</span></h1>
  </div>
  <div class="login-container">
    <a href="login.html"><button class="login-btn">Login</button></a>
  </div>
</section>

</section>
  <section class="hero">
    <div class="overlay">
      <div class="hero-content">
        <img div="hero-logo" src="IMG/RoyalRide-logo-removebg-preview.png" alt="Brand Logo" class="hero-logo" width="auto" height="auto"/>
        <h1>Find Your Perfect Ride</h1>
        <p>✓ No Hidden Fees ✓ Free Cancellation ✓ 24/7 Support</p>
        <form class="search-box">
            <select required>
            <option value="" enabled selected>Select a place of hire</option>
            <option value="Sofia">Sofia near the Airport</option>
            <option value="Plovdiv">Plovdiv near the Airport </option>
            <option value="Burgas">Burgas near the Airport</option>
            <option value="Varna">Varna near the Airport</option>
            </select>
          <input type="date" required />
          <p>----------------------------------------------------------------------------------------------------</p>
          <select required>
          <option value="" enabled selected>Select a place of return</option>
          <option value="Sofia">Sofia near the Airport</option>
          <option value="Plovdiv">Plovdiv near the Airport </option>
          <option value="Burgas">Burgas near the Airport</option>
          <option value="Varna">Varna near the Airport</option>
            </select>
          <input type="date" required />
          <a href="search-now.html"><button type="button" >Search now</button></a>
        </form>
      </div>
    </div>
  </section>

  <section class="car-section">
    <h2>Latest Inventory</h2>
    <div class="car-grid">
      <div class="car-box">
        <img src="IMG/C-Class2025-removebg-preview.png" alt="Car 1" style="width: 100%; height: auto;">
        <h3>Mercedes S-Class 2025</h3>
        <a href="MercedeS.HTML"><button class="book-btn">Information</button></a>
      </div>
      <div class="car-box">
        <img src="IMG/BMWM3.jpg" alt="Car 2" style="width: 125%; height: auto;">
        <h3>BMW M3 2024</h3>
        <a href="BMW.HTML"><button class="book-btn">Information</button></a>
      </div>
      <div class="car-box">
        <br>
        <img src="IMG/Golf8R.png" alt="Car 3" style="width: 115%; height: auto;">
        <br>
        <br>
        <h3>Golf 8R</h3>
        <a href="Golf 8R.HTML"><button class="book-btn">Information</button></a>
      </div>
    </div>
  </section>

  <section>
      <footer>
        <div class="footer-content">
          <img src="IMG/logos-removebg-preview.png" alt="" width="8%" height="auto">
          <ol class="footer-links">
          <li><a href="#">Latest Inventory</a></li>
          <li><a href="#">Find your perfect ride</a></li>
          <li><a href="#">Contact Us</a></li>
          </ol>
        </div>
      </footer>
  </section>
</body>
</html>