<section class="hero-banner">
    
    <div class="banner-bg">
        <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/1778836693578xt3qa6.webp" alt="High Fashion Collection">
    </div>
    
    
    <div class="banner-overlay"></div>

    
    <div class="banner-content">
        <div class="content-box">
            <span class="subtitle">Spring / Summer 2026</span>
            <h1 class="title">REDEFINE YOUR <br><span>VISUAL IDENTITY</span></h1>
            <p class="description">
                Experience the pinnacle of modern craftsmanship. Discover a curated collection where timeless elegance meets contemporary bold aesthetics.
            </p>
            <div class="banner-actions">
                <a href="/shop" class="btn-shop">
                    SHOP THE COLLECTION
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                </a>
            </div>
        </div>
    </div>
</section>

<style>
    /* Section Container */
    .hero-banner {
        position: relative;
        height: calc(100vh - 70px); /* Adjust based on your header height */
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        background: #000;
    }

    /* Background Zoom Animation */
    .banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .banner-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: subtleZoom 20s infinite alternate;
    }

    /* Gradient Overlay */
    .banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, 
            rgba(0,0,0,0.7) 0%, 
            rgba(0,0,0,0.3) 60%, 
            rgba(0,0,0,0.1) 100%);
        z-index: 2;
    }

    /* Content Layout */
    .banner-content {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 60px;
    }

    .content-box {
        max-width: 650px;
        color: #fff;
    }

    /* Text Animations & Styles */
    .subtitle {
        display: block;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin-bottom: 15px;
        color: #a855f7; /* Brand Purple */
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards 0.2s;
    }

    .title {
        font-size: clamp(42px, 7vw, 75px);
        line-height: 1.05;
        font-weight: 800;
        margin-bottom: 25px;
        opacity: 0;
        text-shadow: 0 10px 30px rgba(0,0,0,0.2);
        animation: fadeInUp 0.8s ease forwards 0.4s;
    }

    .title span {
        background: linear-gradient(90deg, #fff, #c084fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .description {
        font-size: 18px;
        line-height: 1.7;
        margin-bottom: 45px;
        color: rgba(255, 255, 255, 0.85);
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards 0.6s;
    }

    /* Modern Rounded Button */
    .btn-shop {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        padding: 20px 45px;
        background: #fff;
        color: #0f172a;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        border-radius: 50px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        opacity: 0;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        animation: fadeInUp 0.8s ease forwards 0.8s;
    }

    .btn-shop svg {
        transition: transform 0.3s ease;
    }

    .btn-shop:hover {
        background: #a855f7;
        color: #fff;
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.4);
    }

    .btn-shop:hover svg {
        transform: translateX(8px);
    }

    /* Keyframes */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes subtleZoom {
        from { transform: scale(1); }
        to { transform: scale(1.1); }
    }

    /* Mobile Optimization */
    @media (max-width: 768px) {
        .hero-banner { height: 85vh; }
        .banner-content { padding: 0 25px; text-align: center; }
        .content-box { margin: 0 auto; }
        .title { font-size: 40px; }
        .description { font-size: 16px; padding: 0 10px; }
        .banner-overlay {
            background: rgba(0, 0, 0, 0.5); /* Darker on mobile for readability */
        }
    }
</style>

Optional subtitle text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        body {
            background-color: #f8fafc;
            padding: 60px 0px;
        }

        .gallery-container {
            
            margin: 0 auto;
        }

        /* Tiêu đề sát lề trái theo ảnh mẫu */
        .gallery-header {
            margin-bottom: 40px;
            text-align: left;
        }

        .gallery-header h2 {
            font-size: 38px;
            font-weight: 900;
            text-transform: uppercase;
            color: #000;
            letter-spacing: -1px;
            margin-bottom: 8px;
        }

        .gallery-header p {
            font-size: 16px;
            color: #64748b;
            font-weight: 500;
        }

        /* Lưới 4 cột */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            height: 520px; /* Độ cao khung ảnh */
            border-radius: 24px; /* Bo góc mạnh theo mẫu */
            overflow: hidden;
            cursor: pointer;
        }

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

        /* Lớp phủ mờ nhẹ ở chân ảnh để chữ nổi hơn */
        .gallery-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
            pointer-events: none;
        }

        /* Chữ nằm đè lên ảnh */
        .item-text {
            position: absolute;
            bottom: 25px;
            left: 25px;
            color: #fff;
            z-index: 2;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: transform 0.3s ease;
        }

        /* Hiệu ứng Hover */
        .gallery-item:hover img {
            transform: scale(1.08);
        }

        .gallery-item:hover .item-text {
            transform: translateY(-5px);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 600px) {
            .gallery-grid { grid-template-columns: 1fr; }
            .gallery-item { height: 450px; }
            .gallery-header h2 { font-size: 28px; }
        }
    </style>
</head>
<body>

    <div class="gallery-container">
        <header class="gallery-header">
            <h2>SEASONAL HIGHLIGHTS</h2>
            <p>A closer look at this week's trending styles.</p>
        </header>

        <main class="gallery-grid">
            <div class="gallery-item">
                <img src="https://princessace.com/cdn/shop/files/caa1f4d2d28371d2c1e97f5dfe05d023.jpg?v=1757496906&width=600" alt="Street Minimal">
                <div class="item-text">Street Minimal</div>
            </div>

            <div class="gallery-item">
                <img src="https://i.pinimg.com/736x/39/a0/fc/39a0fce8ace414400ef804ff564f315b.jpg" alt="Avant Garde">
                <div class="item-text">Avant Garde</div>
            </div>

            <div class="gallery-item">
                <img src="https://i.pinimg.com/1200x/0a/02/60/0a0260e8f37579e2b2a61ab5ad4f6e3a.jpg" alt="Silk Touch">
                <div class="item-text">Silk Touch</div>
            </div>

            <div class="gallery-item">
                <img src="https://i.pinimg.com/736x/32/55/3b/32553b5acea53ff5046dc1cc3854a35a.jpg" alt="Ethereal">
                <div class="item-text">Ethereal</div>
            </div>
        </main>
    </div>

</body>
</html>

Representative office

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Welcome to Checksettlement - 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.

Checksettlement | Handmades, Personalized Custom Clothes & Gifts

Checksettlement

Contact us

United States

REDEFINE YOUR
VISUAL IDENTITY

Best Products

Feadtured Products

SEASONAL HIGHLIGHTS

REDEFINE YOUR VISUAL IDENTITY

Best Products

Feadtured Products

REDEFINE YOUR
VISUAL IDENTITY