<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Fashion Hero Banner</title>

<style>
  * {margin: 0; padding: 0; box-sizing: border-box;}

  body {
    font-family: "Poppins", sans-serif;
    background: #ffffff;
    overflow-x: hidden;
  }

  /* ==== FULL WIDTH HERO ==== */
  .hero-section {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
    background: linear-gradient(135deg, #fdfdfd, #f3f7ff);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ==== MOVING GRID BACKGROUND ==== */
  .hero-section .grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(1000px) rotateX(70deg);
    transform-origin: top;
    animation: gridMove 25s linear infinite;
  }

  @keyframes gridMove {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 800px, 800px 0; }
  }

  /* ==== FLOATING LIGHTS (SOFT) ==== */
  .hero-section .light {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0));
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
  }

  .hero-section .light:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s;}
  .hero-section .light:nth-child(2) { top: 75%; left: 25%; animation-delay: 2s;}
  .hero-section .light:nth-child(3) { top: 45%; left: 85%; animation-delay: 3.5s;}
  .hero-section .light:nth-child(4) { top: 15%; left: 70%; animation-delay: 5s;}
  .hero-section .light:nth-child(5) { top: 85%; left: 50%; animation-delay: 6.5s;}

  @keyframes float {
    0%,100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-20px) scale(1.25); opacity: 1; }
  }

  /* ==== ROTATING IMAGE ==== */
  .hero-section .floating-image {
    position: absolute;
    width: 320px;
    height: 420px;
    border-radius: 30px;
    overflow: hidden;
    transform-style: preserve-3d;
    animation: spin 12s linear infinite;
    box-shadow: 0 0 25px rgba(70, 70, 70, 0.15);
  }

  .hero-section .floating-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
  }

  @keyframes spin {
    from { transform: rotateX(8deg) rotateY(0deg); }
    to { transform: rotateX(8deg) rotateY(360deg); }
  }

  /* ==== TEXT CONTENT ==== */
  .hero-section .hero-text {
    position: relative;
    text-align: center;
    z-index: 10;
  }

  .hero-section .hero-text h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 800;
    background: linear-gradient(90deg, #00c8ff, #8a42ff, #ff5fab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    animation: glow 4s ease-in-out infinite alternate;
  }

  @keyframes glow {
    0% { text-shadow: 0 0 12px rgba(0,200,255,0.4); }
    100% { text-shadow: 0 0 25px rgba(255,100,200,0.4); }
  }

  .hero-section .hero-text p {
    font-size: 1.05rem;
    color: #555;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  /* ==== CTA BUTTON ==== */
  .hero-section .cta {
    margin-top: 35px;
  }

  .hero-section .cta a {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(90deg, #00c8ff, #8a42ff);
    color: white;
    padding: 12px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(130, 80, 255, 0.25);
  }

  .hero-section .cta a:hover {
    transform: scale(1.1);
    box-shadow: 0 0 35px rgba(150, 80, 255, 0.45);
  }

</style>
</head>
<body>

<section class="hero-section">
  <div class="grid"></div>

  
  <div class="floating-image">
    <img src="https://i.pinimg.com/736x/0b/03/3d/0b033dc451e06b946808a160eaf3decd.jpg" alt="Fashion Model">
  </div>

  
  <div class="hero-text">
    <h1>Modern Street Fashion</h1>
    <p>Fresh • Minimal • Trendy</p>
    <div class="cta">
      <a href="https://dropdropsheep.com/shop?">Shop Now</a>
    </div>
  </div>

  
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
</section>

</body>
</html>

<section class="infinite-slider">
  <div class="marquee">
    <div class="marquee-content">

      
      <div class="item"><img src="https://i.pinimg.com/1200x/3c/7f/bb/3c7fbb665f747f9eec218cf18c3b4df2.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/ff/55/b5/ff55b572cdc9e5c7bcb9e1e46aca153b.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/5f/70/59/5f705912e6817400ac4445f9b444e290.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/73/b4/fa/73b4fad7ee3757e71ff081c121e2ac37.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/9d/56/e6/9d56e670d3f66e8c1b66a3b1bb4b879a.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/1200x/fb/d9/3b/fbd93b8d64763913939e610e787bf082.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/1200x/e5/ce/93/e5ce93cf8a9c8dcc996350b7cf653673.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/1200x/5a/f8/8c/5af88c1dcfbd06e6e3456b16ed48d46c.jpg"></div>

      
      <div class="item"><img src="https://i.pinimg.com/1200x/3c/7f/bb/3c7fbb665f747f9eec218cf18c3b4df2.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/ff/55/b5/ff55b572cdc9e5c7bcb9e1e46aca153b.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/5f/70/59/5f705912e6817400ac4445f9b444e290.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/73/b4/fa/73b4fad7ee3757e71ff081c121e2ac37.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/736x/9d/56/e6/9d56e670d3f66e8c1b66a3b1bb4b879a.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/1200x/fb/d9/3b/fbd93b8d64763913939e610e787bf082.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/1200x/e5/ce/93/e5ce93cf8a9c8dcc996350b7cf653673.jpg"></div>
      <div class="item"><img src="https://i.pinimg.com/1200x/5a/f8/8c/5af88c1dcfbd06e6e3456b16ed48d46c.jpg"></div>

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

<style>
.infinite-slider {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  background: #0000;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marqueeAnim 18s linear infinite;
}

/* Hover: dừng slider */
.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #ccc;
  transition: transform 0.25s;
}

/* Hover: phóng to */
.item img:hover {
  transform: scale(1.15);
}

/* Chuẩn infinite loop: chạy hết 8 ảnh + 8 ảnh lặp → trôi mượt */
@keyframes marqueeAnim {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .item img {
    width: 80px;
    height: 80px;
  }
}
</style>

<div class="company-intro-section">
  <div class="intro-container">

    
    <div class="intro-text">
      <h2>About Our Company</h2>
      <div class="intro-grid">

        <div class="intro-box">
          <h3>Who We Are</h3>
          <p>
            We are a modern fashion brand specializing in premium T-shirts, sweatshirts, 
            and hoodies. Our goal is to bring comfort, authenticity, and style to every outfit.
          </p>
        </div>

        <div class="intro-box">
          <h3>Our Mission</h3>
          <p>
            Our mission is to create high-quality apparel that expresses individuality.
            We focus on sustainable materials, ethical production, and timeless design.
          </p>
        </div>

        <div class="intro-box">
          <h3>Our Vision</h3>
          <p>
            We aim to become a leading streetwear brand, inspiring confidence through 
            fashion and delivering exclusive designs for the global community.
          </p>
        </div>

      </div>
    </div>

    
    <div class="intro-image">
      <img src="https://i.pinimg.com/736x/22/97/39/229739372adf77d451b43c75b92cbfd8.jpg" alt="Company Illustration">
    </div>

  </div>
</div>

<style>
/* 🌿 NỀN GIẤY TRẮNG */
.company-intro-section {
  width: 100%;
  padding: 80px 20px;
  background-color: #fdfaf6;
  background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png'); /* texture giấy */
  background-repeat: repeat;
  font-family: 'Poppins', sans-serif;
  color: #333;
}

/* CONTAINER */
.intro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

/* LEFT TEXT */
.intro-text {
  flex: 1 1 600px;
}

.intro-text h2 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 35px;
  color: #222;
  text-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* INTRO GRID */
.intro-grid {
  display: grid;
  gap: 25px;
}

/* BOX MÀU MÈ – VIỀN NEON */
.intro-box {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid #e1e1e1;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.intro-box:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* HEADING trong BOX */
.intro-box h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}

.intro-box p {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

/* RIGHT IMAGE */
.intro-image {
  flex: 1 1 420px;
  text-align: center;
}

.intro-image img {
  max-width: 100%;
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
  transition: 0.35s ease;
}

.intro-image img:hover {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .intro-container {
    flex-direction: column-reverse;
    text-align: center;
  }
}
</style>

<div class="paper-bg">

<section class="section" id="inspiration">
  <h2>Lookbook</h2>
  <p class="muted">Shots, setups & creative angles from our community</p>
  <div class="masonry">
    <div class="tile">
      <img src="https://simg.zalopay.com.vn/zlp-website/assets/17_Mile_4122bd9e86.jpg">
    </div>
    <div class="tile">
      <img src="https://storage.googleapis.com/ops-shopee-files-live/live/shopee-blog/2023/05/96d47b68-shop-phu-kien-trang-suc-nguon_-yannews_-afamily.jpg">
    </div>
    <div class="tile">
      <img src="https://pos.nvncdn.com/6c3cf7-882/art/artCT/20160324_LrKvlxgvye5dHnQsWnkfPMEa.jpg">
    </div>
    <div class="tile">
      <img src="https://cdn.24h.com.vn/upload/3-2022/images/2022-09-09/1662715040-918-thumbnail-width740height555_anh_cat_3_2.jpg">
    </div>
    <div class="tile">
      <img src="https://dongphuckhanhlinh.com/pic/news/images/phong-cach-thoi-trang-nam-tre-trung-5.jpg">
    </div>
    <div class="tile">
      <img src="https://file.hstatic.net/1000178779/file/sat_nach_mix_quan_ong_rong_thanh_lich_5d8c3a80aa2248348cc9681341570542.jpg">
    </div>
    <div class="tile">
      <img src="https://bizweb.dktcdn.net/thumb/large/100/409/545/products/6b709c64-15b4-45e6-ae55-52ebcce37fec-1716699016817.jpg?v=1753947047690">
    </div>
  </div>
</section>

</div>

<style>
/* ---------------------------------------------------- */
/* NỀN GIẤY NHĂN + LÕM — CHỈ ÁP DỤNG TRONG paper-bg      */
/* ---------------------------------------------------- */
.paper-bg {
  padding: 50px 0;

  /* giấy xám + bóng lõm */
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), rgba(0,0,0,0) 60%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.15), rgba(0,0,0,0) 65%),
    linear-gradient(135deg, #d6d6d6, #c7c7c7 50%, #bfbfbf);

  position: relative;
  overflow: hidden;
}

/* lớp nhăn nhẹ */
.paper-bg::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 2px,
      transparent 2px,
      transparent 4px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0.04) 0px,
      rgba(0,0,0,0.04) 3px,
      transparent 3px,
      transparent 6px);

  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------------------------------------------------- */
/* NGUYÊN CODING CỦA LOOKBOOK (KHÔNG ĐỤNG ĐẾN)          */
/* ---------------------------------------------------- */
.section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

.section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.section .muted {
  color: #666;
  font-size: 1rem;
  margin-bottom: 30px;
}

.masonry {
  column-count: 3;
  column-gap: 20px;
}

.tile {
  break-inside: avoid;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tile img {
  width: 100%;
  display: block;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.tile:hover img {
  transform: scale(1.05);
}

@media (max-width: 992px) {
  .masonry { column-count: 2; }
}

@media (max-width: 600px) {
  .masonry { column-count: 1; }
}
</style>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ModernStreet — Trendy Fashion & Streetwear</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --bg:#f9f9f9;
  --accent:#ff4d6d;
  --accent-2:#ff758f;
  --muted:#555;
  --text:#1e1e1e;
  --card:#ffffff;
  --shadow:0 12px 30px rgba(0,0,0,0.08);
}

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* ===== Hero section ===== */
.hero {
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),
    url('https://images.unsplash.com/photo-1581092580490-0a0ef8b86936?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:64px 36px;
  display:grid;
  grid-template-columns:1fr 520px;
  gap:40px;
  align-items:center;
}

.hero-content h1 {
  font-family:'Playfair Display', serif;
  font-size:52px;
  margin:0 0 12px;
  color:var(--text);
}

.lead {
  color:var(--muted);
  margin-bottom:20px;
  font-size:17px;
  line-height:1.6;
}

.hero-cta {
  display:flex;
  gap:12px;
}

.btn {
  padding:12px 18px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  transition:transform .25s ease;
}

.btn-primary {
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  box-shadow:0 6px 14px rgba(255,77,109,0.3);
}

.btn-primary:hover {
  transform:translateY(-2px);
}

.tag {
  display:inline-block;
  padding:6px 8px;
  border-radius:999px;
  font-size:12px;
  background:linear-gradient(90deg,rgba(255,77,109,0.12),rgba(255,117,143,0.08));
  color:var(--accent);
  font-weight:700;
}

.muted { color:var(--muted); }
.center {
  display:flex;
  align-items:center;
  gap:12px;
}

/* ===== Card stack ===== */
.art-stack {
  position:relative;
  height:460px;
}

.card {
  position:absolute;
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  background:linear-gradient(180deg,var(--card),#fff);
  transition:transform .45s cubic-bezier(.2,.9,.2,1);
}

.card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card.card-1 {left:0;top:20px;width:320px;height:420px;transform:rotate(-6deg);}
.card.card-2 {left:160px;top:-8px;width:360px;height:480px;transform:rotate(4deg);}
.card.card-3 {left:320px;top:60px;width:260px;height:360px;transform:rotate(-2deg);}
.card:hover {transform:scale(1.03);}

.ornament {
  position:absolute;
  right:-40px;
  top:-20px;
  opacity:.9;
}

@media (max-width:720px) {
  .container {grid-template-columns:1fr;}
  .art-stack {height:300px;}
  .card.card-2 {display:none;}
}
</style>
</head>
<body>

<section class="hero">
  <div class="container">
    <div class="hero-content">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
        <span class="tag">Modern Streetwear</span>
        <span class="muted">Trendy • Limited Drops</span>
      </div>
      <h1>Urban Style — Make Your Statement</h1>
      <p class="lead">Discover our latest streetwear collection featuring bold designs, minimalistic essentials, and seasonal drops that set the trend.</p>
      
      <div class="hero-cta">
        <a href="https://dropdropsheep.com/shop?" class="btn btn-primary">See more</a>
      </div>

      <div style="margin-top:24px;display:flex;gap:12px;align-items:center">
        <div class="center">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="var(--accent)" stroke-width="1.4"/></svg>
          <div>
            <div style="font-weight:700">Premium</div>
            <div class="muted" style="font-size:13px">High-quality fabrics</div>
          </div>
        </div>
        <div class="center">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="3" stroke="var(--accent-2)" stroke-width="1.4"/></svg>
          <div>
            <div style="font-weight:700">Design</div>
            <div class="muted" style="font-size:13px">Trendy street fashion</div>
          </div>
        </div>
      </div>
    </div>

    <div class="art-stack" aria-hidden="true">
      <div class="card card-1"><img src="https://i.pinimg.com/1200x/ec/7b/98/ec7b98e815a47ee0722737bd4181e597.jpg" alt="streetwear1"></div>
      <div class="card card-2"><img src="https://i.pinimg.com/1200x/bd/e1/1a/bde11a7dbf20270a85aaa6bc136ceacf.jpg" alt="streetwear2"></div>
      <div class="card card-3"><img src="https://i.pinimg.com/1200x/5c/57/1c/5c571cc9c980af6cd7d2042ed92b56c7.jpg" alt="streetwear3"></div>
      <svg class="ornament" width="160" height="160" viewBox="0 0 200 200" fill="none">
        <defs>
          <linearGradient id="g" x1="0" x2="1">
            <stop offset="0" stop-color="#ff4d6d"/>
            <stop offset="1" stop-color="#ff758f"/>
          </linearGradient>
        </defs>
        <circle cx="90" cy="60" r="54" fill="url(#g)" opacity="0.9"/>
      </svg>
    </div>
  </div>
</section>

<script>
  // Parallax effect for hero cards
  const art = document.querySelector('.art-stack');
  if (art) {
    art.addEventListener('mousemove', (e) => {
      const r = art.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      document.querySelectorAll('.card').forEach((c, i) => {
        const depth = (i + 1) * 6;
        c.style.transform = `translate(${x * depth}px, ${y * depth}px) rotate(${(i - 1) * 3}deg) scale(1.02)`;
      });
    });
    art.addEventListener('mouseleave', () => {
      document.querySelectorAll('.card').forEach((c) => (c.style.transform = ''));
    });
  }
</script>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nirvanary — Scoped Version</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

<style>
  /* Scoped */
  .nir-container * { box-sizing: border-box; margin: 0; padding: 0; }

  .nir-container {
    font-family: 'Poppins', sans-serif;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
    width: 100%;
  }

  .nir-container .inspiration-section {
    position: relative;
    background: url('https://media.vov.vn/sites/default/files/styles/large/public/2023-08/photo-1692409130399-1692409130470592229240.jpg') center/cover no-repeat;
    padding: 120px 0;
  }

  .nir-container .overlay-dark {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1;
  }

  .nir-container .container {
    position: relative;
    z-index: 2;
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
  }

  .nir-container .left { flex: 1; }

  .nir-container .left h3 {
    color: #ff5c5c;
    font-size: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .nir-container .left h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 0 0 15px rgba(255,92,92,0.5);
  }

  .nir-container .left p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    color: #f8f0e3;
  }

  /* Slider */
  .nir-container .right {
    flex: 1;
    overflow: hidden;
    border-radius: 20px;
    max-width: 600px;
    height: 400px;
  }

  .nir-container .slider-track {
    display: flex;
    width: calc(6 * 100% / 3);
    animation: nir-scroll 24s linear infinite;
  }

  .nir-container .slider-track:hover {
    animation-play-state: paused;
  }

  .nir-container .slider-track img {
    width: 33.3333%;
    flex-shrink: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  @keyframes nir-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-66.6666%); }
  }

  /* Form */
  .nir-container .contact-form {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 500px;
  }

  .nir-container .contact-form input,
  .nir-container .contact-form textarea {
    flex: 1 1 calc(50% - 15px);
    padding: 12px 15px;
    border: 2px solid #ff5c5c;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: .3s ease;
  }

  .nir-container .contact-form textarea {
    flex: 1 1 100%;
    min-height: 120px;
    resize: none;
  }

  .nir-container .contact-form input:focus,
  .nir-container .contact-form textarea:focus {
    border-color: #ff8c32;
    background: rgba(255,255,255,0.2);
  }

  .nir-container .contact-form ::placeholder {
    color: #f0f0f0;
    opacity: .9;
  }

  .nir-container .contact-form button {
    flex: 1 1 100%;
    padding: 14px;
    background: linear-gradient(90deg,#ff5c5c,#ff8c32);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
  }

  .nir-container .contact-form button:hover {
    background: linear-gradient(90deg,#e63939,#e67600);
    transform: translateY(-2px);
  }

  /* Responsive */
  @media (max-width: 900px) {
    .nir-container .container {
      flex-direction: column;
      text-align: center;
      gap: 40px;
    }
    .nir-container .right {
      height: 300px;
      max-width: 100%;
    }
    .nir-container .contact-form input,
    .nir-container .contact-form textarea {
      flex: 1 1 100%;
    }
  }
</style>
</head>

<body>

<div class="nir-container">

<section class="inspiration-section">
  <div class="overlay-dark"></div>

  <div class="container">

    <div class="left">
      <h3>DROPDROPSHEEP</h3>
      <h2>Modern fashion
</h2>
      <p>Discover the latest Nirvanary collection featuring stylish T-shirts, hoodies, jackets, and cozy sweaters for every season.</p>
      <p>Our curated pieces combine comfort with contemporary street fashion aesthetics — perfect for casual outings or bold fashion statements.</p>
      <p>Browse, get inspired, and create your own look with Nirvanary's modern streetwear essentials.</p>

      
      <form class="contact-form" action="https://formspree.io/f/mldpqpwz" method="POST">

        <input type="text" name="name" placeholder="Your Name" required>
        <input type="email" name="email" placeholder="Your Email" required>
        <input type="text" name="subject" placeholder="Subject" required>
        <textarea name="message" placeholder="Your Message" required></textarea>

        <button type="submit">Send Message</button>
      </form>
    </div>

    <div class="right">
      <div class="slider-track">
        <img src="https://i.pinimg.com/1200x/99/d1/cf/99d1cf8725e6c3083981f525017b6eb9.jpg">
        <img src="https://i.pinimg.com/1200x/62/c4/f5/62c4f59b924d03ede3f6c984f99b4f53.jpg">
        <img src="https://i.pinimg.com/1200x/73/38/6f/73386fa39a357e2d1ea1c91b7fe8477f.jpg">
        <img src="https://i.pinimg.com/1200x/f5/76/73/f5767318693e0494173059cd8920eb4a.jpg">
        <img src="https://5sfashion.vn/storage/product/mygTbqN5IPnXJNaWdasqPUCRhg8YG7LQ.webp">
        <img src="https://i.pinimg.com/1200x/f5/76/73/f5767318693e0494173059cd8920eb4a.jpg">
      </div>
    </div>

  </div>
</section>

</div>

</body>
</html>

Customer Reviews

Representative office

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Welcome to LLC - Shop Unique Handmade, Arts, T-Shirts, Stickers, Clothes and Gifts Designed by a Global Community of Independent Artists. Find your thing or open your own shop.

Modern Street Fashion

About Our Company

Who We Are

Our Mission

Our Vision

Featured Categories

T-Shirt

Sweater

Hoodies

Products For You

Lookbook

Urban Style — Make Your Statement

DROPDROPSHEEP

Modern fashion

Customer Reviews

Thomas Kelly

Benjamin Scott

Zoe Roberts

Jack Parker

Olivia Nelson

4.67 out of 5

Customer photos & videos