2526-web/Kelompok02-Memory-Card
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mengubah login css

Browse Source
This commit is contained in:
Evelyn 2025-12-01 09:40:19 +07:00
parent a136705022
commit 92caf5189c
4 changed files with 42 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
login.css
View File

@ -1,7 +1,6 @@
/* Background & body */
body { body {
margin: 0; margin: 0;
font-family: Poppins, Arial, sans-serif; font-family: Arial, sans-serif;
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
@ -10,48 +9,12 @@ body {
align-items: center; align-items: center;
} }
/* Animated background circles */ /* Hapus semua circle pink sebelumnya */
.bg-1, .bg-2, .bg-3 { .bg-1, .bg-2, .bg-3 {
position: absolute; display: none !important;
border-radius: 50%;
filter: blur(70px);
opacity: 0.8;
animation: float 7s infinite ease-in-out;
} }
.bg-1 { /* Login Card */
top: 10%;
left: 5%;
width: 220px;
height: 220px;
background: rgba(255,255,255,0.5);
}
.bg-2 {
bottom: 10%;
right: 5%;
width: 300px;
height: 300px;
background: rgba(255,180,220,0.5);
animation-delay: 1.3s;
}
.bg-3 {
top: 55%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
background: rgba(150,110,255,0.5);
animation-delay: 2s;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-25px); }
}
/* Login Card (match with register) */
.login-card { .login-card {
background: rgba(255,255,255,0.35); background: rgba(255,255,255,0.35);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
@ -63,34 +26,14 @@ body {
border: 1px solid rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.4);
position: relative; position: relative;
z-index: 5; z-index: 5;
overflow: visible;
} }
/* Icon */ /* Hapus lingkaran icon pink */
.icon-wrapper { .icon-wrapper,
display: flex; .icon-bg,
justify-content: center;
margin-bottom: 25px;
}
.icon-bg {
width: 90px;
height: 90px;
position: absolute;
border-radius: 50%;
filter: blur(15px);
background: linear-gradient(135deg, #7928ff, #ff0080);
animation: float 5s infinite ease-in-out;
}
.icon { .icon {
width: 70px; display: none !important;
height: 70px;
background: linear-gradient(135deg, #7928ff, #ff0080);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
} }
/* Title & subtitle */ /* Title & subtitle */
@ -172,3 +115,30 @@ input:focus {
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
} }
/* ✨ GLITTER BURST ANIMATION ✨ */
.glitter {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
opacity: 0;
animation: glitter-burst 2s infinite ease-out;
pointer-events: none;
}
/* Random sparkle movement */
@keyframes glitter-burst {
0% {
transform: scale(0.4) translate(0,0);
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
transform: scale(1) translate(var(--x), var(--y));
opacity: 0;
}
}

5
login.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title> <title>Login</title>
<link rel="stylesheet" href="login.css" /> <link rel="stylesheet" href="login.css" />
</head> </head>
<body> <body>
@ -24,10 +24,9 @@
<div class="icon-circle"> <div class="icon-circle">
</div> </div>
</div> </div>
<div class="header-text"> <div class="header-text">
<h2>Selamat Datang! ✨</h2> <h2>Selamat Datang! ✨</h2>
<p>Login untuk bermain Memory Card Game</p> <p>Login untuk bermain Memory Flip Card Game</p>
</div> </div>
<form id="loginForm"> <form id="loginForm">

3
mainboard.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Game</title> <title>Memory Flip Card Game</title>
<link rel="stylesheet" href="mainboard.css"> <link rel="stylesheet" href="mainboard.css">
</head> </head>
@ -25,7 +25,6 @@
</div> </div>
</header> </header>
<!-- TITLE -->
<div class="title"> <div class="title">
<h1>🎮 Memory Flip Card Game</h1> <h1>🎮 Memory Flip Card Game</h1>
<p>Pilih tingkat kesulitan untuk memulai permainan</p> <p>Pilih tingkat kesulitan untuk memulai permainan</p>

2
register.css
View File

@ -1,7 +1,7 @@
body { body {
margin: 0; margin: 0;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background: #f7f7ff; background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);;
} }
.page { .page {