Compare commits
No commits in common. "30e3e66fd7696a8df1ddb754e77d9bc4beafd785" and "94ee3d60973564077afce47da5fa936f841d0b72" have entirely different histories.
30e3e66fd7
...
94ee3d6097
4 changed files with 0 additions and 138 deletions
|
@ -1,44 +0,0 @@
|
||||||
<!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>
|
|
|
@ -1,58 +0,0 @@
|
||||||
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
15
index.html
|
@ -1,15 +0,0 @@
|
||||||
<!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
21
styles.css
|
@ -1,21 +0,0 @@
|
||||||
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…
Add table
Reference in a new issue