Compare commits
24 commits
eeeb7be347
...
beb2b942d6
| Author | SHA1 | Date | |
|---|---|---|---|
| beb2b942d6 | |||
| 8fdf704fde | |||
| 6cb8214abd | |||
| a6c2cbc36c | |||
| 4686772742 | |||
| 1c9f0caf19 | |||
| 92b4072a76 | |||
| fe7f351a3b | |||
| b3b456c3eb | |||
| 2a53a02660 | |||
| 6e0f25c4ff | |||
| bc773bc7fd | |||
| ebc1cda0bb | |||
| 8a18eb4908 | |||
| 177eca2cf9 | |||
| 1244077e10 | |||
| 6a3bded7b6 | |||
| a6218273e7 | |||
| 38dcc5f05a | |||
| 5257bd7a1e | |||
| 8cfe80e3b3 | |||
| cc856f094c | |||
| 38296f972e | |||
| 84da379efe |
13 changed files with 433 additions and 76 deletions
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
*.png
|
||||||
|
*.mp3
|
||||||
|
*.jpg
|
||||||
|
*.gif
|
||||||
|
*.webm
|
||||||
|
*.webp
|
||||||
|
|
@ -1,11 +1,5 @@
|
||||||
body, html{
|
body, html{
|
||||||
font-family: CustomFont, sans-serif; /* Use the custom font as the fallback */
|
font-family: CustomFont, sans-serif; /* Use the custom font as the fallback */
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: CustomFont;
|
font-family: CustomFont;
|
||||||
|
|
|
||||||
136
home/friends/index.html
Normal file
136
home/friends/index.html
Normal file
|
|
@ -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>
|
||||||
91
home/friends/style.css
Normal file
91
home/friends/style.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,24 +6,34 @@
|
||||||
<title>Home??</title>
|
<title>Home??</title>
|
||||||
<link rel="icon" href="../static/site/favicon.png" type="image/x-icon">
|
<link rel="icon" href="../static/site/favicon.png" type="image/x-icon">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="stylesheet" href="../default_style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<audio autoplay="" loop="" src="./Mi Casa Tu Casa [SWgIDXR8xR0].mp3"></audio>
|
||||||
<img src="start.png" alt="">
|
<div id="main">
|
||||||
<div id="menu">
|
<div id="title">
|
||||||
<div id="image-container">
|
<div>
|
||||||
<img src="empty.png" id="large-image">
|
<img src="../static/site/logo.png" id="melon">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1>Pick something?</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div id="menu">
|
||||||
<a href="./art/index.html" class="seed" id="art"><img src="seed.png"></a>
|
<div id="image-container">
|
||||||
<a href="./shrine/index.html" class="seed" id="shrine"><img src="seed.png"></a>
|
<img src="empty.png" id="large-image">
|
||||||
<a href="./friends/index.html" class="seed" id="friends"><img src="seed.png"></a>
|
</div>
|
||||||
<a href="./stuff/index.html" class="seed" id="stuff"><img src="seed.png"></a>
|
<div id="seeds">
|
||||||
|
<a href="./art/" class="seed" id="art"><img src="seed.png"></a>
|
||||||
|
<a href="./shrine/" class="seed" id="shrine"><img src="seed.png"></a>
|
||||||
|
<a href="./friends/" class="seed" id="friends"><img src="seed.png"></a>
|
||||||
|
<a href="./stuff/" class="seed" id="stuff"><img src="seed.png"></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script>const menuItems = document.querySelectorAll('.seed');
|
<script>
|
||||||
|
const menuItems = document.querySelectorAll('.seed');
|
||||||
const largeImage = document.getElementById('large-image');
|
const largeImage = document.getElementById('large-image');
|
||||||
const imageContainer = document.getElementById('image-container');
|
const imageContainer = document.getElementById('image-container');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Shrine</title>
|
<title>Shrine</title>
|
||||||
|
|
@ -9,16 +12,34 @@
|
||||||
<link rel="icon" href="../../static/site/favicon.png" type="image/x-icon">
|
<link rel="icon" href="../../static/site/favicon.png" type="image/x-icon">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="menu">
|
<div class="grid-container">
|
||||||
<div id="aphrodite">
|
<div id="aphrodite2">
|
||||||
<a href="ai/index.html"><img src="aphrodite.jpg" ></a>
|
<a href="ai/"><img src="aphrodite.png" id="aphrodite"></a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div id="eyes">
|
||||||
<h1>Akarin</h1>
|
|
||||||
<h1>Kokomin</h1>
|
<a href="/Akarin" class="eye">
|
||||||
<h1>Frieren</h1>
|
<h1>Akarin</h1>
|
||||||
<h1>Pleroma-tan</h1>
|
<img src="./eyes/Akarin.png" alt="Akarin">
|
||||||
<h1>Yuki</h1>
|
</a>
|
||||||
|
<a href="/Kokomin" class="eye">
|
||||||
|
<img src="./eyes/Kokomin.png" alt="Kokomin">
|
||||||
|
<h1>Kokomin</h1>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
<a href="./Frieren" class="eye">
|
||||||
|
<h1>Frieren</h1>
|
||||||
|
<img src="./eyes/Frieren.png" alt="Frieren">
|
||||||
|
</a>
|
||||||
|
<a href="./Pleroma-tan" class="eye">
|
||||||
|
<img src="./eyes/Pleroma-tan.png" alt="Pleroma-tan">
|
||||||
|
<h1>Pleroma-tan</h1>
|
||||||
|
</a>
|
||||||
|
<a href="./Yuki" class="eye">
|
||||||
|
<h1>Yuki</h1>
|
||||||
|
<img src="./eyes/Yuki.png" alt="Yuki">
|
||||||
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,50 @@
|
||||||
|
|
||||||
body, html {
|
body, html {
|
||||||
overflow: hidden; /* Prevents scrollbar from appearing */
|
overflow: hidden;
|
||||||
}
|
margin: 1%;
|
||||||
#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 */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu img {
|
#eyes {
|
||||||
max-height: 50%;
|
display: flex;
|
||||||
max-width: 50%;
|
flex-direction: column;
|
||||||
width: 100%;
|
justify-content: space-around;
|
||||||
height: auto;
|
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;
|
object-fit: contain;
|
||||||
overflow: hidden;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Eye class */
|
||||||
|
.eye{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye ~ a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -1,19 +1,18 @@
|
||||||
body, html {
|
body, html {
|
||||||
height: 100%;
|
max-height: 100vh;
|
||||||
margin: 0;
|
max-width: 100%;
|
||||||
overflow: hidden; /* Prevents scrollbar from appearing */
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
}
|
||||||
}
|
|
||||||
|
#main{
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
width: 800px;
|
|
||||||
height: 400px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -23,11 +22,17 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
max-height: 70vh;
|
||||||
transition: transform 0.3s, scale 0.3s;
|
transition: transform 0.3s, scale 0.3s;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
#title{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-height: 30vh;
|
||||||
|
}
|
||||||
p{
|
p{
|
||||||
color: dodgerblue;
|
color: dodgerblue;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
|
@ -43,8 +48,8 @@ p{
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
.seed {
|
.seed {
|
||||||
display: block;
|
display: flex;
|
||||||
margin-bottom: 90px; /* Adjust the spacing between seeds as needed */
|
|
||||||
}
|
}
|
||||||
.seed img {
|
.seed img {
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
|
|
@ -52,7 +57,25 @@ p{
|
||||||
.seed img:hover {
|
.seed img:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
#seeds{
|
||||||
|
height: 60vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
#image-container {
|
#image-container {
|
||||||
transition: opacity 0.5s ease; /* Fade transition */
|
transition: opacity 0.5s ease; /* Fade transition */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes wiggle {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
25% { transform: rotate(10deg); }
|
||||||
|
50% { transform: rotate(-10deg); }
|
||||||
|
75% { transform: rotate(10deg); }
|
||||||
|
100% { transform: rotate(0deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
#melon {
|
||||||
|
animation: wiggle 2s ease infinite; /* Adjust duration and timing function for desired effect */
|
||||||
|
}
|
||||||
15
index.html
15
index.html
|
|
@ -8,8 +8,17 @@
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="home/">
|
<div id="main">
|
||||||
<img src="./static/site/logo.png" class="logo">
|
<div class="logo">
|
||||||
</a>
|
<a href="home/">
|
||||||
|
<img src="./static/site/logo.png" id="melon">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="text">
|
||||||
|
<img src="ai_laptop_crying.png.webp">
|
||||||
|
<h1>Um... e-excuse me... T-this website... uses music a lot, so... um... please remember to turn autoplay on!</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
13
script.js
Normal file
13
script.js
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
BIN
static/fonts/Brushzing-Regular.ttf.otf
Normal file
BIN
static/fonts/Brushzing-Regular.ttf.otf
Normal file
Binary file not shown.
BIN
static/fonts/c1-kenangan.regular.otf
Normal file
BIN
static/fonts/c1-kenangan.regular.otf
Normal file
Binary file not shown.
56
styles.css
56
styles.css
|
|
@ -1,21 +1,47 @@
|
||||||
body, html {
|
body, html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow: hidden; /* Prevents scrollbar from appearing */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
#main{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
#text {
|
||||||
max-width: 100%;
|
opacity: 0;
|
||||||
height: auto;
|
transition: opacity 0.5s ease-in-out;
|
||||||
transition: transform 0.3s, scale 0.3s;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover {
|
#main:hover .logo img {
|
||||||
transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */
|
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…
Add table
Reference in a new issue