`data/artifacts/18bd2744dce2/qwen25-7b.html`

139 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seasonal Wallcovering COLOR STORY</title>
    <style>
        :root {
            --bg: #f7efe6;
            --surface: #fff9f1;
            --text: #3a2c22;
            --muted: #a08c7a;
            --accent: #c65f38;
            --line: 1px solid var(--bg);
            --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18);
            --ease: cubic-bezier(.22,1,.36,1);
        }
        body {
            margin: 0;
            padding: 0;
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 1080px;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 220px;
            background-color: var(--surface);
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: inset 0 -4px 8px rgba(0,0,0,.15);
        }
        .header-logo {
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            color: var(--text);
            text-transform: uppercase;
            letter-spacing: .18em;
            margin-right: auto;
        }
        .carousel {
            width: 720px;
            height: 1080px;
            overflow-x: scroll;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            display: flex;
            gap: 16px;
        }
        .carousel::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        .slide {
            width: 720px;
            height: 1080px;
            position: relative;
            overflow: hidden;
            perspective: 1000px;
        }
        .swatch {
            width: 360px;
            height: 540px;
            background-color: var(--accent);
            border-radius: 14px;
            box-shadow: inset 0 -8px 24px rgba(0,0,0,.12), var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .swatch::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            border-radius: 14px;
            box-shadow: inset 0 -8px 24px rgba(0,0,0,.12), var(--shadow);
        }
        .swatch-label {
            font-size: 12px;
            letter-spacing: .15em;
            color: var(--text);
        }
        .cta {
            width: 360px;
            height: 540px;
            background-color: var(--bg);
            border-radius: 14px;
            box-shadow: inset 0 -8px 24px rgba(0,0,0,.12), var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cta-text {
            font-size: 38px;
            letter-spacing: .15em;
            color: var(--accent);
        }
    </style>
</head>
<body>
    <div class="header">
        <span class="header-logo">DESIGNER WALLCOVERINGS</span>
        <div>Scoreboard</div>
    </div>
    <div class="carousel" style="scroll-snap-type: x mandatory;">
        <div class="slide" style="background-color: var(--bg); scroll-snap-align: start;">
            <h1 style="font-size: 50px; margin-bottom: 24px;">Terracotta & Sage</h1>
        </div>
        <div class="slide">
            <div class="swatch" style="background-color: #c65f38;"></div>
            <span class="swatch-label">Oatmeal</span>
            <p>Perfect for living rooms and entryways.</p>
        </div>
        <div class="slide">
            <div class="swatch" style="background-color: #e0a458;"></div>
            <span class="swatch-label">Celadon</span>
            <p>Add a touch of elegance to your dining area.</p>
        </div>
        <div class="slide">
            <div class="swatch" style="background-color: #c9a961;"></div>
            <span class="swatch-label">Terracotta</span>
            <p>Create a warm and inviting atmosphere in your bedroom.</p>
        </div>
        <div class="slide cta">
            <h2 style="font-size: 38px;">Shop Now</h2>
        </div>
    </div>
</body>
</html>