<html>
 <head>
  <title>
   Amaia Villas
  </title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"/>
  <style>
   body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .header {
            position: relative;
            background: url('https://placehold.co/1920x1080') no-repeat center center/cover;
            height: 100vh;
            color: white;
        }
        .header .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        }
        .header .content {
            position: relative;
            z-index: 2;
            padding: 20px;
        }
        .header .logo {
            display: flex;
            align-items: center;
            padding: 20px;
        }
        .header .logo img {
            height: 50px;
            margin-right: 10px;
        }
        .header .nav {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
        }
        .header .nav a {
            color: white;
            margin-left: 20px;
            text-decoration: none;
            font-weight: bold;
        }
        .header .main-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }
        .header .main-content .info {
            max-width: 50%;
        }
        .header .main-content .info h1 {
            font-size: 48px;
            margin: 0;
        }
        .header .main-content .info p {
            font-size: 18px;
            margin: 10px 0;
        }
        .header .main-content .info .price {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }
        .header .main-content .info .btn {
            background: #FFC107;
            color: black;
            padding: 10px 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
        }
        .header .main-content .form {
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .header .main-content .form input,
        .header .main-content .form textarea,
        .header .main-content .form select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .header .main-content .form .btn {
            background: #FFC107;
            color: black;
            padding: 10px 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        .gallery {
            display: flex;
            justify-content: center;
            padding: 20px;
            background: white;
        }
        .gallery img {
            width: 150px;
            height: 100px;
            margin: 0 10px;
            border-radius: 5px;
        }
        .property-details {
            text-align: center;
            padding: 20px;
            background: #f8f8f8;
        }
        .property-details h2 {
            font-size: 24px;
            margin: 0;
        }
        .property-details .details {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .property-details .details .detail {
            margin: 0 20px;
            text-align: center;
        }
        .property-details .details .detail i {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .property-details .details .detail p {
            margin: 5px 0;
        }
  </style>
 </head>
 <body>
  <div class="header">
   <img class="overlay" scr="https://storage.googleapis.com/a1aa/image/lDf07rzUSwzXTaDmVv44QqId7CxPQGvecp6B3wHgilTsxokTA.jpg"/>
   <div class="content">
    <div class="logo">
     <img height="50" id="websitelogo" src="https://storage.googleapis.com/a1aa/image/lDf07rzUSwzXTaDmVv44QqId7CxPQGvecp6B3wHgilTsxokTA.jpg" width="50"/>
     <h1>
      AMAIA
     </h1>
    </div>
    <div class="nav">
     <a href="#">
      HOME
     </a>
     <a href="#">
      ROOM DETAIL
     </a>
     <a href="#">
      BLOG
     </a>
     <a href="#">
      CONTACT AGENT
     </a>
    </div>
    <div class="main-content">
     <div class="info">
      <h1 id="propertyname">
       Skies Calumpit
      </h1>
      <p id="propertyaddress">
      Calumpit Bulacan
      </p>
      <p class="price" id="propertyprice">
       $1,799,000
      </p>
      <a class="btn" href="#">
       SCHEDULE A SHOWING
      </a>
     </div>
     <div class="form">
      <input placeholder="Name" type="text"/>
      <input placeholder="Phone Number" type="text"/>
      <input placeholder="Email" type="email"/>
      <textarea placeholder="Message"></textarea>
      <input placeholder="mm/dd/yyyy" type="text"/>
      <select>
       <option value="">
        Select Property
       </option>
       <option value="property1">
        Property 1
       </option>
       <option value="property2">
        Property 2
       </option>
       <option value="property3">
        Property 3
       </option>
      </select>
      <a class="btn" href="#">
       MAKE APPOINTMENT
      </a>
     </div>
    </div>
   </div>
  </div>
  <div class="gallery">
   <img alt="Image 1" height="100" src="https://storage.googleapis.com/a1aa/image/g3NA06cYf9W6BaRe9t3JdmqxfYX40cf8bryCYK2P8Iw9GjSOB.jpg" width="150"/>
   <img alt="Image 2" height="100" src="https://storage.googleapis.com/a1aa/image/B7Aee8wvEmk7rkDoS6AiFj0ZHy7lP8GTfoe42uKSDTcBHjSOB.jpg" width="150"/>
   <img alt="Image 3" height="100" src="https://storage.googleapis.com/a1aa/image/GCeyrTZ3gLymTiOuV08p1nyxiFBYZe00EsVu5hQg18npxokTA.jpg" width="150"/>
   <img alt="Image 4" height="100" src="https://storage.googleapis.com/a1aa/image/DmJ2k9vco5ppAttbofmvWUmG1bwBfsw02zXwg6yqfSVajRJnA.jpg" width="150"/>
   <img alt="Image 5" height="100" src="https://storage.googleapis.com/a1aa/image/Pae8im0ZOK1OGKwYZAaXuivbESXfC1RN62QNyjrWZdQqxokTA.jpg" width="150"/>
  </div>
  <div class="property-details">
   <h2>
    PROPERTY DETAILS
   </h2>
   <div class="details">
    <div class="detail">
     <i class="fas fa-ruler-combined">
     </i>
     <p>
      SQUARE FEET
     </p>
     <p>
      2500
     </p>
    </div>
    <div class="detail">
     <i class="fas fa-bed">
     </i>
     <p>
      BEDROOMS
     </p>
     <p>
      3
     </p>
    </div>
    <div class="detail">
     <i class="fas fa-bath">
     </i>
     <p>
      BATHROOMS
     </p>
     <p>
      4
     </p>
    </div>
    <div class="detail">
     <i class="fas fa-calendar-alt">
     </i>
     <p>
      YEAR BUILT
     </p>
     <p>
      1996
     </p>
    </div>
    <div class="detail">
     <i class="fas fa-car">
     </i>
     <p>
      CAR PARKING
     </p>
     <p>
      2
     </p>
    </div>
   </div>
  </div>
 </body>
</html>