526 lines
17 KiB
HTML
526 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🐦 Birby 🐦</title>
|
||
<style>
|
||
:root {
|
||
--main-bg-color: #f0d9f9;
|
||
--accent-color: #d93fe0;
|
||
--text-color: #4a4a4a;
|
||
--frame-bg-color: #ffffff;
|
||
--hover-bg-color: #f7e0ff;
|
||
}
|
||
|
||
body {
|
||
background-color: rgb(24, 24, 24);
|
||
font-family: 'Courier New', Courier, monospace;
|
||
margin: auto;
|
||
|
||
overflow-x: hidden;
|
||
background-image: url("./mainbackground.png");
|
||
|
||
|
||
animation: scrollBackground 4s linear infinite; /* Controls the scrolling animation */
|
||
}
|
||
|
||
@keyframes scrollBackground {
|
||
from {
|
||
background-position: 0 0; /* Start position */
|
||
}
|
||
to {
|
||
background-position: 128px 128px; /* End position for scrolling */
|
||
}
|
||
}
|
||
|
||
.music-player {
|
||
|
||
width: 100%;
|
||
background-color: #333;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
z-index: 1000; /* Ensures it stays on top of other content */
|
||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.music-player audio {
|
||
width: 80%; /* Adjusts the audio player's width */
|
||
max-width: 600px; /* Ensures it doesn't become too large */
|
||
}
|
||
|
||
|
||
.photo-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.photo-frame {
|
||
background-color: var(--frame-bg-color);
|
||
border: 5px solid var(--accent-color);
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
max-width: 300px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
margin-top: 10px;
|
||
animation: dance 3s ease-in-out infinite;
|
||
}
|
||
|
||
/* Staggered alignment using nth-child */
|
||
.photo-frame:nth-child(odd) {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.photo-frame:nth-child(3n) {
|
||
margin-top: 50px;
|
||
}
|
||
|
||
/* Dance animation */
|
||
@keyframes dance {
|
||
0%, 100% {
|
||
transform: translateX(-5px);
|
||
}
|
||
50% {
|
||
transform: translateX(5px);
|
||
}
|
||
}
|
||
|
||
.photo-frame img {
|
||
display: block;
|
||
max-width: 100%;
|
||
max-height: 200px;
|
||
height: auto;
|
||
margin: 0 auto; /* Centers the image horizontally */
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.photo-frame p {
|
||
font-size: 1.1rem;
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.photo-frame:hover {
|
||
background-color: var(--hover-bg-color);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal img {
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
color: #fff;
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
footer {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: var(--accent-color);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.photo-container {
|
||
gap: 15px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.photo-container {
|
||
gap: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="photo-container">
|
||
<!-- Photo frames -->
|
||
<div class="photo-frame" onclick="openModal('./3birb.png')">
|
||
<img src="./3birb.png" alt="Birb 1">
|
||
<p>Portrait</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./birb3.png')">
|
||
<img src="./birb3.png" alt="Birb 2">
|
||
<p>Exploring new heights</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./birb_emotes.png')">
|
||
<img src="./birb_emotes.png" alt="Birb 3">
|
||
<p>Heart</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./GRXl9VHWUAACMnp.png')">
|
||
<img src="./GRXl9VHWUAACMnp.png" alt="Birb 4">
|
||
<p>Coincidence?</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./image-1.png')">
|
||
<img src="./image-1.png" alt="Birb 5">
|
||
<p>Peaceful moment</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./image.png')">
|
||
<img src="./image.png">
|
||
<p>Sketch</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20240818_111736.jpg')">
|
||
<img src="./IMG_20240818_111736.jpg">
|
||
<p>o-o =^=</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20240912_162034_181.jpg')">
|
||
<img src="./IMG_20240912_162034_181.jpg">
|
||
<p>Surrounded by friends</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./Screenshot_from_2024-07-03_19-32-29.png')">
|
||
<img src="./Screenshot_from_2024-07-03_19-32-29.png">
|
||
<p>what you looking at</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./SPOILER_birb_emotes2.png')">
|
||
<img src="./SPOILER_birb_emotes2.png">
|
||
<p>Melon</p>
|
||
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-41-32.634_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-41-32.634_2560x1440.png">
|
||
<p>Neon</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-42-09.301_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-42-09.301_2560x1440.png">
|
||
<p>Music?</p>
|
||
<div class="music-player">
|
||
<audio controls>
|
||
<source src="./HOME [1mThrGTqIvg].mp3" type="audio/mpeg">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-42-13.704_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-42-13.704_2560x1440.png">
|
||
<p>Happy</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-35.553_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-43-35.553_2560x1440.png">
|
||
<p>Hello</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-42.051_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-43-42.051_2560x1440.png">
|
||
<p>Over here</p>
|
||
</div>
|
||
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-45.622_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-43-45.622_2560x1440.png">
|
||
<p>Almost wanted to say something</p>
|
||
</div>
|
||
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-48.483_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-43-48.483_2560x1440.png">
|
||
<p>Keeping quiet?</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-58.216_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-43-58.216_2560x1440.png">
|
||
<p>Getting used to make captions</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-44-07.915_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-44-07.915_2560x1440.png">
|
||
<p>Neon city</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-44-11.847_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-07_04-44-11.847_2560x1440.png">
|
||
<p>Picture</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./3b17c0ec-2845-4cf8-87c4-b33355de6569.png')">
|
||
<img src="./3b17c0ec-2845-4cf8-87c4-b33355de6569.png">
|
||
<p>Fluffy</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./20240804_145436.jpg')">
|
||
<img src="./20240804_145436.jpg">
|
||
<p>Slurp</p>
|
||
<div class="music-player">
|
||
<audio controls>
|
||
<source src="./Depresión sonora - Tu no me tienes que salvar [Letra] [VpXvkd7xHkI].mp3" type="audio/mpeg">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./20240817_191024.jpg')">
|
||
<img src="./20240817_191024.jpg">
|
||
<p>We missing something</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./b.png')">
|
||
<img src="./b.png">
|
||
<p>Neon faced</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./faces-1.png')">
|
||
<img src="./faces-1.png">
|
||
<p>Love to hate</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./image-4.png')">
|
||
<img src="./image-4.png">
|
||
<p>Bath</p>
|
||
<div class="music-player">
|
||
<audio controls>
|
||
<source src="./Lost [6hk2ocQJBV8].mp3" type="audio/mpeg">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./pet.png')">
|
||
<img src="./pet.png">
|
||
<p>Pet</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./SPOILER_image.png.webp-1.png')">
|
||
<img src="./SPOILER_image.png.webp-1.png">
|
||
<p>Sleepy</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./up.png')">
|
||
<img src="./up.png">
|
||
<p>Up</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./VRChat_2024-07-13_05-07-20.912_2560x1440.png')">
|
||
<img src="./VRChat_2024-07-13_05-07-20.912_2560x1440.png">
|
||
<p>Where we at?</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./123075341_p0.png')">
|
||
<img src="./123075341_p0.png">
|
||
<p>Dance</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./120399811_p0.png')">
|
||
<img src="./120399811_p0.png">
|
||
<p>Style</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./120359597_p0_master1200.jpg')">
|
||
<img src="./120359597_p0_master1200.jpg">
|
||
<p>Cheese</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./SPOILER_pov.png')">
|
||
<img src="./SPOILER_pov.png">
|
||
<p>Night</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./2024-09-29 23-34-12 1.png.webp')">
|
||
<img src="./2024-09-29 23-34-12 1.png.webp">
|
||
<p>Boring</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./2024-10-05 15-20-20 1.png.webp')">
|
||
<img src="./2024-10-05 15-20-20 1.png.webp">
|
||
<p>The </p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./2024-11-07 16-10-45 1.png.webp')">
|
||
<img src="./2024-11-07 16-10-45 1.png.webp">
|
||
<p>Happyness</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./2024-12-11 19-52-02 2.png.webp')">
|
||
<img src="./2024-12-11 19-52-02 2.png.webp">
|
||
<p>1</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./2024-12-11 19-52-13 2.png.webp')">
|
||
<img src="./2024-12-11 19-52-13 2.png.webp">
|
||
<p>2</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./20241028_103520.jpg.webp')">
|
||
<img src="./20241028_103520.jpg.webp">
|
||
<p>Away</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./20241216_101535.jpg.webp')">
|
||
<img src="./20241216_101535.jpg.webp">
|
||
<p>Chibi</p>
|
||
</div>
|
||
|
||
|
||
<div class="photo-frame" onclick="openModal('./bir2b.png.webp')">
|
||
<img src="./bir2b.png.webp">
|
||
<p>Pensive</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./birb.png.webp')">
|
||
<img src="./birb.png.webp">
|
||
<p>Cute</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./birbe3.png.webp')">
|
||
<img src="./birbe3.png.webp">
|
||
<p>kind</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./birby.png.webp')">
|
||
<img src="./birby.png.webp">
|
||
<p>3</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./dark.png.webp')">
|
||
<img src="./dark.png.webp">
|
||
<p>Dark</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20240826_162440_1_1_1.jpg.webp')">
|
||
<img src="./IMG_20240826_162440_1_1_1.jpg.webp">
|
||
<p>step</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20240828_151731_1_1_1.jpg.webp')">
|
||
<img src="./IMG_20240828_151731_1_1_1.jpg.webp">
|
||
<p>:<</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241014_085715_1_1.jpg.webp')">
|
||
<img src="./IMG_20241014_085715_1_1.jpg.webp">
|
||
<p>Mirror</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241014_154029_1_1.jpg.webp')">
|
||
<img src="./IMG_20241014_154029_1_1.jpg.webp">
|
||
<p>:></p>
|
||
</div>
|
||
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241101_085237_1_1.jpg.webp')">
|
||
<img src="./IMG_20241101_085237_1_1.jpg.webp">
|
||
<p>:)</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241104_085326_1_1.jpg.webp')">
|
||
<img src="./IMG_20241104_085326_1_1.jpg.webp">
|
||
<p>What you lookin</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241108_200706.jpg.webp')">
|
||
<img src="./IMG_20241108_200706.jpg.webp">
|
||
<p>Faced</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241118_212508_229.jpg.webp')">
|
||
<img src="./IMG_20241118_212508_229.jpg.webp">
|
||
<p>Hold</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241127_000851_1_1.jpg.webp')">
|
||
<img src="./IMG_20241127_000851_1_1.jpg.webp">
|
||
<p>Lost</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./IMG_20241211_235001_1_1.jpg.webp')">
|
||
<img src="./IMG_20241211_235001_1_1.jpg.webp">
|
||
<p>👋</p>
|
||
</div>
|
||
|
||
<div class="photo-frame" onclick="openModal('./side.png.webp')">
|
||
<img src="./side.png.webp">
|
||
<p>Not hiding anything at this point</p>
|
||
</div>
|
||
|
||
|
||
<div class="photo-frame" onclick="openModal('./GgQSrYuXYAAL3me.jpeg')">
|
||
<img src="./GgQSrYuXYAAL3me.jpeg">
|
||
<p>First drawing of 2025</p>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Modal -->
|
||
<div class="modal" id="image-modal">
|
||
<span class="modal-close" onclick="closeModal()">×</span>
|
||
<img id="modal-image" src="" alt="Large Image">
|
||
</div>
|
||
|
||
<footer>
|
||
<div>
|
||
<div style="border: 5px solid var(--accent-color); padding: 10px; border-radius: 10px; background-color: var(--frame-bg-color);">
|
||
<img src="./tenor.gif">
|
||
<p>Cherished Memories 🐦💜</p>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const modal = document.getElementById('image-modal');
|
||
const modalImage = document.getElementById('modal-image');
|
||
|
||
function openModal(src) {
|
||
modalImage.src = src;
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
function closeModal() {
|
||
modal.style.display = 'none';
|
||
}
|
||
|
||
// Close modal on background click
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) closeModal();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|