|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 20 MiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 349 KiB |
|
After Width: | Height: | Size: 410 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 379 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 250 KiB |
|
After Width: | Height: | Size: 368 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 9.7 MiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 711 KiB |
|
After Width: | Height: | Size: 480 KiB |
|
After Width: | Height: | Size: 448 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 510 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 96 KiB |
@ -0,0 +1,520 @@ |
||||
<!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> |
||||
|
||||
<!-- 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> |
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 272 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 3.4 MiB |