Birthday

<style>
  .holiday-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
  }
  .holiday-card {
    cursor: pointer;
    text-align: center;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10px;
    transition: 0.2s;
    background: #fff;
  }
  .holiday-card:hover {
    background: #f5f5f5;
  }
  .download-list {
    display: none;
    margin: 10px 0 30px;
    padding: 10px;
    background: #fcfcfc;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  .download-list a {
    display: block;
    margin: 5px 0;
    text-decoration: none;
    color: #007acc;
  }
</style>

<script>
  function toggleDownloads(id) {
    const el = document.getElementById(id);
    el.style.display = el.style.display === "block" ? "none" : "block";
  }
</script>

<h2>🎉 Holiday Printables</h2>
<p>Click a holiday below to view and download the printables inside.</p>

<div class="holiday-grid">

  <!-- Valentine's Day -->
  <div class="holiday-card" onclick="toggleDownloads('valentines')">
    <img src="https://via.placeholder.com/200x150.png?text=Valentine%27s+Day" alt="Valentine's Day" style="width:100%">
    <h3>Valentine's Day</h3>
  </div>
  <div id="valentines" class="download-list">
    <a href="https://yourcdn.com/valentines1.pdf" target="_blank">❤️ Card Printable</a>
    <a href="https://yourcdn.com/valentines2.pdf" target="_blank">💘 Banner Printable</a>
  </div>

  <!-- St. Patrick's Day -->
  <div class="holiday-card" onclick="toggleDownloads('stpatricks')">
    <img src="https://via.placeholder.com/200x150.png?text=St.+Patrick%27s+Day" alt="St. Patrick's Day" style="width:100%">
    <h3>St. Patrick's Day</h3>
  </div>
  <div id="stpatricks" class="download-list">
    <a href="https://yourcdn.com/stpats1.pdf" target="_blank">🍀 Lucky Sign</a>
    <a href="https://yourcdn.com/stpats2.pdf" target="_blank">💚 Bingo Game</a>
  </div>

  <!-- Easter -->
  <div class="holiday-card" onclick="toggleDownloads('easter')">
    <img src="https://via.placeholder.com/200x150.png?text=Easter" alt="Easter" style="width:100%">
    <h3>Easter</h3>
  </div>
  <div id="easter" class="download-list">
    <a href="https://yourcdn.com/easter1.pdf" target="_blank">🐣 Egg Hunt Signs</a>
    <a href="https://yourcdn.com/easter2.pdf" target="_blank">🐰 Bunny Banner</a>
  </div>

  <!-- 4th of July -->
  <div class="holiday-card" onclick="toggleDownloads('july4')">
    <img src="https://via.placeholder.com/200x150.png?text=4th+of+July" alt="4th of July" style="width:100%">
    <h3>4th of July</h3>
  </div>
  <div id="july4" class="download-list">
    <a href="https://yourcdn.com/july1.pdf" target="_blank">🎆 Party Sign</a>
    <a href="https://yourcdn.com/july2.pdf" target="_blank">🇺🇸 Photo Props</a>
  </div>

  <!-- Halloween -->
  <div class="holiday-card" onclick="toggleDownloads('halloween')">
    <img src="https://via.placeholder.com/200x150.png?text=Halloween" alt="Halloween" style="width:100%">
    <h3>Halloween</h3>
  </div>
  <div id="halloween" class="download-list">
    <a href="https://yourcdn.com/halloween1.pdf" target="_blank">🎃 Treat Bag Toppers</a>
    <a href="https://yourcdn.com/halloween2.pdf" target="_blank">👻 Boo Kit</a>
  </div>

  <!-- Christmas -->
  <div class="holiday-card" onclick="toggleDownloads('christmas')">
    <img src="https://via.placeholder.com/200x150.png?text=Christmas" alt="Christmas" style="width:100%">
    <h3>Christmas</h3>
  </div>
  <div id="christmas" class="download-list">
    <a href="https://yourcdn.com/christmas1.pdf" target="_blank">🎄 Gift Tags</a>
    <a href="https://yourcdn.com/christmas2.pdf" target="_blank">🎅 Letters to Santa</a>
  </div>

</div>