<!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>