← back to Model Arena
data/artifacts/15bc10e7ee25/hf-qwen-coder-32b.html
250 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grandmillennial Lookbook</title>
<style>
:root {
--bg-color: #faf8f4;
--surface-color: #ffffff;
--text-color: #1c1a17;
--muted-color: #9b948a;
--accent-color-1: #b0472e;
--accent-color-2: #2f4c39;
--font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 24px;
--spacing-6: 32px;
--spacing-7: 48px;
--spacing-8: 64px;
--spacing-9: 96px;
--spacing-10: 128px;
--card-radius: 14px;
}
body {
margin: 0;
font-family: var(--font-body);
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
header {
position: absolute;
top: var(--spacing-6);
left: var(--spacing-6);
font-family: var(--font-display);
color: var(--text-color);
letter-spacing: .15em;
text-transform: uppercase;
font-size: 12px;
}
.carousel {
width: 90%;
max-width: 800px;
overflow: hidden;
position: relative;
}
.carousel-inner {
display: flex;
transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
padding: var(--spacing-9);
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: var(--surface-color);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
border-radius: var(--card-radius);
padding: var(--spacing-5);
display: flex;
align-items: center;
transition: box-shadow .3s ease-in-out;
}
.card:hover {
box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.card-content {
display: flex;
gap: var(--spacing-5);
}
.card-text {
display: flex;
flex-direction: column;
}
h2 {
font-family: var(--font-display);
margin: 0;
font-size: 38px;
}
p {
margin: 0;
color: var(--muted-color);
}
.pattern-swatch, .room-vignette {
width: 150px;
height: 150px;
}
.dots-container {
position: absolute;
bottom: var(--spacing-6);
display: flex;
gap: var(--spacing-2);
justify-content: center;
width: 100%;
}
.dot {
width: 8px;
height: 8px;
background-color: var(--muted-color);
border-radius: 50%;
cursor: pointer;
transition: background-color .3s ease-in-out;
}
.dot.active {
background-color: var(--accent-color-1);
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<div class="carousel">
<div class="carousel-inner" id="carouselInner">
<!-- Cover Slide -->
<div class="carousel-item">
<div class="card" style="animation: fadeUp .7s;">
<h2>GRANDMILLENNIAL</h2>
<p>Elevate your space with timeless elegance.</p>
</div>
</div>
<!-- Slide 1 -->
<div class="carousel-item">
<div class="card" style="animation: fadeUp .7s;">
<div class="card-content">
<svg class="pattern-swatch" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:var(--accent-color-1);stop-opacity:1" />
<stop offset="100%" style="stop-color:var(--surface-color);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#grad1)" />
</svg>
<div class="card-text">
<h2>Floral Chic</h2>
<p>Add a touch of vintage flair.</p>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<div class="card" style="animation: fadeUp .7s;">
<div class="card-content">
<svg class="pattern-swatch" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:var(--accent-color-2);stop-opacity:1" />
<stop offset="100%" style="stop-color:var(--surface-color);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#grad2)" />
</svg>
<div class="card-text">
<h2>Geometric Elegance</h2>
<p>Master the art of simplicity.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<div class="card" style="animation: fadeUp .7s;">
<div class="card-content">
<svg class="pattern-swatch" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:var(--accent-color-1);stop-opacity:1" />
<stop offset="50%" style="stop-color:var(--accent-color-2);stop-opacity:1" />
<stop offset="100%" style="stop-color:var(--surface-color);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#grad3)" />
</svg>
<div class="card-text">
<h2>Modern Luxe</h2>
<p>Merge past and present.</p>
</div>
</div>
</div>
</div>
<!-- CTA Slide -->
<div class="carousel-item">
<div class="card" style="animation: fadeUp .7s;">
<h2>Discover More</h2>
<p>Visit our website for exclusive collections.</p>
</div>
</div>
</div>
<!-- Dots -->
<div class="dots-container">
<div class="dot active" onclick="changeSlide(0)"></div>
<div class="dot" onclick="changeSlide(1)"></div>
<div class="dot" onclick="changeSlide(2)"></div>
<div class="dot" onclick="changeSlide(3)"></div>
</div>
</div>
<script>
let currentSlide = 0;
const totalSlides = document.querySelectorAll('.carousel-item').length;
const carouselInner = document.getElementById('carouselInner');
function changeSlide(newIndex) {
if (newIndex >= 0 && newIndex < totalSlides) {
currentSlide = newIndex;
updateCarousel();
updateDots();
}
}
function updateCarousel() {
carouselInner.style.transform = `translateX(-${currentSlide * 100}%)`;
}
function updateDots() {
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentSlide);
});
}
// Auto slide change every 5 seconds
setInterval(() => {
changeSlide((currentSlide + 1) % totalSlides);
}, 5000);
</script>
</body>
</html>