VibeCoderzVibeCoderz
Telegram
All Prompts
District Features Grid Section with Image Hover preview
featuresectiongridcardstailwindresponsivehoverminimal

District Features Grid Section with Image Hover

Секция с 4 карточками преимуществ (описание + фото) для сайтов о недвижимости, отелях. Адаптивный дизайн, зум фото при наведении.

Live Preview

Prompt

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MERIDIAN — Curated Surroundings</title>

  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    body {
      background-color: #f9f8f6;
      color: #1c1917;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .img-zoom-container {
      overflow: hidden;
    }

    .img-zoom {
      transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .group:hover .img-zoom {
      transform: scale(1.03);
    }
  </style>
</head>

<body class="font-sans font-light text-primary bg-[#F9F8F6]">

  <section class="py-24 md:py-32 px-6 md:px-12 max-w-7xl mx-auto">

    <!-- Section Header -->
    <div class="mb-16 md:mb-20 flex flex-col items-start">
      <span class="block text-[10px] uppercase tracking-widest text-black/50 mb-5 font-normal">
      DISTRICT RHYTHM
    </span>

      <h2 class="font-serif text-3xl md:text-4xl font-normal tracking-tight text-primary mb-4">
        Curated Surroundings.
      </h2>

      <p class="text-sm md:text-base text-black/70 font-light max-w-lg leading-relaxed">
        A precise collection of natural volumes, culinary spaces, and cultural institutions defining the daily
        experience.
      </p>
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-20 items-start">

      <!-- Card 1 -->
      <div class="group flex flex-col">
        <div class="aspect-[4/3] w-full overflow-hidden border border-black/10 mb-6 img-zoom-container bg-white">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e1eb2bed-b017-435c-9c53-cb8d6bafac5b_1600w.webp" alt="Parks" class="img-zoom">
        </div>
        <h3 class="font-serif text-xl md:text-2xl font-normal tracking-tight mb-3">
          Parks
        </h3>
        <p class="text-xs md:text-sm text-black/70 font-light leading-relaxed">
          Expansive green volumes acting as a natural, quiet buffer to the waterfront edge.
        </p>
      </div>

      <!-- Card 2 -->
      <div class="group flex flex-col md:mt-10">
        <div class="aspect-[4/3] w-full overflow-hidden border border-black/10 mb-6 img-zoom-container bg-white">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/11aba371-b6f5-4906-88c1-d8cddc37ddad_3840w.jpg" alt="Dining" class="img-zoom">
        </div>
        <h3 class="font-serif text-xl md:text-2xl font-normal tracking-tight mb-3">
          Dining
        </h3>
        <p class="text-xs md:text-sm text-black/70 font-light leading-relaxed">
          Curated culinary spaces defined by material richness, proportion, and atmosphere.
        </p>
      </div>

      <!-- Card 3 -->
      <div class="group flex flex-col">
        <div class="aspect-[4/3] w-full overflow-hidden border border-black/10 mb-6 img-zoom-container bg-white">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c8cc4e99-c608-4bb9-b648-421d8eea22c5_1600w.webp" alt="Waterfront Promenade" class="img-zoom">
        </div>
        <h3 class="font-serif text-xl md:text-2xl font-normal tracking-tight mb-3">
          Waterfront Promenade
        </h3>
        <p class="text-xs md:text-sm text-black/70 font-light leading-relaxed">
          A linear public realm tracing the harbor skyline with quiet architectural precision.
        </p>
      </div>

      <!-- Card 4 -->
      <div class="group flex flex-col md:mt-10">
        <div class="aspect-[4/3] w-full overflow-hidden border border-black/10 mb-6 img-zoom-container bg-white">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/73569582-ef85-4f23-86d1-4f3d9ebbbab6_1600w.webp" alt="Galleries" class="img-zoom">
        </div>
        <h3 class="font-serif text-xl md:text-2xl font-normal tracking-tight mb-3">
          Galleries
        </h3>
        <p class="text-xs md:text-sm text-black/70 font-light leading-relaxed">
          Established cultural institutions integrated seamlessly within the walking radius of the district.
        </p>
      </div>

    </div>

  </section>

</body>

</html>
All Prompts