<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Featured Collections</title>
  <style>
    :root {
      --primary-color: #111111;
      --accent-color: #ffffff;
      --card-radius: 24px;
      --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
      background-color: #f8f9fa;
      margin: 0;
      padding: 80px 24px;
      color: var(--primary-color);
    }

    .featured-title {
      font-size: 40px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 56px;
      text-align: center;
      text-transform: uppercase;
      position: relative;
    }

    .featured-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: var(--primary-color);
      margin: 16px auto 0;
      border-radius: 2px;
    }

    .collections-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 32px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .collection-card {
      position: relative;
      border-radius: var(--card-radius);
      overflow: hidden;
      background-color: #eee;
      display: block;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
      transition: var(--transition);
      aspect-ratio: 3 / 4;
    }

    .collection-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    }

    .collection-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .collection-card:hover .collection-img {
      transform: scale(1.08);
    }

    /* Gradient overlay */
    .collection-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0) 40%, 
        rgba(0, 0, 0, 0.4) 70%, 
        rgba(0, 0, 0, 0.8) 100%
      );
      transition: var(--transition);
    }

    .collection-card:hover .collection-overlay {
      background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0.1) 30%, 
        rgba(0, 0, 0, 0.5) 65%, 
        rgba(0, 0, 0, 0.85) 100%
      );
    }

    /* Glassmorphism Info Container */
    .collection-info {
      position: absolute;
      bottom: 24px;
      left: 24px;
      right: 24px;
      padding: 20px 24px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 18px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: var(--transition);
    }

    .collection-card:hover .collection-info {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-4px);
    }

    .collection-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .collection-name {
      font-size: 22px;
      font-weight: 700;
      margin: 0;
      letter-spacing: 0.02em;
    }

    .collection-count {
      font-size: 14px;
      margin: 0;
      opacity: 0.85;
      font-weight: 400;
    }

    /* Action Arrow Button */
    .collection-arrow {
      width: 44px;
      height: 44px;
      background-color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: var(--transition);
    }

    .collection-arrow svg {
      width: 20px;
      height: 20px;
      stroke: var(--primary-color);
      fill: none;
      stroke-width: 2.5;
      transition: transform 0.3s ease;
    }

    .collection-card:hover .collection-arrow {
      background-color: var(--primary-color);
    }

    .collection-card:hover .collection-arrow svg {
      stroke: #ffffff;
      transform: translate(2px, -2px);
    }

    @media (min-width: 768px) {
      .collections-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .featured-title {
        font-size: 48px;
      }
    }
  </style>
</head>
<body>

  <h2 class="featured-title">Featured Collections</h2>

  <div class="collections-grid">
    
    <a href="https://rabbioz.com/shop/New%20T-Shirts" class="collection-card" target="_blank">
      <img src="https://i.pinimg.com/1200x/06/f7/24/06f724605544433768365263fa17ed7f.jpg" alt="T-Shirt Collection" class="collection-img">
      <div class="collection-overlay"></div>
      <div class="collection-info">
        <div class="collection-details">
          <h3 class="collection-name">T-Shirt</h3>
          <p class="collection-count">36 items</p>
        </div>
        <div class="collection-arrow">
          <svg viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H7M17 7V17" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
      </div>
    </a>

    
    <a href="https://rabbioz.com/shop/New%20Hoodies" class="collection-card" target="_blank">
      <img src="https://i.pinimg.com/1200x/f7/38/4e/f7384e4a968d26db380d1e651b1db2a5.jpg" alt="Hoodie Collection" class="collection-img">
      <div class="collection-overlay"></div>
      <div class="collection-info">
        <div class="collection-details">
          <h3 class="collection-name">Hoodie</h3>
          <p class="collection-count">28 items</p>
        </div>
        <div class="collection-arrow">
          <svg viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H7M17 7V17" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
      </div>
    </a>

    
    <a href="https://rabbioz.com/shop/New%20Sweatshirts" class="collection-card" target="_blank">
      <img src="https://i.pinimg.com/1200x/5c/b7/1c/5cb71cc77910bf5d6e54c7b18c2464e4.jpg" alt="Sweater Collection" class="collection-img">
      <div class="collection-overlay"></div>
      <div class="collection-info">
        <div class="collection-details">
          <h3 class="collection-name">Sweater</h3>
          <p class="collection-count">32 items</p>
        </div>
        <div class="collection-arrow">
          <svg viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H7M17 7V17" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
      </div>
    </a>
  </div>

</body>
</html>

Highlight live products from the current store with a clean responsive grid.

Featured products

Products List

<section class="benefits" style="background-color:#f9f9f9; padding:60px 20px;">
  <div style="max-width:1200px; margin:0 auto; text-align:center;">
    <h2 style="font-family:'Montserrat',sans-serif; font-size:32px; font-weight:800; margin-bottom:40px; color:#333333;">
      Why Choose Us
    </h2>
    <div style="display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;">

      
      <div style="flex:1; background-color:#ffffff; color:#555555; padding:30px; border-left:4px solid #888888; border-radius:10px; box-shadow:0 6px 15px rgba(0,0,0,0.05);">
        <h3 style="font-family:'Montserrat',sans-serif; font-size:18px; font-weight:600; margin-bottom:10px; color:#222222;">
          High-quality Materials
        </h3>
        <p style="font-family:'Inter',sans-serif; font-size:14px; line-height:1.6;">
          Crafted with premium fabrics for lasting comfort and durability.
        </p>
      </div>

      
      <div style="flex:1; background-color:#ffffff; color:#555555; padding:30px; border-left:4px solid #888888; border-radius:10px; box-shadow:0 6px 15px rgba(0,0,0,0.05);">
        <h3 style="font-family:'Montserrat',sans-serif; font-size:18px; font-weight:600; margin-bottom:10px; color:#222222;">
          Trendy Designs
        </h3>
        <p style="font-family:'Inter',sans-serif; font-size:14px; line-height:1.6;">
          Modern styles suitable for every occasion and lifestyle.
        </p>
      </div>

      
      <div style="flex:1; background-color:#ffffff; color:#555555; padding:30px; border-left:4px solid #888888; border-radius:10px; box-shadow:0 6px 15px rgba(0,0,0,0.05);">
        <h3 style="font-family:'Montserrat',sans-serif; font-size:18px; font-weight:600; margin-bottom:10px; color:#222222;">
          Fast Shipping
        </h3>
        <p style="font-family:'Inter',sans-serif; font-size:14px; line-height:1.6;">
          Quick delivery and easy returns for a hassle-free shopping experience.
        </p>
      </div>

    </div>
  </div>
</section>

Inspire and let yourself be inspired, from one unique fashion to another.

Let shoppers switch between top categories without leaving the section.

Shop products by tab

Rabbioz LLC is an online store with secure checkout, tracked shipping, clear returns, and responsive customer support.

Featured Collections

T-Shirt

Hoodie

Sweater

Featured products

Featured Products

Featured products

Why Choose Us

High-quality Materials

Trendy Designs

Fast Shipping

Shop Gram

Shop products by tab