<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kokomi Teruhashi Shrine</title> <style> :root { --main-bg-color: #255db3; --accent-color: #447edb; --text-color: #ffffff; --box-bg-color: #1e468c; --sidebar-color: rgba(0, 0, 0, 0.7); } body { font-family: 'Poppins', sans-serif; background-color: var(--main-bg-color); color: var(--text-color); margin: 0; display: flex; } main { flex-grow: 1; padding: 20px; background: url('/shrines/teruhashi/bg.png') no-repeat center center fixed; background-size: cover; display: flex; flex-direction: column; justify-content: space-between; } .sidebar { width: 250px; background-color: var(--sidebar-color); color: var(--text-color); padding: 20px; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); overflow-y: auto; } .sidebar img { max-width: 100%; border-radius: 10px; margin-bottom: 10px; } .sidebar h2 { text-align: center; } header { text-align: center; margin-bottom: 20px; } header h1 { font-size: 2.5rem; color: var(--accent-color); animation: sparkle 2s infinite; } @keyframes sparkle { 0%, 100% { text-shadow: 0 0 5px white; } 50% { text-shadow: 0 0 15px white; } } .content { flex: 1; max-width: 800px; margin: auto; text-align: center; background-color: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 10px; } .content p.moving-text { animation: pop-in 2s ease-in-out; display: inline-block; white-space: nowrap; } @keyframes pop-in { 0% { transform: translateX(-100%); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(10%); opacity: 0; } } .content .highlight-box { background-color: var(--box-bg-color); padding: 15px; margin: 10px 0; border-radius: 10px; transition: transform 0.3s; } .content .highlight-box:hover { transform: scale(1.05); } .did-you-know { background-color: var(--accent-color); color: white; padding: 15px; border-radius: 10px; margin: 20px 0; } .audio-player { margin: 20px 0; } .two-columns { display: flex; gap: 20px; } .left-column { flex: 1; background-color: rgba(8, 14, 95, 0.918); padding: 20px; border-radius: 10px; } .right-column { flex: 1; background-color: rgba(8, 14, 95, 0.918); padding: 20px; border-radius: 10px; } footer { text-align: center; margin-top: 20px; color: var(--text-color); } @media (max-width: 768px) { body { flex-direction: column; } .sidebar { width: 100%; text-align: center; } .two-columns { flex-direction: column; } } </style> </head> <body> <div class="sidebar"> <img src="/shrines/teruhashi/side.png" alt="Kokomi Teruhashi"> <h2>Kokomi Teruhashi</h2> <img src="/static/wafumelon/wafu.png" alt="wafu" title="Kokomi is the original face of wafumelon"> </div> <main> <header> <h1>Welcome to Kokomi Teruhashi's Shrine ✨</h1> </header> <div class="two-columns"> <div class="left-column"> <h3>Special Facts</h3> <ul> <li>Kokomi is known as the "perfect pretty girl" at PK Academy.</li> <li>She often says, "I know, right? I'm so cute!"</li> <li>Her beauty captivates everyone around her effortlessly.</li> </ul> <div class="did-you-know"> Did you know? Kokomi Teruhashi believes she has a "divine aura" that makes everyone adore her. </div> <img src="/shrines/teruhashi/2.png" alt="Kokomi Smiling" style="width:100%; margin-top:15px; border-radius:10px;"> </div> <div class="right-column"> <div class="content"> <p>Kokomi Teruhashi is one of the main characters in <em>Saiki Kusuo no Psi Nan</em>. Known for her confidence, she loves being the center of attention and is always conscious of her image. However, her interactions with Saiki challenge her usual charm.</p> <div class="highlight-box"> Kokomi loves things that highlight her "divine" status, like sparkling jewelry and cute outfits! </div> <p style="animation: sparkle 2s infinite;">"Life is in very easy mode. This is all because I am gorgeous." - Kokomi</p> <div class="audio-player"> <p>Play Kokomi's theme:</p> <audio controls> <source src="/shrines/teruhashi/32. Because I'm a Perfect Girl - Saiki K. No Psi Nan OST [lv9D7QFae3M].mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <img src="/shrines/teruhashi/1.png" alt="Kokomi Posing" style="width:100%; margin-top:15px; border-radius:10px;"> </div> </div> </div> <footer> <p>💕 Built with love and admiration for Kokomi Teruhashi! 💕</p> </footer> </main> </body> </html>