<!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" title = "This image is sideways" 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" title = "EEEEEEEEEEEEEh" 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" title = "Special style I made one time." 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 >
