<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Character Shrines</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body { font-family: 'Poppins', sans-serif; background-color: #1a001a; color: #e0b3ff; text-align: center; } header { background-color: #330033; padding: 20px; border-radius: 10px; margin-bottom: 20px; } h1 { font-size: 2.5rem; } .shrine-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin: 0 10px; } .shrine-item { background-color: #260026; border: 2px solid #993399; border-radius: 10px; padding: 10px; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; } .shrine-item:hover { transform: rotate(-2deg) translateY(-5px); box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3); } .shrine-item img { max-width: 100%; border-radius: 8px; } footer { margin-top: 20px; padding: 10px; background-color: #330033; border-radius: 10px; } a { text-decoration: none; color: #e0b3ff; } a:hover { text-decoration: underline; } </style> </head> <body> <header> <h1>✨ Shrines ✨</h1> <p>It isn't called waifuism for no reason.</p> </header> <div class="shrine-gallery"> <!-- Example Shrine Items --> <a href="/shrines/teruhashi/index.html" class="shrine-item"> <img src="/shrines/teruhashi/side.png" alt="Character 1"> <h2>Teruhashi Kokomi</h2> </a> <a href="/shrines/libbie/index.html" class="shrine-item"> <img src="/shrines/libbie/libbie.png" alt="Libbie"> <h2>Libbie The Cyber Oryx</h2> </a> <a href="/shrines/aira/" class="shrine-item"> <img src="/shrines/aira/home.png" alt="Libbie"> <h2>Shiratori Aira</h2> </a> </div> <footer> <p>💕 Built with love and sparkles! 💕</p> </footer> </body> </html>