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

menu

Browse Source
server
waifu 8 months ago
parent a3057a8ffb
commit 30e3e66fd7
3 changed files with 49 additions and 14 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 35
      home/index.html
  2. 22
      home/styles.css
  3. 2
      styles.css

35
home/index.html
Unescape View File

@ -7,17 +7,38 @@
<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">
</head> </head>
<body><img src="logo.png" id="logo"> <body>
<img src="start.png" alt="">
<div id="menu"> <div id="menu">
<div> <div id="image-container">
<img src="logo.png" id="logo"> <img src="empty.png" id="large-image">
</div> </div>
<div> <div>
<a href="./art/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"><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"><img src="seed.png"></a> <a href="./friends/index.html" class="seed" id="friends"><img src="seed.png"></a>
<a href="./about/index.html" class="seed"><img src="seed.png"></a> <a href="./stuff/index.html" class="seed" id="stuff"><img src="seed.png"></a>
</div> </div>
</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> </body>
</html> </html>

22
home/styles.css
Unescape View File

@ -1,20 +1,30 @@
body, html {
height: 100%;
margin: 0;
overflow: hidden; /* Prevents scrollbar from appearing */
}
body { body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
} }
#menu { #menu {
width: 800px; width: 800px;
height: 400px; height: 400px;
margin-top: 100px;
border: 10px groove seagreen;
background-color: rgb(240, 106, 106);
background-size: contain; background-size: contain;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 100%;
height: auto;
transition: transform 0.3s, scale 0.3s;
} }
@ -34,7 +44,7 @@ p{
} }
.seed { .seed {
display: block; display: block;
margin-bottom: 10px; /* Adjust the spacing between seeds as needed */ margin-bottom: 90px; /* Adjust the spacing between seeds as needed */
} }
.seed img { .seed img {
transition: transform 0.3s ease; transition: transform 0.3s ease;
@ -42,3 +52,7 @@ p{
.seed img:hover { .seed img:hover {
transform: scale(1.1); transform: scale(1.1);
} }
#image-container {
transition: opacity 0.5s ease; /* Fade transition */
}

2
styles.css
Unescape View File

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