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.
176 lines
5.5 KiB
176 lines
5.5 KiB
2 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Aira Shiratori Shrine</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--main-bg-color: #ffccf9;
|
||
|
|
--accent-color: #ffdd57;
|
||
|
|
--text-color: #4a4a4a;
|
||
|
|
--cloud-color: #ffffff;
|
||
|
|
--sidebar-bg-color: rgba(255, 213, 230, 0.8);
|
||
|
|
--box-bg-color: #ffe5f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Poppins', sans-serif;
|
||
|
|
background-color: var(--main-bg-color);
|
||
|
|
color: var(--text-color);
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
width: 100%;
|
||
|
|
background: linear-gradient(135deg, var(--accent-color), var(--main-bg-color));
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px;
|
||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: var(--text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cloud {
|
||
|
|
position: absolute;
|
||
|
|
background: var(--cloud-color);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: moveClouds 20s linear infinite;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveClouds {
|
||
|
|
from { transform: translateX(-200%); }
|
||
|
|
to { transform: translateX(200%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
gap: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
max-width: 1200px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
flex: 0.3;
|
||
|
|
background-color: var(--sidebar-bg-color);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar img, .content img {
|
||
|
|
max-width: 100%; /* Prevents the image from overflowing its container */
|
||
|
|
max-height: 300px; /* Limits the height of large images */
|
||
|
|
object-fit: contain; /* Ensures the image scales proportionally */
|
||
|
|
border-radius: 10px;
|
||
|
|
margin: 0 auto 15px; /* Centers the image horizontally */
|
||
|
|
display: block; /* Makes margin auto work */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.sidebar h2 {
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
flex: 0.7;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
background-color: var(--box-bg-color);
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
animation: slideIn 0.8s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideIn {
|
||
|
|
from { transform: translateY(50px); opacity: 0; }
|
||
|
|
to { transform: translateY(0); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 20px;
|
||
|
|
background-color: var(--accent-color);
|
||
|
|
padding: 10px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.main {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<h1>Aira Shiratori Shrine 🌸</h1>
|
||
|
|
<div class="cloud" style="width: 100px; height: 50px; top: 10px; left: -20px;"></div>
|
||
|
|
<div class="cloud" style="width: 150px; height: 75px; top: 40px; left: 50%;"></div>
|
||
|
|
<div class="cloud" style="width: 120px; height: 60px; top: 80px; right: -30px;"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="main">
|
||
|
|
<div class="sidebar">
|
||
|
|
<img src="/shrines/aira/home.png" alt="Aira Shiratori" title="What she thinking about">
|
||
|
|
<h2>Aira Shiratori</h2>
|
||
|
|
<p>The bubbly and energetic character from <i>Dandadan</i>.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Favorite Color: Probably Pink</li>
|
||
|
|
<li>Hobby: Collecting cute trinkets like round gold spheres</li>
|
||
|
|
<li>Fun Fact: Loves drinking water</li>
|
||
|
|
<li>Another fun fact: Got called "バカ女" by Momo</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<div class="box">
|
||
|
|
<h3>About Aira</h3>
|
||
|
|
<p>Aira Shiratori is a cheerful and optimistic individual known for her quirky sense of humor and lovable personality.</p>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<h3>Favorite things abour her:</h3>
|
||
|
|
<p>she looks like an idiot (I love idiots)</p>
|
||
|
|
<p>"Shut your mouth."</p>
|
||
|
|
<img src="./dandadan-aira-shiratori.png" title="This was when she was stil unknown to us.">
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<img src="./closeup.png" title="Your hair is in the way, idiot.">
|
||
|
|
<img src="./up.png" title="Where is she going.">
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<h3>Did You Know?</h3>
|
||
|
|
<p>Aira is inspired by the carefree and lively energy of youth!</p>
|
||
|
|
<img src="./Screenshot from 2025-01-08 23-15-16.png" title="Look at this idiot.">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Made with love for Aira Shiratori fans 💖</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|