diff --git a/home.html b/home.html index 0cc82c2..b654c07 100644 --- a/home.html +++ b/home.html @@ -4,7 +4,155 @@ Login Memory Cards - + @@ -35,5 +183,15 @@ - + \ No newline at end of file diff --git a/home.js b/home.js deleted file mode 100644 index 485fe5c..0000000 --- a/home.js +++ /dev/null @@ -1,8 +0,0 @@ -function goToLoginCard() { - document.querySelector(".memory").classList.add("hidden"); - document.querySelector(".login-wrapper").classList.remove("hidden"); -} -function goToLoginCard() { - window.location.href = "login.html"; // atau page tujuan lain -} - diff --git a/homestyle.css b/homestyle.css deleted file mode 100644 index 577e5bc..0000000 --- a/homestyle.css +++ /dev/null @@ -1,148 +0,0 @@ -/* === BACKGROUND === */ -body { - margin: 0; - font-family: Poppins, Arial, sans-serif; - height: 100vh; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - - /* Pink → Ungu Gradient */ - background: linear-gradient(135deg, #ff9ed1, #d784ff); -} - -/* === ANIMATED FLOATING FRUITS === */ -.fruit { - position: absolute; - width: 95px; - opacity: 0.85; - animation: float 7s infinite ease-in-out; - pointer-events: none; /* supaya tidak ganggu klik */ - filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12)); -} - -/* Posisi lebih seimbang & tidak menutupi teks */ -.f1 { top: 6%; left: 12%; animation-delay: .3s; } -.f2 { top: 12%; right: 18%; animation-delay: 1.2s; } -.f3 { top: 48%; right: 8%; animation-delay: .7s; } -.f4 { top: 72%; left: 20%; animation-delay: 1.6s; } -.f5 { top: 28%; left: 60%; animation-delay: .5s; } -.f6 { top: 68%; right: 22%; animation-delay: 1s; } -.f7 { top: 40%; left: 10%; animation-delay: .9s; } -.f8 { top: 82%; left: 70%; animation-delay: 1.4s; } -.f9 { top: 18%; right: 46%; animation-delay: .6s; } -.f10 { top: 80%; right: 10%; animation-delay: 1.8s; } - -/* Smooth floating animation */ -@keyframes float { - 0% { transform: translateY(0) rotate(0deg); } - 50% { transform: translateY(-18px) rotate(6deg); } - 100% { transform: translateY(0) rotate(0deg); } -} - -@keyframes drift { - 0% { transform: translateX(0); } - 50% { transform: translateX(22px); } - 100% { transform: translateX(0); } -} - -.fruit { - width: clamp(70px, 7vw, 105px); -} - -/* === CENTRAL CONTAINER === */ -.container { - text-align: center; -} - -/* === TITLE WITH GLOW ANIMATION === */ -.title { - font-size: 70px; - font-weight: 900; - color: #ffffff; - line-height: 0.9; - text-shadow: - 0 0 10px #ab2cff, - 0 0 25px #ff54de, - 0 0 35px #a639ff; - - animation: glow 2s infinite alternate; -} - -@keyframes glow { - 0% { - text-shadow: - 0 0 10px #ab2cff, - 0 0 25px #ff54de, - 0 0 40px #a639ff; - } - 100% { - text-shadow: - 0 0 20px #ffb3f9, - 0 0 45px #ff7df3, - 0 0 60px #bb5bff; - } -} - -/* === BUTTONS === */ -.btn { - width: 260px; - padding: 18px 0; - font-size: 22px; - font-weight: bold; - border: none; - border-radius: 40px; - cursor: pointer; - background: linear-gradient(45deg, purple, hotpink); - box-shadow: 0 6px 0 rgb(90, 1, 90); - transition: transform .2s ease-in-out; - color: white; -} - -/* === BUTTON SHAKE ON HOVER === */ -.btn:hover { - animation: shake 0.4s ease-in-out; -} - -@keyframes shake { - 0% { transform: translateX(0); } - 25% { transform: translateX(-3px); } - 50% { transform: translateX(3px); } - 75% { transform: translateX(-2px); } - 100% { transform: translateX(0); } -} - - -/* === OR LINE === */ -.or-line { - display: flex; - align-items: center; - justify-content: center; - margin: 25px 0; -} - -.line { - width: 80px; - height: 2px; - background: rgba(255,255,255,0.8); -} - -.or-line span { - margin: 0 10px; - font-weight: bold; -} - -/* === HOW TO PLAY === */ -.how { - margin-top: 5px; - font-size: 22px; - color: #fff; - opacity: 0.9; - padding: 2px 0; - cursor: pointer; - -} - - .hidden { display: none !important; -}