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

menu

Browse source
This commit is contained in:
waifu 2024-04-21 20:23:14 -03:00
parent a3057a8ffb
commit 30e3e66fd7
3 changed files with 49 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
home/index.html
View file

@ -7,17 +7,38 @@
<link rel="icon" href="../static/site/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body><img src="logo.png" id="logo">
<body>
<img src="start.png" alt="">
<div id="menu">
<div>
<img src="logo.png" id="logo">
<div id="image-container">
<img src="empty.png" id="large-image">
</div>
<div>
<a href="./art/index.html" class="seed"><img src="seed.png"></a>
<a href="./shrine/index.html" class="seed"><img src="seed.png"></a>
<a href="./friends/index.html" class="seed"><img src="seed.png"></a>
<a href="./about/index.html" class="seed"><img src="seed.png"></a>
<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>

24
home/styles.css
View file

@ -1,20 +1,30 @@
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;
margin-top: 100px;
border: 10px groove seagreen;
background-color: rgb(240, 106, 106);
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;
}
@ -34,11 +44,15 @@ p{
}
.seed {
display: block;
margin-bottom: 10px; /* Adjust the spacing between seeds as needed */
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 */
}

4
styles.css
View file

@ -17,5 +17,5 @@ transition: transform 0.3s, scale 0.3s;
}
.logo:hover {
transform: scale(1.2) rotate(360deg); /* Rotates the logo 360 degrees */
}
transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */
}