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

104
login.css
View File

@ -1,7 +1,6 @@
/* Background & body */
body {
margin: 0;
font-family: Poppins, Arial, sans-serif;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
min-height: 100vh;
overflow: hidden;
@ -10,48 +9,12 @@ body {
align-items: center;
}
/* Animated background circles */
/* Hapus semua circle pink sebelumnya */
.bg-1, .bg-2, .bg-3 {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.8;
animation: float 7s infinite ease-in-out;
display: none !important;
}
.bg-1 {
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);
backdrop-filter: blur(20px);
@ -63,34 +26,14 @@ body {
border: 1px solid rgba(255,255,255,0.4);
position: relative;
z-index: 5;
overflow: visible;
}
/* Icon */
.icon-wrapper {
display: flex;
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;
}
/* Hapus lingkaran icon pink */
.icon-wrapper,
.icon-bg,
.icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #7928ff, #ff0080);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
display: none !important;
}
/* Title & subtitle */
@ -171,4 +114,31 @@ input:focus {
color: #7928ff;
font-weight: 600;
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;
}
}

7
login.html
View File

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

3
mainboard.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<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">
</head>
@ -25,7 +25,6 @@
</div>
</header>
<!-- TITLE -->
<div class="title">
<h1>🎮 Memory Flip Card Game</h1>
<p>Pilih tingkat kesulitan untuk memulai permainan</p>

2
register.css
View File

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