Compare commits
24 Commits
eeeb7be347
...
beb2b942d6
| Author | SHA1 | Date |
|---|---|---|
 waifu
|
beb2b942d6 | 2 weeks ago |
|
waifu
|
8fdf704fde | 2 weeks ago |
|
waifu
|
6cb8214abd | 2 weeks ago |
|
waifu
|
a6c2cbc36c | 2 weeks ago |
|
waifu
|
4686772742 | 2 weeks ago |
|
waifu
|
1c9f0caf19 | 2 weeks ago |
|
waifu
|
92b4072a76 | 2 weeks ago |
|
waifu
|
fe7f351a3b | 2 weeks ago |
|
waifu
|
b3b456c3eb | 2 weeks ago |
|
waifu
|
2a53a02660 | 2 weeks ago |
|
waifu
|
6e0f25c4ff | 2 weeks ago |
|
waifu
|
bc773bc7fd | 2 weeks ago |
|
waifu
|
ebc1cda0bb | 2 weeks ago |
|
waifu
|
8a18eb4908 | 2 weeks ago |
|
waifu
|
177eca2cf9 | 2 weeks ago |
|
waifu
|
1244077e10 | 2 weeks ago |
|
waifu
|
6a3bded7b6 | 2 weeks ago |
|
waifu
|
a6218273e7 | 2 weeks ago |
|
waifu
|
38dcc5f05a | 2 weeks ago |
|
waifu
|
5257bd7a1e | 2 weeks ago |
|
waifu
|
8cfe80e3b3 | 2 weeks ago |
|
waifu
|
cc856f094c | 2 weeks ago |
|
waifu
|
38296f972e | 2 weeks ago |
|
waifu
|
84da379efe | 2 weeks ago |
@ -0,0 +1,6 @@ |
||||
*.png |
||||
*.mp3 |
||||
*.jpg |
||||
*.gif |
||||
*.webm |
||||
*.webp |
||||
@ -0,0 +1,136 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<link rel="icon" href="../../static/site/favicon.png" type="image/x-icon"> |
||||
<link rel="stylesheet" href="../../default_style.css"> |
||||
<link rel="stylesheet" href="style.css"> |
||||
<title>Friends</title> |
||||
|
||||
</head> |
||||
<body> |
||||
<audio autoplay="" loop="" src="./1999_wildfire_Justice_Der.mp3"></audio> |
||||
<div class="grid-container"> |
||||
<!-- Stars --> |
||||
<img class="star2" src="star.png" style="grid-column: 6 / span 1; grid-row: 15 / span 1;"> |
||||
<img class="star1" src="star.png" style="grid-column: 3 / span 1; grid-row: 19 / span 1;"> |
||||
<img class="star3" src="star.png" style="grid-column: 4 / span 1; grid-row: 7 / span 1;"> |
||||
<img class="star2" src="star.png" style="grid-column: 7 / span 1; grid-row: 16 / span 1;"> |
||||
<img class="star1" src="star.png" style="grid-column: 4 / span 1; grid-row: 5 / span 1;"> |
||||
<img class="star3" src="star.png" style="grid-column: 6 / span 1; grid-row: 9 / span 1;"> |
||||
<img class="star2" src="star.png" style="grid-column: 5 / span 1; grid-row: 8 / span 1;"> |
||||
<img class="star1" src="star.png" style="grid-column: 6 / span 1; grid-row: 13 / span 1;"> |
||||
<img class="star3" src="star.png" style="grid-column: 4 / span 1; grid-row: 11 / span 1;"> |
||||
<img class="star2" src="star.png" style="grid-column: 3 / span 1; grid-row: 12 / span 1;"> |
||||
<img class="star1" src="star.png" style="grid-column: 2 / span 1; grid-row: 20 / span 1;"> |
||||
<img class="star3" src="star.png" style="grid-column: 6 / span 1; grid-row: 3 / span 1;"> |
||||
<img class="star2" src="star.png" style="grid-column: 7 / span 1; grid-row: 18 / span 1;"> |
||||
<img class="star1" src="star.png" style="grid-column: 5 / span 1; grid-row: 17 / span 1;"> |
||||
<img class="star3" src="star.png" style="grid-column: 4 / span 1; grid-row: 14 / span 1;"> |
||||
<img class="star2" src="star.png" style="grid-column: 2 / span 1; grid-row: 10 / span 1;"> |
||||
<img class="star1" src="star.png" style="grid-column: 3 / span 1; grid-row: 6 / span 1;"> |
||||
<img class="star3" src="star.png" style="grid-column: 5 / span 1; grid-row: 4 / span 1;"> |
||||
<img class="star2" src="star.png" style="grid-column: 2 / span 1; grid-row: 2 / span 1;"> |
||||
|
||||
|
||||
|
||||
|
||||
<!-- Friends --> |
||||
<a href="https://grumbulon.xyz/" class="friend" target="_blank" style="grid-column: 4; grid-row: 12;"> |
||||
<img src="pfp/grumb.png"> |
||||
<h1 class="caption">Grumbulon</h1> |
||||
</a> |
||||
|
||||
<a href="https://samtherapy.xyz/" class="friend" target="_blank" style="grid-column: 4; grid-row: 3;"> |
||||
<img src="pfp/sam.png"> |
||||
<h1 class="caption">Sam</h1> |
||||
</a> |
||||
|
||||
<a href="https://theoryware.net/" class="friend" target="_blank" style="grid-column: 3; grid-row: 4;"> |
||||
<img src="pfp/theorytoe.png"> |
||||
<h1 class="caption">Theory Toe</h1> |
||||
</a> |
||||
|
||||
<a href="https://weebles.husbandoism.life/" class="friend" target="_blank" style="grid-column: 6; grid-row: 6;"> |
||||
<img src="pfp/weeble.gif"> |
||||
<h1 class="caption">Weeble</h1> |
||||
</a> |
||||
|
||||
|
||||
<a href="https://misako.neocities.org/" class="friend" target="_blank" style="grid-column: 3; grid-row: 6;"> |
||||
<img src="pfp/Kerokeronim.webp"> |
||||
<h1 class="caption">Kerokeronim</h1> |
||||
</a> |
||||
|
||||
<a href="https://tengu.space/" class="friend" target="_blank" style="grid-column: 7; grid-row: 5;"> |
||||
<img src="pfp/DeviousTengu.webp"> |
||||
<h1 class="caption">Devious Tengu</h1> |
||||
</a> |
||||
|
||||
<a href="https://reisen.church/" class="friend" target="_blank" style="grid-column: 6; grid-row: 8;"> |
||||
<img src="pfp/nai.png"> |
||||
<h1 class="caption">NaiJi</h1> |
||||
</a> |
||||
|
||||
<a href="https://yomuchan.neocities.org/" class="friend" target="_blank" style="grid-column: 5; grid-row: 5;"> |
||||
<img src="pfp/yomuchan.png"> |
||||
<h1 class="caption">Yomuchan</h1> |
||||
</a> |
||||
|
||||
<a href="https://fluoridewastelands.neocities.org/" class="friend" target="_blank" style="grid-column: 7; grid-row: 3;"> |
||||
<img src="pfp/joe.jpg"> |
||||
<h1 class="caption">Joe</h1> |
||||
</a> |
||||
|
||||
<a href="https://comfyboy.club/" class="friend" target="_blank" style="grid-column: 5; grid-row: 10;"> |
||||
<img src="pfp/vril.png"> |
||||
<h1 class="caption">Vril</h1> |
||||
</a> |
||||
|
||||
<a href="https://lunarised.com/" class="friend" target="_blank" style="grid-column: 2; grid-row: 5;"> |
||||
<img src="pfp/Lunarised.png"> |
||||
<h1 class="caption">Lunarised</h1> |
||||
</a> |
||||
|
||||
<a href="https://about.munir.tokyo/" class="friend" target="_blank" style="grid-column: 6; grid-row: 13;"> |
||||
<img src="pfp/munir.webp"> |
||||
<h1 class="caption">Munir</h1> |
||||
</a> |
||||
|
||||
<a href="https://ericaftereric.top/" class="friend" target="_blank" style="grid-column: 3; grid-row: 15;"> |
||||
<img src="pfp/eric_zhang.webp"> |
||||
<h1 class="caption">Eric Zhang</h1> |
||||
</a> |
||||
|
||||
<a href="https://cooking.boymoder.biz/" class="friend" target="_blank" style="grid-column: 3; grid-row: 9;"> |
||||
<img src="pfp/paula.png"> |
||||
<h1 class="caption">Paula</h1> |
||||
</a> |
||||
<a href="https://www.robinwils.com/" class="friend" target="_blank" style="grid-column: 2; grid-row: 7;"> |
||||
<img src="pfp/robin_wils.webp"> |
||||
<h1 class="caption">Robin Wils</h1> |
||||
</a> |
||||
|
||||
<a href="https://anonicus.neocities.org/" class="friend" target="_blank" style="grid-column: 4; grid-row: 7;"> |
||||
<img src="pfp/anonicus.webp"> |
||||
<h1 class="caption">Anonicus</h1> |
||||
</a> |
||||
|
||||
<!-- <a href="https://example.com" class="friend" target="_blank" style="grid-column: 3; grid-row: 4;"> |
||||
<img src="pfp/vertka.png" > |
||||
<h1 class="caption">Vertka</h1> |
||||
</a> --> |
||||
|
||||
<!-- <a href="" class="friend" target="_blank" style="grid-column: 4; grid-row: 7;"> |
||||
<img src="pfp/"> |
||||
<h1 class="caption">Example</h1> |
||||
</a>--> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,91 @@ |
||||
body { |
||||
background-color: black; |
||||
color: white; |
||||
width: 100%; |
||||
} |
||||
|
||||
.grid-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(8, 1fr); /* Create 8 columns of equal width */ |
||||
gap: 10px; /* Adjust the gap between grid items */ |
||||
width: 100%; /* Set the width to 100% of the viewport width */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.friend img { |
||||
transition: transform 0.3s ease; |
||||
max-width: 100%; |
||||
height: auto; |
||||
margin: 0 auto; |
||||
|
||||
} |
||||
.friend img:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
|
||||
.caption { |
||||
display: none; /* Initially hide the caption */ |
||||
text-align: center; |
||||
color: white; |
||||
text-decoration: none; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* Add a black outline */ |
||||
} |
||||
|
||||
.friend:hover .caption { |
||||
display: block; /* Display the caption when hovering over the image */ |
||||
} |
||||
|
||||
.friend { |
||||
text-align: center; |
||||
animation: wiggle 0.5s ease-in-out infinite alternate; /* Make the image wiggle side to side */ |
||||
|
||||
} |
||||
|
||||
|
||||
@keyframes wiggle { |
||||
from { |
||||
transform: translateX(-5px); |
||||
} |
||||
to { |
||||
transform: translateX(5px); |
||||
} |
||||
} |
||||
|
||||
|
||||
/* Stars */ |
||||
.star1 { |
||||
width: 50px; /* Adjust the size of your star image */ |
||||
height: 50px; /* Adjust the size of your star image */ |
||||
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */ |
||||
background-size: cover; |
||||
animation: rotateStar 5s linear infinite; /* Adjust animation duration and timing function as needed */ |
||||
} |
||||
|
||||
.star2 { |
||||
width: 50px; /* Adjust the size of your star image */ |
||||
height: 50px; /* Adjust the size of your star image */ |
||||
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */ |
||||
background-size: cover; |
||||
animation: rotateStar 7s linear infinite; /* Adjust animation duration and timing function as needed */ |
||||
} |
||||
.star3 { |
||||
width: 50px; /* Adjust the size of your star image */ |
||||
height: 50px; /* Adjust the size of your star image */ |
||||
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */ |
||||
background-size: cover; |
||||
animation: rotateStar 10s linear infinite; /* Adjust animation duration and timing function as needed */ |
||||
} |
||||
|
||||
@keyframes rotateStar { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
to { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
@ -1,22 +1,50 @@ |
||||
|
||||
body, html { |
||||
overflow: hidden; /* Prevents scrollbar from appearing */ |
||||
overflow: hidden; |
||||
margin: 1%; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
#menu { |
||||
width: 1300px; /* Sets the width of the div to 80% of the viewport */ |
||||
max-width: 80%; /* Ensures the div does not exceed 80% of the viewport width */ |
||||
margin: 0 auto; /* Centers the div horizontally */ |
||||
|
||||
#eyes { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
float: left; |
||||
text-align: center; |
||||
} |
||||
|
||||
|
||||
.grid-container { |
||||
display: grid; |
||||
grid-template-columns: 40% 60%; |
||||
grid-template-rows: 100vh; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
} |
||||
|
||||
#aphrodite{ |
||||
|
||||
max-width: 100%; /* Ensures the image doesn't exceed its container's width */ |
||||
max-height: 80vh; |
||||
height: auto; /* Maintains the aspect ratio of the image */ |
||||
object-fit: contain; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
|
||||
|
||||
#menu img { |
||||
max-height: 50%; |
||||
max-width: 50%; |
||||
width: 100%; |
||||
height: auto; |
||||
object-fit: contain; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/* Eye class */ |
||||
.eye{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.eye ~ a{ |
||||
text-decoration: none; |
||||
color: inherit; |
||||
cursor: pointer; |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
const background = document.querySelector('.background'); |
||||
const numLogos = 50; // Adjust the number of falling logos as needed
|
||||
|
||||
for (let i = 0; i < numLogos; i++) { |
||||
const logo = document.createElement('div'); |
||||
logo.classList.add('falling-logo'); |
||||
logo.style.left = Math.random() * 100 + '%'; |
||||
logo.style.setProperty('--duration', (Math.random() * 5 + 3) + 's'); |
||||
background.appendChild(logo); |
||||
} |
||||
}); |
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -1,21 +1,47 @@ |
||||
body, html { |
||||
height: 100%; |
||||
margin: 0; |
||||
overflow: hidden; /* Prevents scrollbar from appearing */ |
||||
} |
||||
|
||||
height: 100%; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
} |
||||
#main{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
body { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.logo img { |
||||
transition: transform 0.5s ease-in-out; |
||||
} |
||||
|
||||
.logo { |
||||
max-width: 100%; |
||||
height: auto; |
||||
transition: transform 0.3s, scale 0.3s; |
||||
#text { |
||||
opacity: 0; |
||||
transition: opacity 0.5s ease-in-out; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 50vw; |
||||
} |
||||
|
||||
.logo:hover { |
||||
transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */ |
||||
} |
||||
#main:hover .logo img { |
||||
transform: scale(1.5) rotate(360deg); |
||||
} |
||||
|
||||
#main:hover #text { |
||||
opacity: 1; |
||||
} |
||||
|
||||
|
||||
|
||||
body, html{ |
||||
font-family: CustomFont, sans-serif; /* Use the custom font as the fallback */ |
||||
} |
||||
@font-face { |
||||
font-family: CustomFont; |
||||
src: url('static/fonts/c1-kenangan.regular.otf') format('truetype'); |
||||
Loading…
Reference in new issue