`data/artifacts/131728b7aeb6/hermes3-8b.html`

199 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color of the Season: Celadon</title>
<style>
  :root {
    --bg: #faf8f4;
    --surface: #ffffff;
    --text: #1c1a17;
    --muted: #9b948a; 
    --accent-primary: #b0472e;
    --accent-secondary: #2f4c39;
    --line: 1px solid rgba(0,0,0,.05);
    --shadow-light: 0 8px 24px rgba(0,0,0,.06); 
    --shadow-hover: 0 16px 48px rgba(0,0,0,.18);
    --ease-in-out-quart: cubic-bezier(.165, .84, .44, 1);
  }
  
  body {
    font-family: 'EB Garamond', serif;
    line-height: 1.6;
    background-color: var(--bg); 
    color: var(--text);
    margin: 0; padding: 96px;
  }

  h1 { 
    font-family: 'Cormorant Garamond', serif;
    font-size: 50px;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin: 0;
  }
  
  .wordmark {
    background-color: var(--surface);
    padding: 4px 8px;
    border-radius: 14px;
    display: inline-block;
    position: fixed;
    top: 24px;
    left: 24px;
    box-shadow: var(--shadow-light);
  }
  
  .reel {
    display: grid;
    gap: 24px;
    padding: 96px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .card {
    background-color: var(--surface);
    border-radius: 14px; 
    box-shadow: var(--shadow-light);
    overflow: hidden;
    cursor: default;
  }
  
  .card h2 {
    font-size: 28px;
    text-transform: uppercase;
    margin: 0;
    padding: 24px;
    background-color: var(--muted);
    color: var(--surface);
  }

  .card p {
    font-size: 16px;
    margin: 0; 
    padding: 0 24px 24px;
  }
  
  .reel button {
    display: block;
    background-color: var(--accent-primary);
    border-radius: 14px;
    color: var(--surface);
    font-family: 'EB Garamond', serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 12px 24px; 
    margin: 0 auto;
    border: none;
    cursor: pointer;
    transition: background-color .3s, box-shadow .3s;
  }
  
  .reel button:hover {
    filter: brightness(90%);
    box-shadow: var(--shadow-hover);
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); } 
  }
  
  .slide, .card {
    animation: fadeUp .7s var(--ease-in-out-quart) both;
    animation-delay: calc(var(--index) * 90ms);
    animation-fill-mode: forwards;
  }

  @keyframes scrollProgress {
    to { background-position: 100% }  
  }
  
  .progress-bar {
    height: 4px; 
    background-color: var(--muted);
    width: 0%;
    position: fixed;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: calc(var(--index) * 260px);
    animation: scrollProgress 3s linear infinite;
  }

</style>
</head>
<body>

<div class="wordmark">DESIGNER WALLCOVERINGS</div>

<div class="reel">
  <div class="card" style="--index:0;">
    <h2>This season it's all about...</h2>
    <p>Celadon</p>
    <button>Shop Now</button>
  </div>
  
  <div class="card" style="--index:1;">
    <img src="celadon-pattern-1.svg" alt="">
    <p>Swatch #1</p>
  </div>

  <div class="card" style="--index:2;">
    <img src="celadon-pattern-2.svg" alt="">
    <p>Swatch #2</p>
  </div>

  <div class="card" style="--index:3;">
    <img src="celadon-pattern-3.svg" alt="">
    <p>Swatch #3</p>
  </div>
  
  <div class="card" style="--index:4;">
    <h2>Tips for Incorporating Celadon</h2>
    <p>Try pairing celadon with warm metallics or earthy neutrals for a sophisticated look.</p>
  </div>

  <div class="card" style="--index:5;">
    <button>Shop This Look</button>
  </div>
</div>

<div class="progress-bar"></div>

<script>
  let index = 0;
  
  const cards = document.querySelectorAll('.reel .card');
  const totalCards = cards.length;

  function nextSlide() {
    cards[index].style.display = 'none';
    
    index++;
    if(index >= totalCards) index = 0;
    
    cards[index].style.display = 'block';
    
    updateProgressBar();
  }

  document.querySelector('.reel').addEventListener('click', nextSlide);

  function updateProgressBar() {
    const progress = (index * 100) / totalCards;
    document.querySelector('.progress-bar').style.width = `${progress}%`;
  }

  setInterval(() => {
    if(index < totalCards - 1) index++;
    else index = 0;

    cards[index].style.display = 'block';
    
    updateProgressBar();
  }, 7000);
</script>
</body>
</html>