`data/artifacts/15fb25164101/hermes3-8b.html`

159 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop by Color</title>
<style>
:root {
    --bg: #faf8f4;
    --surface: #fff9f1;
    --text: #1c1a17;
    --muted: #9b948a;
    --accent: #b0472e / #2f4c39;
    --line: 1px solid #fff7ef;
    --shadow: 0 8px 24px rgba(0, 0, 0, .12);
    --ease: cubic-bezier(.22, 1, .36, 1);
}
body {
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    padding: 96px;
    margin: 0;
}
h1 {
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif; 
    font-size: 50px;
    letter-spacing: .18em;
    color: var(--surface);
    text-shadow: var(--shadow);
    margin: 0;
}
.color-wheel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    padding: 48px;
}
.color-card {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform .5s cubic-bezier(var(--ease)), box-shadow .3s linear, opacity .2s ease-in-out;
}
.color-card:hover,
.color-card:focus {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
    opacity: .9;
}
.color-card h3 {
    font-size: 28px; 
    color: var(--text);
    margin: 24px 0 8px;
}
.color-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 32px 48px;
}
.strip-card {
    background: #f5f2ea;
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform .4s cubic-bezier(var(--ease)), box-shadow .3s linear;
}
.strip-card:hover,
.strip-card:focus {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
}
.strip-card a {
    display: block;
    transition: transform .2s cubic-bezier(var(--ease)), color .3s linear;
}
.strip-card a:focus {
    outline: none;
    transform: translateY(-4px);
}
.strip-card a::after {
    content: '';
    display: block;
    height: 8px;
    background: var(--accent);
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    transition: width .2s ease, left .3s ease;
}
.strip-card a:hover::after {
    width: calc(100% + 32px);
    left: 0;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.section-title {
    font-size: 38px; 
    color: var(--surface);
    margin: 96px 0 32px;
    text-shadow: var(--shadow);
}
.shares {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}
.share-icon {
    fill: var(--accent);
    transition: filter .2s ease-in-out;
}
.share-icon:hover,
.share-icon:focus {
    filter: brightness(1.3);
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <h1>DESIGNER WALLCOVERINGS</h1>
        <div class="color-wheel">
            <div class="color-card" style="--color:#c9a961;">
                <h3>TERRACOTTA</h3>
                <div class="color-strip">
                    <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>
                </div>
            </div>
            <!-- More color cards -->
        </div>
        <section class="text-center mb-5 section-title">Explore Our Designs</section>
        <div class="row">
            <div class="col">
                <div class="strip-card">
                    <a href="#"></a>
                </div>
                <!-- More strip cards -->
            </div>
        </div>
    </div>
</div>
<div class="shares text-center">
    <a href="#" class="share-icon fab fa-facebook-f"></a>
    <a href="#" class="share-icon fab fa-twitter"></a>
    <a href="#" class="share-icon fab fa-instagram"></a>
</div>
</div>
</body>
</html>