<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
  <a style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;text-decoration:none;">Prestige Realty</a>
  <div style="display:flex;align-items:center;gap:32px;">
    <a href="listings.html" style="color:#0ea5e9;text-decoration:none;font-size:15px;font-weight:600;">Listings</a>
    <a href="about.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">About Us</a>
    <a href="contact.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
    <span style="color:#0ea5e9;font-size:15px;font-weight:600;">(555) 123-4567</span>
  </div>
</nav>

<!-- Page Header -->
<section style="background-color:#0f172a;padding:64px 48px;text-align:center;font-family:'Inter',sans-serif;">
  <h1 style="font-family:'Montserrat',sans-serif;font-size:44px;font-weight:800;color:#ffffff;margin:0 0 12px;">Our Properties</h1>
  <p style="font-size:18px;color:#94a3b8;margin:0;">Browse our curated selection of homes, apartments, and commercial spaces</p>
</section>

<!-- Filter Bar -->
<section style="background-color:#ffffff;padding:24px 48px;border-bottom:1px solid #e2e8f0;font-family:'Inter',sans-serif;">
  <div style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;">
    <span style="display:inline-block;padding:10px 24px;background-color:#0ea5e9;color:#ffffff;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;">All</span>
    <span style="display:inline-block;padding:10px 24px;background-color:#f1f5f9;color:#475569;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">Houses</span>
    <span style="display:inline-block;padding:10px 24px;background-color:#f1f5f9;color:#475569;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">Apartments</span>
    <span style="display:inline-block;padding:10px 24px;background-color:#f1f5f9;color:#475569;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">Commercial</span>
  </div>
</section>

<!-- Property Grid -->
<section style="background-color:#f8fafc;padding:64px 48px;font-family:'Inter',sans-serif;">
  <div style="display:flex;flex-wrap:wrap;gap:24px;max-width:1100px;margin:0 auto;justify-content:center;">
    <!-- Property 1 -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Modern family home" />
      <div style="padding:20px;">
        <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$750,000</div>
        <div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Modern Family Home</div>
        <div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
          <span>4 Beds</span><span>3 Baths</span><span>2,800 sqft</span>
        </div>
        <div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Westwood, Los Angeles, CA</div>
        <a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details &rarr;</a>
      </div>
    </div>
    <!-- Property 2 -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Luxury villa" />
      <div style="padding:20px;">
        <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$1,250,000</div>
        <div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Luxury Villa with Pool</div>
        <div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
          <span>5 Beds</span><span>4 Baths</span><span>4,200 sqft</span>
        </div>
        <div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Beverly Hills, CA</div>
        <a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details &rarr;</a>
      </div>
    </div>
    <!-- Property 3 -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Downtown condo" />
      <div style="padding:20px;">
        <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$425,000</div>
        <div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Downtown Penthouse Condo</div>
        <div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
          <span>2 Beds</span><span>2 Baths</span><span>1,400 sqft</span>
        </div>
        <div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Downtown, San Diego, CA</div>
        <a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details &rarr;</a>
      </div>
    </div>
    <!-- Property 4 -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Suburban home" />
      <div style="padding:20px;">
        <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$580,000</div>
        <div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Suburban Family Retreat</div>
        <div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
          <span>3 Beds</span><span>2 Baths</span><span>2,100 sqft</span>
        </div>
        <div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Pasadena, CA</div>
        <a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details &rarr;</a>
      </div>
    </div>
    <!-- Property 5 -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Contemporary house" />
      <div style="padding:20px;">
        <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$890,000</div>
        <div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Contemporary Hillside Home</div>
        <div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
          <span>4 Beds</span><span>3 Baths</span><span>3,100 sqft</span>
        </div>
        <div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Hollywood Hills, CA</div>
        <a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details &rarr;</a>
      </div>
    </div>
    <!-- Property 6 -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1600573472550-8090b5e0745e?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Commercial space" />
      <div style="padding:20px;">
        <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$1,800,000</div>
        <div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Prime Commercial Space</div>
        <div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
          <span>--</span><span>2 Baths</span><span>5,500 sqft</span>
        </div>
        <div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Santa Monica Blvd, LA</div>
        <a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details &rarr;</a>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section style="background:linear-gradient(135deg,#0ea5e9,#0369a1);padding:64px 48px;text-align:center;font-family:'Inter',sans-serif;">
  <h2 style="font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:#ffffff;margin:0 0 12px;">Can't Find What You're Looking For?</h2>
  <p style="font-size:17px;color:rgba(255,255,255,0.85);margin:0 0 28px;">Our agents have access to exclusive off-market listings. Reach out and we'll find the perfect match.</p>
  <a href="contact.html" style="display:inline-block;background-color:#ffffff;color:#0ea5e9;padding:14px 36px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px;">Contact Us</a>
</section>

<!-- Footer -->
<footer style="background-color:#0f172a;padding:40px 48px;text-align:center;font-family:'Inter',sans-serif;">
  <div style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">Prestige Realty</div>
  <div style="font-size:14px;color:#94a3b8;margin-bottom:8px;">123 Real Estate Blvd, Suite 200, Los Angeles, CA 90001</div>
  <div style="font-size:13px;color:#64748b;">&copy; 2026 Prestige Realty. All rights reserved.</div>
</footer>
