<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion Slider - New Brands Incoming</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Montserrat:wght@300;400;600&display=swap');

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

        .slider-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: #000;
        }

        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out, transform 1.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slide.active {
            opacity: 1;
            z-index: 1;
        }

        /* Hình nền có lớp phủ tối */
        .slide img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.8);
        }

        /* --- CONTENT --- */
        .slide-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            max-width: 800px;
            padding: 0 20px;
        }

        .label {
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: block;
            opacity: 0.9;
        }

        .slide-content h2 {
            font-family: 'Bodoni Moda', serif;
            font-size: clamp(40px, 8vw, 85px);
            font-weight: 400;
            line-height: 1.1;
            margin-bottom: 25px;
        }

        .slide-content h2 span {
            font-style: italic;
        }

        .slide-content p {
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            font-weight: 300;
            line-height: 1.8;
            max-width: 550px;
            margin: 0 auto 40px;
            opacity: 0.8;
        }

        /* --- BUTTON --- */
        .view-more-btn {
            display: inline-block;
            padding: 15px 45px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: transparent;
            color: #fff;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .view-more-btn:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

        /* --- NAVIGATION ARROWS --- */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 20px;
            transition: 0.3s;
        }

        .arrow svg {
            width: 40px;
            height: 20px;
            fill: none;
            stroke: #fff;
            stroke-width: 1;
        }

        .arrow:hover {
            opacity: 0.6;
        }

        .prev { left: 30px; }
        .next { right: 30px; }

        /* Hiệu ứng trượt chữ nhẹ khi đổi slide */
        .active .slide-content {
            animation: fadeInUp 1.2s ease forwards;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>

    <div class="slider-container">
        <div class="slide active">
            <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/1775553164069r1anvs.webp" alt="Fashion 1">
            <div class="slide-content">
                <span class="label">Fashion Designers</span>
                <h2>New <span>Brands</span> Incoming</h2>
                <p>Explore our curated selection of luxury labels. Elevate your wardrobe with the finest textures and modern silhouettes.</p>
                <a href="/shop" class="view-more-btn">View More</a>
            </div>
        </div>

        <div class="slide">
            <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/1775553055392fzfr1f.webp?q=80&w=2070" alt="Fashion 2">
            <div class="slide-content">
                <span class="label">Limited Collection</span>
                <h2>Spring <span>MUSE</span> 2026</h2>
                <p>A fresh breath of contemporary elegance. Discover the essence of the new season through our exclusive lookbook.</p>
                <a href="/shop" class="view-more-btn">Shop Now</a>
            </div>
        </div>

        <button class="arrow prev" onclick="changeSlide(-1)">
            <svg viewBox="0 0 50 20"><path d="M50 10H2M2 10L10 2M2 10L10 18"/></svg>
        </button>
        <button class="arrow next" onclick="changeSlide(1)">
            <svg viewBox="0 0 50 20"><path d="M0 10H48M48 10L40 2M48 10L40 18"/></svg>
        </button>
    </div>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');

        function changeSlide(direction) {
            slides[currentSlide].classList.remove('active');
            currentSlide = (currentSlide + direction + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
        }

        // Tự động chuyển slide sau 5 giây
        setInterval(() => changeSlide(1), 5000);
    </script>

</body>
</html>

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

Featured products

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>High-End Editorial Banner</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,700;1,900&family=Montserrat:wght@300;400;700&display=swap');

        /* --- CONTAINER --- */
        .promo-card {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 680px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        }

        /* Hình ảnh với hiệu ứng mượt hơn */
        .promo-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1);
            filter: grayscale(20%) brightness(0.9);
        }

        /* Chữ nền khổng lồ (Backdrop Text) */
        .backdrop-text {
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Bodoni Moda', serif;
            font-size: 140px;
            color: rgba(245, 222, 179, 0.15); /* Màu Wheat cực nhạt */
            white-space: nowrap;
            pointer-events: none;
            z-index: 1;
            font-style: italic;
        }

        /* Lớp phủ Gradient */
        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, 
                rgba(0,0,0,0.9) 0%, 
                rgba(0,0,0,0.2) 40%, 
                transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            z-index: 3;
        }

        /* Khung kính mờ chứa nội dung (Glassmorphism) */
        .glass-box {
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.05);
            padding: 30px;
            border: 1px solid rgba(245, 222, 179, 0.2);
            text-align: left;
            position: relative;
            overflow: hidden;
        }

        /* Nội dung văn bản */
        .content h2 {
            font-family: 'Bodoni Moda', serif;
            color: #F5DEB3; /* Màu Wheat */
            font-size: 42px;
            line-height: 1;
            margin-bottom: 15px;
            font-style: italic;
            letter-spacing: -1px;
        }

        .content p {
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            font-size: 13px;
            line-height: 1.8;
            margin-bottom: 25px;
            opacity: 0.8;
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        /* Nút Shop Now nghệ thuật */
        .shop-link {
            display: inline-flex;
            align-items: center;
            font-family: 'Montserrat', sans-serif;
            color: #F5DEB3;
            text-decoration: none;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 3px;
            transition: 0.4s ease;
        }

        .shop-link::after {
            content: '';
            width: 40px;
            height: 1px;
            background: #F5DEB3;
            margin-left: 15px;
            transition: 0.4s ease;
        }

        /* --- HIỆU ỨNG KHI HOVER --- */
        .promo-card:hover img {
            transform: scale(1.08);
            filter: grayscale(0%) brightness(1);
        }

        .promo-card:hover .glass-box {
            border-color: rgba(245, 222, 179, 0.6);
            background: rgba(255, 255, 255, 0.08);
        }

        .shop-link:hover {
            letter-spacing: 5px;
            color: #fff;
        }

        .shop-link:hover::after {
            width: 60px;
            background: #fff;
        }

        /* Decorative Line */
        .line-deco {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 1px;
            height: 60px;
            background: #F5DEB3;
            z-index: 4;
        }
    </style>
</head>
<body>

    <div class="promo-card">
        <div class="backdrop-text">DENIM</div>
        
        <div class="line-deco"></div>
        
        <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/17755546339406atwnc.webp" alt="Fashion Denim">
        
        <div class="overlay">
            <div class="glass-box">
                <div class="content">
                    <h2>Denim<br>Soul</h2>
                    <p>Discover 14 hand-picked denim silhouettes designed for the modern autumn transition.</p>
                    <a href="/category/Denim%20Jackets" class="shop-link">Explore Now</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion Grid - Refinedmanstyle</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600&display=swap');

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

        body {
            background-color: #fff;
            padding: 20px;
        }

        /* --- GRID SYSTEM --- */
        .fashion-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr; /* Chia 3 cột: Cột đầu rộng gấp đôi */
            grid-template-rows: repeat(2, 350px); /* 2 hàng, mỗi hàng 350px */
            gap: 15px;
        }

        /* Khối chung */
        .grid-item {
            position: relative;
            overflow: hidden;
            text-decoration: none;
            display: block;
        }

        .grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .grid-item:hover img {
            transform: scale(1.05);
        }

        /* Khối lớn bên trái (Jacket) */
        .item-large {
            grid-row: span 2; /* Trải dài 2 hàng */
        }

        /* Khối chữ trắng (Essentials/Accessories) */
        .item-text {
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

        /* --- TYPOGRAPHY --- */
        .category-label {
            font-family: 'Montserrat', sans-serif;
            font-size: 10px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #888;
            margin-bottom: 5px;
        }

        .category-title {
            font-family: 'Bodoni Moda', serif;
            font-size: 32px;
            color: #1a1a1a;
            font-weight: 400;
        }

        /* Banner chính có chữ đè lên ảnh */
        .overlay-content {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            width: 100%;
            color: #fff;
        }

        .overlay-content h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 28px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        .overlay-content p {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            margin-bottom: 15px;
            font-weight: 400;
        }

        .shop-btn {
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            border-bottom: 2px solid #fff;
            padding-bottom: 3px;
            transition: 0.3s;
        }

        .grid-item:hover .shop-btn {
            color: #F5DEB3;
            border-color: #F5DEB3;
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 992px) {
            .fashion-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
            }
            .item-large { grid-column: span 2; grid-row: span 1; height: 500px; }
        }

        @media (max-width: 600px) {
            .fashion-grid {
                grid-template-columns: 1fr;
            }
            .item-large { grid-column: span 1; }
            .item-hide-mobile { display: none; }
        }
    </style>
</head>
<body>

    <div class="fashion-grid">
        
        <a href="/category/jackets" class="grid-item item-large">
            <img src="https://spacing.nyc3.cdn.digitaloceanspaces.com/1775552008782ykpq0l.jpg" alt="Jackets">
           

        <a href="/category/hoodies" class="grid-item item-text">
            <span class="category-label">Comfort</span>
            <h3 class="category-title">Hoodies</h3>
        </a>

        <div class="grid-item">
            <img src="https://i.pinimg.com/1200x/0c/8e/2e/0c8e2ef75ad5a542cc4446fa89fa556b.jpg" alt="Hoodie Style">
        </div>

        <div class="grid-item item-hide-mobile">
            <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=600" alt="Jacket Detail">
        </div>

        <a href="/category/Jackets" class="grid-item item-text">
            <span class="category-label">Fashion</span>
            <h3 class="category-title">Jackets</h3>
        </a>

    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Designers Picks - Refinedmanstyle Woman</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Montserrat:wght@300;400;600&display=swap');

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

        /* BANNER WRAPPER */
        .designer-picks-banner {
            position: relative;
            width: 100%;
            height: 550px; /* Độ cao tương đương mẫu */
            display: flex;
            align-items: center;
            background-color: #fff;
            overflow: hidden;
        }

        /* IMAGE SIDE (Left) */
        .banner-image {
            position: absolute;
            left: 0;
            top: 0;
            width: 55%; /* Chiếm hơn nửa bề ngang */
            height: 100%;
        }

        .banner-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Hiệu ứng bóng đổ nhẹ phía sau quần áo để giống ảnh gốc */
            filter: drop-shadow(20px 0 30px rgba(0,0,0,0.05));
        }

        /* CONTENT SIDE (Right) */
        .banner-content {
            width: 100%;
            padding-right: 10%;
            display: flex;
            flex-direction: column;
            align-items: flex-end; /* Căn lề phải như mẫu */
            text-align: right;
            z-index: 2;
        }

        /* TYPOGRAPHY */
        .banner-content h2 {
            font-family: 'Bodoni Moda', serif;
            font-size: 42px;
            font-weight: 400;
            color: #1a1a1a;
            margin-bottom: 20px;
        }

        .banner-content h2 span {
            font-style: italic; /* Chữ DESIGNERS in nghiêng như mẫu */
            font-family: 'Bodoni Moda', serif;
        }

        .banner-content p {
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            color: #555;
            line-height: 1.8;
            max-width: 450px;
            margin-bottom: 35px;
        }

        /* --- BUTTON WITH RUNNING BORDER EFFECT --- */
        .shop-now-btn {
            position: relative;
            display: inline-block;
            padding: 18px 45px;
            background-color: #0d3b2e; /* Màu xanh Dark Green như mẫu */
            color: #ffffff;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid #0d3b2e;
        }

        /* Đường chạy viền 1 */
        .shop-now-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: #ffffff;
            transition: all 0.4s;
        }

        /* Đường chạy viền 2 */
        .shop-now-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: #ffffff;
            transition: all 0.4s;
        }

        /* HOVER EFFECT */
        .shop-now-btn:hover {
            background-color: #145241; /* Sáng hơn một chút khi hover */
            letter-spacing: 5px; /* Giãn chữ nhẹ */
        }

        .shop-now-btn:hover::before {
            left: 0;
        }

        .shop-now-btn:hover::after {
            right: 0;
        }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .banner-content h2 { font-size: 32px; }
            .banner-image { width: 50%; }
        }

        @media (max-width: 768px) {
            .designer-picks-banner {
                flex-direction: column;
                height: auto;
                padding-bottom: 50px;
            }
            .banner-image {
                position: relative;
                width: 100%;
                height: 400px;
            }
            .banner-content {
                padding: 40px 20px;
                align-items: center;
                text-align: center;
            }
            .banner-content p { max-width: 100%; }
        }
    </style>
</head>
<body>

    <section class="designer-picks-banner">
        <div class="banner-image">
            <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/1775552606626jjnls8.webp" alt="Women Designer Picks">
        </div>

        <div class="banner-content">
            <h2>Top <span>DESIGNERS</span> Picks</h2>
            <p>
                Discover our curated selection of premium outerwear. 
                From tailored wool coats to sophisticated silhouettes, 
                elevate your autumn wardrobe with our exclusive designer collection.
            </p>
            <a href="/shop" class="shop-now-btn">Shop Here</a>
        </div>
    </section>

</body>
</html>

Let shoppers switch between top categories without leaving the section.

Shop products by tab

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

Home

Shop real women's fashion categories with cleaner merchandising and policy-safe navigation defaults.

New Brands Incoming

Spring MUSE 2026

Featured products

Hoodies

Jackets

Top DESIGNERS Picks

Shop products by tab

New Brands Incoming

Spring MUSE 2026

Featured products

DenimSoul

Hoodies

Jackets

Top DESIGNERS Picks

Shop products by tab

Denim
Soul