waifu/waifuism
1
0
Fork 0
Code Issues 2 Pull requests Projects 1 Releases Packages Wiki Activity

Compare commits

base: waifu:94ee3d60973564077afce47da5fa936f841d0b72
Branches Tags
waifu:master
waifu:server
...
compare: waifu:30e3e66fd7696a8df1ddb754e77d9bc4beafd785
Branches Tags
waifu:master
waifu:server

2 commits
94ee3d6097 ... 30e3e66fd7

Author SHA1 Message Date
waifu
30e3e66fd7 menu 2024-04-21 20:23:14 -03:00
waifu
a3057a8ffb init 2024-04-21 14:59:24 -03:00
4 changed files with 138 additions and 0 deletions
Show stats Expand all files Collapse all files

44
home/index.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home??</title>
<link rel="icon" href="../static/site/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="start.png" alt="">
<div id="menu">
<div id="image-container">
<img src="empty.png" id="large-image">
</div>
<div>
<a href="./art/index.html" class="seed" id="art"><img src="seed.png"></a>
<a href="./shrine/index.html" class="seed" id="shrine"><img src="seed.png"></a>
<a href="./friends/index.html" class="seed" id="friends"><img src="seed.png"></a>
<a href="./stuff/index.html" class="seed" id="stuff"><img src="seed.png"></a>
</div>
</div>
<script>const menuItems = document.querySelectorAll('.seed');
const largeImage = document.getElementById('large-image');
const imageContainer = document.getElementById('image-container');
menuItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const subfolder = item.getAttribute('id');
const imgSrc = `${subfolder}.png`; // Generating image path from subfolder name
largeImage.src = imgSrc;
imageContainer.style.opacity = 1;
});
item.addEventListener('mouseleave', () => {
imageContainer.style.opacity = 0;
});
});
</script>
</body>
</html>

58
home/styles.css Normal file
View file

@ -0,0 +1,58 @@
body, html {
height: 100%;
margin: 0;
overflow: hidden; /* Prevents scrollbar from appearing */
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#menu {
width: 800px;
height: 400px;
background-size: contain;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 100%;
height: auto;
transition: transform 0.3s, scale 0.3s;
}
p{
color: dodgerblue;
align-self: center;
border: 4px dashed dodgerblue;
background-color: white;
margin-right: 40px;
margin-left: 40px;
}
#logo{
align-self: center;
justify-content: flex-start;
}
.seed {
display: block;
margin-bottom: 90px; /* Adjust the spacing between seeds as needed */
}
.seed img {
transition: transform 0.3s ease;
}
.seed img:hover {
transform: scale(1.1);
}
#image-container {
transition: opacity 0.5s ease; /* Fade transition */
}

15
index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waifuism.life</title>
<link rel="icon" href="static/site/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="home/index.html">
<img src="./static/site/logo.png" class="logo">
</a>
</body>
</html>

21
styles.css Normal file
View file

@ -0,0 +1,21 @@
body, html {
height: 100%;
margin: 0;
overflow: hidden; /* Prevents scrollbar from appearing */
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
max-width: 100%;
height: auto;
transition: transform 0.3s, scale 0.3s;
}
.logo:hover {
transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */
}