Compare commits
2 Commits
94ee3d6097
...
30e3e66fd7
| Author | SHA1 | Date |
|---|---|---|
 waifu
|
30e3e66fd7 | 3 weeks ago |
|
waifu
|
a3057a8ffb | 3 weeks ago |
@ -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> |
||||
@ -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 */ |
||||
} |
||||
@ -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> |
||||
@ -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 */ |
||||
} |
||||
Loading…
Reference in new issue