Our Services Real Estates | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Real Estate Services</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
 
</head>
<body>

<section class="realestate-section">
    <h2>Our Real Estate Services</h2>
    <p>We provide trusted property solutions for buying, selling, and investments.</p>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1598228723793-52759bba239c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGhvdXNlfGVufDB8fDB8fHww" alt="Property Buying">
        <div class="service-content">
          <h3>Property Buying</h3>
          <p>Find your dream home or investment property with expert guidance.</p>
        </div>
      </div>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=900&q=60" alt="Property Selling">
        <div class="service-content">
          <h3>Property Selling</h3>
          <p>Sell your property at the best price with our strategic marketing.</p>
        </div>
      </div>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=900&q=60" alt="Rental Management">
        <div class="service-content">
          <h3>Rental Management</h3>
          <p>Hassle-free rental property management to maximize your income.</p>
        </div>
      </div>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1507089947368-19c1da9775ae?auto=format&fit=crop&w=900&q=60" alt="Property Investment">
        <div class="service-content">
          <h3>Property Investment</h3>
          <p>Smart real estate investment solutions to grow your wealth securely.</p>
        </div>
      </div>

</div>
  </section>

</body>
</html>

CSS

*{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:'Poppins',sans-serif;background:#f9f9f9;}

.realestate-section{
      padding:90px 8%;
      background:linear-gradient(135deg,#e6f0ff,#fdfdfd);
      text-align:center;
    }
    .realestate-section h2{
      font-size:2.8rem;
      font-weight:700;
      margin-bottom:12px;
      color:#0a2e65;
    }
    .realestate-section p{
      font-size:1.1rem;
      color:#444;
      margin-bottom:60px;
    }

.services-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:35px;
    }

.service-card{
      background:#fff;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 8px 22px rgba(0,0,0,0.08);
      transition:.4s ease;
    }
    .service-card:hover{
      transform:translateY(-10px);
      box-shadow:0 12px 30px rgba(0,0,0,0.15);
    }
    .service-card img{
      width:100%;
      height:220px;
      object-fit:cover;
      transition:.4s ease;
    }
    .service-card:hover img{
      transform:scale(1.08);
    }
    .service-content{
      padding:22px;
    }
    .service-content h3{
      font-size:1.4rem;
      margin-bottom:10px;
      color:#0a2e65;
      font-weight:600;
    }
    .service-content p{
      font-size:.96rem;
      color:#555;
      line-height:1.5;
    }

@media(max-width:768px){
      .realestate-section h2{font-size:2rem;}
    }

JavaScript

Our Services Real Estates Preview

Download Options