Step into Wonderland
/* General */
body {
margin:0; padding:0;
font-family: 'Cursive', sans-serif;
background: linear-gradient(to bottom, #f0eafc, #ffe4f0);
color: #222;
}
/* Entrance */
#entrance {
height: 100vh;
display:flex; justify-content:center; align-items:center;
flex-direction: column;
position: relative;
}
#door-container {
position: relative; text-align:center;
cursor:pointer;
transition: transform 0.3s;
}
#door:hover { transform: scale(1.05); }
#door-text {
position:absolute; bottom:-50px; width:100%;
font-size:2em; color:#fff;
text-shadow: 0 0 10px #ffb6c1;
}
/* Gallery */
#portfolio { padding:50px; text-align:center; }
.gallery {
display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
}
.art-item {
width:200px; height:200px;
background-size:cover; background-position:center;
border-radius:15px; box-shadow:0 0 10px rgba(0,0,0,0.2);
transition: transform 0.3s;
}
.art-item:hover { transform: scale(1.05); }
/* Commission Flowers */
#commission { padding:50px; text-align:center; position:relative; }
.flower-container { display:flex; justify-content:center; gap:20px; }
.flower {
width:80px; height:80px; border-radius:50%;
background: pink; cursor:pointer;
position:relative; transition: transform 0.3s, box-shadow 0.3s;
}
.flower:hover {
transform: scale(1.2);
box-shadow:0 0 15px #ffb6c1;
}
#popup {
position:absolute; top:-40px; left:50%; transform:translateX(-50%);
padding:5px 10px; background:#fff0f5; border-radius:10px;
display:none; font-weight:bold; color:#d147a3;
}
/* Contact */
#contact { padding:50px; text-align:center; }
// Music
let musicPlaying = false;
const musicURL = "https://www.youtube.com/watch?v=QOZDKlpybZE";
const door = document.getElementById("door");
door.addEventListener("click", function(){
// Open music in new tab
window.open(musicURL, "_blank");
// Scroll to portfolio section after click
document.getElementById("portfolio").scrollIntoView({behavior:"smooth"});
});
// Commission hover popup
const flowers = document.querySelectorAll(".flower");
const popup = document.getElementById("popup");
flowers.forEach(flower => {
flower.addEventListener("mouseover", function(){
popup.style.display = "block";
popup.textContent = flower.getAttribute("data-info");
});
flower.addEventListener("mouseout", function(){
popup.style.display = "none";
});
});