<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Superlormsl - Editorial Banner</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #1a1a1a;
            --text: #ffffff;
            --accent: #c5a059;
        }

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

        .hero {
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: var(--bg);
            overflow: hidden;
        }

        /* Hình ảnh chính */
        .hero-visual {
            position: relative;
            background: url('https://egead.nyc3.cdn.digitaloceanspaces.com/1780128170893zc03ql.webp') center/cover no-repeat;
        }

        .hero-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(26,26,26,0.8), transparent);
        }

        /* Nội dung */
        .hero-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 10%;
            color: var(--text);
            z-index: 1;
        }

        .hero-text h2 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(3rem, 8vw, 6rem);
            line-height: 0.9;
            margin-bottom: 2rem;
        }

        .hero-text p {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            color: #ccc;
            
            margin-bottom: 3rem;
            line-height: 1.6;
        }

        .btn-gold {
            display: inline-block;
            width: fit-content;
            padding: 1.2rem 3rem;
            border: 1px solid var(--accent);
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.8rem;
            font-weight: 700;
            text-decoration: none;
            transition: 0.4s;
        }

        .btn-gold:hover {
            background: var(--accent);
            color: var(--bg);
        }

        /* Mobile Fixes */
        @media (max-width: 900px) {
            .hero { grid-template-columns: 1fr; }
            .hero-visual { position: absolute; width: 100%; height: 100%; }
            .hero-text { 
                background: rgba(26, 26, 26, 0.7); 
                backdrop-filter: blur(10px);
                padding: 10%;
                text-align: center;
                align-items: center;
            }
            .hero-text h2 { font-size: 3.5rem; }
        }
    </style>
</head>
<body>

    <section class="hero">
        <div class="hero-visual"></div>
        <div class="hero-text">
            <h2>The New<i>Standard</i></h2>
            <p>Elevating everyday essentials into pieces of art. Discover the Spring 2026 collection where precision meets poetry.</p>
            <a href="/shop" class="btn-gold">Shop Now</a>
        </div>
    </section>

</body>
</html>

Our Products

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .trust-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin: 50px auto;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .trust-card {
            background: #ffffff;
            padding: 30px 20px;
            text-align: center;
            border-radius: 4px;
            /* Thiết kế box-shadow tinh tế, nhẹ nhàng */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .trust-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }

        .trust-card h4 {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #111;
            margin-bottom: 10px;
            font-weight: 800;
        }

        .trust-card p {
            font-size: 13px;
            color: #737373;
            line-height: 1.5;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .trust-grid { grid-template-columns: 1fr 1fr; }
        }
    </style>
</head>
<body>

<div class="trust-grid">
    <div class="trust-card">
        <h4>Fast Shipping</h4>
        <p>Reliable and swift delivery to your doorstep.</p>
    </div>
    <div class="trust-card">
        <h4>Flexible Payment</h4>
        <p>Secure transactions with multiple options.</p>
    </div>
    <div class="trust-card">
        <h4>Premium Support</h4>
        <p>Dedicated assistance whenever you need it.</p>
    </div>
    <div class="trust-card">
        <h4>30 Day Returns</h4>
        <p>Shop with confidence with our easy returns.</p>
    </div>
</div>

</body>
</html>

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

Featured Products

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gallery-section { 
            padding: 40px 5%; 
            font-family: 'Plus Jakarta Sans', sans-serif; 
        }
        
        .section-title { 
            font-size: 32px; 
            font-weight: 800; 
            margin-bottom: 40px; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            text-align: center;
        }
    p.description_shop{
font-size:16px;
text-align: center !important;

margin-bottom:50px;
 
}

        /* Cấu trúc Grid Responsive */
        .grid-layout { 
            display: grid; 
            /* PC: 3 cột, Mobile: 1 cột */
            grid-template-columns: repeat(3, 1fr); 
            gap: 30px; 
        }

        .item-card { 
            background: #fff; 
            padding: 8px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
            transition: 0.4s; 
        }
        
        .item-card:hover { 
            box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
            transform: translateY(-10px); 
        }
        
        .item-card img { 
            width: 100%; 
            height: 450px; 
            object-fit: cover; 
            display: block;
        }

        /* Responsive cho Mobile & Tablet */
        @media (max-width: 992px) {
            .grid-layout { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 600px) {
            .grid-layout { grid-template-columns: 1fr; }
            .item-card img { height: 350px; }
            .section-title { font-size: 24px; }
        }
    </style>
</head>
<body>

    <section class="gallery-section">
        <h2 class="section-title">Essential Picks</h2>
<p class= description_shop>Discover timeless women’s essentials with our curated collection of stylish T-Shirts and elegant Blazers — designed for effortless everyday comfort and confident sophistication.<p>
        <div class="grid-layout">
            <div class="item-card"><img src="https://i.pinimg.com/736x/18/8a/06/188a066513ac5ac299e7cc8c97d89549.jpg" alt="Fashion"></div>
            <div class="item-card"><img src="https://i.pinimg.com/1200x/3f/41/05/3f4105ecc0a4d60ccf686fe5ed808e09.jpg" alt="Fashion"></div>
            <div class="item-card"><img src="https://i.pinimg.com/736x/2e/97/f3/2e97f3ff8592f0976e8fe31ecb4b686e.jpg" alt="Fashion"></div>
        </div>
    </section>

</body>
</html>

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

The NewStandard

Our Products

Fast Shipping

Flexible Payment

Premium Support

30 Day Returns

Featured Products

Essential Picks