parent
6aaffcefb3
commit
ae2c308ebb
@ -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> |
||||||
@ -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> |
||||||
|
After Width: | Height: | Size: 353 KiB |
|
After Width: | Height: | Size: 636 KiB |
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
@ -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> |
||||||
|
After Width: | Height: | Size: 914 KiB |
|
After Width: | Height: | Size: 76 KiB |
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 258 KiB |
Loading…
Reference in new issue