You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
6.3 KiB
210 lines
6.3 KiB
3 weeks ago
|
<!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>
|