parent
de37465970
commit
3f49af6e66
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 702 KiB |
@ -0,0 +1,175 @@ |
||||
<!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> |
||||
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 3.5 KiB |
Loading…
Reference in new issue