code snippets

some code snippets i've figured out for my site that are free for you to use! linking back not neccessary but appreciated, and let me know if you use any of these so i can check your site out :D

Pokemon Card Collection

<div style="padding:10px;">
  <!-- 🌟 Pokémon Card Gallery START -->
<style>
.poke-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 10px;
}

.poke-card {
  background: #fcbcbc;
  border: 2px solid #9c4976;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.poke-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 164, 211, 0.6);
  border-color: lightpink;
}

.poke-card img {
  width: 100%;
  display: block;
}

.poke-info {
  padding: 8px;
  color: #9c4976;
}

.poke-name {
  font-weight: bold;
  font-size: 14px;
}
</style>

<div class="poke-gallery">

  <div class="poke-card">
    <img src="https://assets.pokemon-zone.com/game-assets/CardPreviews/cPK_10_001180_00_YADON_C.webp?width=350&quality=80" alt="Slowpoke">
    <div class="poke-info">
      <div class="poke-name">Slowpoke</div>
    </div>
  </div>

  <div class="poke-card">
    <img src="https://assets.pokemon-zone.com/game-assets/CardPreviews/cPK_10_001190_00_YADORAN_U.webp?width=350&quality=80" alt="Slowbro">
    <div class="poke-info">
      <div class="poke-name">Slowbro</div>
    </div>
  </div>

  <div class="poke-card">
    <img src="https://assets.pokemon-zone.com/game-assets/CardPreviews/cPK_20_015610_00_BOCHI_AR.webp?width=350&quality=80" alt="Greavard">
    <div class="poke-info">
      <div class="poke-name">Greavard</div>
    </div>
  </div>

</div>
<!-- 🌟 Pokémon Card Gallery END -->
</div>

Tumblr-Style Feed

<style>
/* --- tumblr-style gallery --- */
.tumblr-gallery {
  column-count: 3;
  column-gap: 16px;
}

@media (max-width: 900px) {
  .tumblr-gallery { column-count: 2; }
}

@media (max-width: 500px) {
  .tumblr-gallery { column-count: 1; }
}

.tumblr-post {
  break-inside: avoid;
  margin-bottom: 16px;
  background: #ab69b8;
  border: 6px dotted #471b4f;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* image */
.tumblr-post img {
  width: 100%;
  display: block;
}

/* caption */
.tumblr-caption {
  padding: 10px;
  font-size: 14px;
  color: #471b4f;
  line-height: 1.4;
  background: #d98be8;
  border-top: 1px solid #333;
}
</style>

<div class="tumblr-gallery">

  <div class="tumblr-post">
    <a href="https://www.youtube.com/watch?v=URLHERE">
    <img src="https://i.pinimg.com/736x/82/a3/3a/82a33a43be59e913b58efbdfd64e281e.jpg">
    </a>
    <div class="tumblr-caption">
      insert description here. this post links to a video
    </div>
  </div>

  <div class="tumblr-post">
    <img src="https://i.pinimg.com/736x/82/a3/3a/82a33a43be59e913b58efbdfd64e281e.jpg">
    <div class="tumblr-caption">
      insert description here. this post doesn't link.
    </div>
  </div>
  
    <div class="tumblr-post">
    <a href="https://www.youtube.com/watch?v=URLHERE">
    <img src="https://i.pinimg.com/736x/82/a3/3a/82a33a43be59e913b58efbdfd64e281e.jpg">
    </a>
    <div class="tumblr-caption">
      insert description here. this post links to a video
    </div>
  </div>
  
  <div class="tumblr-post">
    <img src="https://i.pinimg.com/736x/82/a3/3a/82a33a43be59e913b58efbdfd64e281e.jpg">
    <div class="tumblr-caption">
      insert description here. this post doesn't link.
    </div>
  </div>

  <!-- duplicate posts as needed -->

</div>

Lyrics Showcase

<div style="padding:10px;">
  <style>
.cd-dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  max-width: 900px;
  margin: auto;
}

/* CD POST */
.cd-post {
  aspect-ratio: 1 / 1;
  position: relative;
  background: rgba(0,0,0,0.7);
  border: 1px solid #fff;
  box-shadow: 0 0 8px #0ff, 0 0 15px #f0f;
  overflow: hidden;
}

/* CD DISC */
.cd-post::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle at center, #222 10%, #aaa 30%, #666 60%, #222 100%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    inset 0 0 10px rgba(255,255,255,0.3),
    0 0 8px #0ff;
    z-index: 1;
}

/* CD HOLE */
.cd-post::after {
  content: "";
  position: absolute;
  width: 12%;
  height: 12%;
  background: #000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* CONTENT */
.cd-content {
  position: absolute;
  inset: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  text-shadow: 0 0 5px #000;
  pointer-events: none;
  z-index: 2;
}

.lyric-text {
  white-space: pre-line;
}

.lyric-source {
  font-size: 9px;
  color: #ccc;
  text-align: right;
}

/* HOLOGRAPHIC SHINE */
.cd-post span.shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(0,255,255,0.2), transparent 70%);
  opacity: 0.4;
  mix-blend-mode: screen;
}

/* HOVER */
.cd-post:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0 0 15px #0ff, 0 0 25px #f0f;
}
</style>

<div class="cd-dash">

  <div class="cd-post">
    <span class="shine"></span>
    <div class="cd-content">
      <div class="lyric-text">
        lyrics here
        lyrics here
      </div>
      <div class="lyric-source">— your artist</div>
    </div>
  </div>

  <div class="cd-post">
    <span class="shine"></span>
    <div class="cd-content">
      <div class="lyric-text">
        lyrics here
        lyrics here
      </div>
      <div class="lyric-source">— your artist</div>
    </div>
  </div>

  <div class="cd-post">
    <span class="shine"></span>
    <div class="cd-content">
      <div class="lyric-text">
        lyrics here
        lyrics here
      </div>
      <div class="lyric-source">— your artist</div>
    </div>
  </div>

  <div class="cd-post">
    <span class="shine"></span>
    <div class="cd-content">
      <div class="lyric-text">
        lyrics here
        lyrics here
      </div>
      <div class="lyric-source">— your artist</div>
    </div>
  </div>

</div>
</div>