← back to Model Arena
data/artifacts/1cc50031c12f/gemma3-12b.html
255 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: #faf8f4;
--surface: #ffffff;
--text: #3a2c22;
--muted: #9b948a;
--accent: #b0472e;
--line: rgba(0, 0, 0, .1);
--shadow: rgba(0, 0, 0, .12);
--ease: cubic-bezier(.22,1,.36,1);
}
body {
font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: var(--surface);
padding: 32px;
display: flex;
align-items: center;
justify-content: left; /* Keep left aligned */
font-family: 'Playfair Display', Georgia, serif;
font-size: 67px;
letter-spacing: .18em;
text-transform: uppercase;
}
.container {
padding: 96px;
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 50px;
font-family: 'Playfair Display', Georgia, serif;
text-align: center;
}
p {
font-size: 16px;
color: var(--text);
}
.carousel {
display: flex;
overflow-x: auto; /* Enable horizontal scrolling */
scroll-snap-type: x mandatory;
}
.carousel::-webkit-scrollbar {
display: none; /* Hide scrollbar in Chrome, Safari and Opera */
}
.slide {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: start;
padding: 32px;
background-color: var(--surface);
border-radius: 14px;
box-shadow: 0 8px 24px var(--shadow);
position: relative; /* For absolute positioning of dots */
}
.slide h2 {
font-size: 38px;
font-family: 'Playfair Display', Georgia, serif;
text-align: center;
margin-bottom: 24px;
}
.pattern-swatch {
width: 150px;
height: 150px;
border: 1px solid var(--line);
display: inline-block;
margin-right: 32px;
border-radius: 8px;
}
.vignette {
width: calc(100% - 182px); /* Adjust for swatch width and margin */
height: 150px;
background-color: #f7efe6; /* Placeholder background */
border-radius: 8px;
margin-left: 32px;
position: relative;
}
.vignette::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23b0472e' opacity='0.3' /%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23f7efe6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.styling-note {
font-size: 14px;
color: var(--muted);
margin-top: 16px;
}
.cta {
text-align: center;
padding: 32px;
background-color: var(--surface);
border-radius: 14px;
box-shadow: 0 8px 24px var(--shadow);
}
.cta button {
font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--accent);
color: var(--surface);
border: none;
padding: 12px 24px;
text-transform: uppercase;
letter-spacing: .15em;
font-size: 12px;
cursor: pointer;
border-radius: 6px;
}
.dots {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot {
width: 12px;
height: 12px;
border-radius: 6px;
background-color: var(--muted);
margin: 0 8px;
cursor: pointer;
}
.dot.active {
background-color: var(--accent);
}
/* Animation */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px) }
to { opacity: 1; transform: none }
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<div class="container">
<h1>Grandmillennial Lookbook</h1>
<section class="carousel">
<div class="slide" id="slide1">
<h2>Cozy Comfort</h2>
<div style="display: flex;">
<div class="pattern-swatch" style="background: linear-gradient(to bottom, var(--accent), var(--muted));"></div>
<div class="vignette"></div>
</div>
<p class="styling-note">Embrace floral prints and warm tones for a nostalgic feel.</p>
</div>
<div class="slide" id="slide2">
<h2>Textured Layers</h2>
<div style="display: flex;">
<div class="pattern-swatch" style="background: url('data:image/svg+xml,%3Csvg width=\'100%25\' height=\'100%25\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cdefs%3E%3ClinearGradient id=\'grad1\' x1=\'0%25\' y1=\'0%25\' x2=\'100%25\' y2=\'100%25\'%3E%3Cstop offset=\'0%25\' stop-color=\'var(--accent)\'%3E%3C/stop%3E%3Cstop offset=\'100%25\' stop-color=\'var(--muted)\'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=\'100%25\' height=\'100%25\' fill=\'url(#grad1)\'/%3E%3C/svg%3E');"></div>
<div class="vignette"></div>
</div>
<p class="styling-note">Mix and match textures like velvet, linen, and wool.</p>
</div>
<div class="slide" id="slide3">
<h2>Antiqued Charm</h2>
<div style="display: flex;">
<div class="pattern-swatch" style="background: repeating-linear-gradient(45deg, var(--accent) 10px, var(--muted) 20px);"></div>
<div class="vignette"></div>
</div>
<p class="styling-note">Incorporate antique furniture and vintage accessories.</p>
</div>
</section>
<div class="cta">
<button>Explore Collection</button>
</div>
</div>
<div class="dots">
<span class="dot active" data-slide="1"></span>
<span class="dot" data-slide="2"></span>
<span class="dot" data-slide="3"></span>
</div>
<script>
const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
let currentSlide = 1;
dots.forEach(dot => {
dot.addEventListener('click', () => {
goToSlide(parseInt(dot.dataset.slide));
});
});
function goToSlide(n) {
slides.forEach((slide, index) => {
if (index + 1 === n) {
slide.classList.add('active');
} else {
slide.classList.remove('active');
}
});
dots.forEach(dot => {
dot.classList.remove('active');
});
document.querySelector(`.dot[data-slide="${n}"]`).classList.add('active');
currentSlide = n;
}
// Auto scroll (optional)
let autoScrollInterval = setInterval(() => {
goToSlide(currentSlide % slides.length + 1);
currentSlide++;
}, 5000);
</script>
</body>
</html>