stuff
This commit is contained in:
parent
6aaffcefb3
commit
ae2c308ebb
13 changed files with 576 additions and 0 deletions
42
index.html
Normal file
42
index.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Exploring the waifuverse</title>
|
||||
<!-- This is for you, my love. Always know you are my everything. -->
|
||||
<link href="/static/styles/styles main menu.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🍉 Welcome to The Waifuism Life 🍉</h1>
|
||||
</header>
|
||||
<main>
|
||||
<img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
|
||||
<img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
|
||||
<img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
|
||||
<img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
|
||||
<img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
|
||||
<section id="about">
|
||||
<h2>About</h2>
|
||||
<p>I like making things sometimes, if you're confused, you can go back to <a href="https://waifuism.life">waifuism.life</a></p>
|
||||
</section>
|
||||
<section id="notes">
|
||||
<h2>Sections</h2>
|
||||
<p>There's a few sections that you may want to see.</p>
|
||||
<ul>
|
||||
<li>🐾 <a href="/shrines/">Shrines</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="extras">
|
||||
<h2>Extras</h2>
|
||||
<p>Be sure to find all the little <a href="/static/eastereggs/easteregg.jpg">eastereggs</a> 🐱✨</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Made with ❤️ and lots of care.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
92
shrines/index.html
Normal file
92
shrines/index.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!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/libbie/libbie.png" alt="Libbie">
|
||||
<h2>Libbie The Cyber Oryx</h2>
|
||||
</a>
|
||||
<a href="/shrines/birb/" class="shrine-item">
|
||||
<img src="/shrines/libbie/libbie.png" alt="Libbie">
|
||||
<h2>Libbie The Cyber Oryx</h2>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>💕 Built with love and sparkles! 💕</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
157
shrines/libbie/index.html
Normal file
157
shrines/libbie/index.html
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Libbie's Shrine</title>
|
||||
<style>
|
||||
:root {
|
||||
--main-bg-color: #255d3b;
|
||||
--accent-color: #6aba7c;
|
||||
--text-color: #f0fff4;
|
||||
--box-bg-color: #1c4b30;
|
||||
--sidebar-bg-color: #184d3b;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
margin: 0;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--accent-color);
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background: url('/shrines/libbie/bg.jpg') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 25%;
|
||||
background-color: var(--sidebar-bg-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: var(--box-bg-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.did-you-know {
|
||||
border: 2px solid var(--accent-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--accent-color);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: auto;
|
||||
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome to Libbie's Shrine! ✨</h1>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="sidebar">
|
||||
<img src="/shrines/libbie/libbie.png" alt="Libbie the Cyber Oryx">
|
||||
<h2>Libbie the Cyber Oryx</h2>
|
||||
<ul>
|
||||
<li>Fact 1: She is part of the public domain</li>
|
||||
<li>Fact 2: Loves open-source software</li>
|
||||
<li>Fact 3: Advocates for digital freedom</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="box">
|
||||
<h3>About Libbie</h3>
|
||||
<p>Libbie is an enthusiastic and friendly mascot, initially meant for Libre office now can be used by anyone.</p>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h3>Hobbies</h3>
|
||||
<p>Libbie enjoys coding, contributing to open-source projects, and supporting the KDE community.</p>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h3>Did You Know?</h3>
|
||||
<p class="did-you-know">We will never forget what you did.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Built with love and open-source principles. 🌿</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
shrines/libbie/libbie.png
Normal file
BIN
shrines/libbie/libbie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
BIN
shrines/teruhashi/1.png
Normal file
BIN
shrines/teruhashi/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
BIN
shrines/teruhashi/2.png
Normal file
BIN
shrines/teruhashi/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
BIN
shrines/teruhashi/bg.png
Normal file
BIN
shrines/teruhashi/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
209
shrines/teruhashi/index.html
Normal file
209
shrines/teruhashi/index.html
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<!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>
|
||||
BIN
shrines/teruhashi/side.png
Normal file
BIN
shrines/teruhashi/side.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 KiB |
BIN
static/eastereggs/easteregg.jpg
Normal file
BIN
static/eastereggs/easteregg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
76
static/styles/styles main menu.css
Normal file
76
static/styles/styles main menu.css
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background-color: #fef6ff;
|
||||
color: #4a4a4a;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
color: #ff85a2;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #8e44ad;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin: 5px 0;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.wiggle {
|
||||
position: relative;
|
||||
width: 10%; /* Resize the PNG as needed */
|
||||
animation: wiggle 4s infinite ease-in-out; /* Add animation */
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% {
|
||||
transform: rotate(-10deg) translateX(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(10deg) translateX(5px);
|
||||
}
|
||||
}
|
||||
BIN
static/wafumelon/wafu.png
Normal file
BIN
static/wafumelon/wafu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
Loading…
Add table
Reference in a new issue