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

ganti css login

Browse Source
This commit is contained in:
Yustina 2025-11-24 15:11:35 +07:00
parent eaa0f0542f
commit 98e9645917
1 changed files with 87 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
login.css
View File

@ -1,5 +1,6 @@
body /* Background & body */
{ body {
margin: 0;
font-family: Poppins, Arial, sans-serif; font-family: Poppins, Arial, sans-serif;
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
min-height: 100vh; min-height: 100vh;
@ -9,23 +10,24 @@ body
align-items: center; align-items: center;
} }
/* Background animation circles */ /* Animated background circles */
.bg-animated .bg-circle { .bg-1, .bg-2, .bg-3 {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
filter: blur(70px); filter: blur(70px);
animation: float 7s infinite ease-in-out;
opacity: 0.8; opacity: 0.8;
animation: float 7s infinite ease-in-out;
} }
.one { .bg-1 {
top: 10%; top: 10%;
left: 5%; left: 5%;
width: 220px; width: 220px;
height: 220px; height: 220px;
background: rgba(255,255,255,0.5); background: rgba(255,255,255,0.5);
} }
.two {
.bg-2 {
bottom: 10%; bottom: 10%;
right: 5%; right: 5%;
width: 300px; width: 300px;
@ -33,11 +35,13 @@ body
background: rgba(255,180,220,0.5); background: rgba(255,180,220,0.5);
animation-delay: 1.3s; animation-delay: 1.3s;
} }
.three {
top: 60%; .bg-3 {
top: 55%;
left: 50%; left: 50%;
width: 200px; width: 200px;
height: 200px; height: 200px;
transform: translate(-50%, -50%);
background: rgba(150,110,255,0.5); background: rgba(150,110,255,0.5);
animation-delay: 2s; animation-delay: 2s;
} }
@ -47,9 +51,9 @@ body
50% { transform: translateY(-25px); } 50% { transform: translateY(-25px); }
} }
/* Card */ /* 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);
padding: 35px; padding: 35px;
max-width: 420px; max-width: 420px;
@ -58,6 +62,7 @@ body
box-shadow: 0 20px 50px rgba(0,0,0,0.15); box-shadow: 0 20px 50px rgba(0,0,0,0.15);
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;
} }
/* Icon */ /* Icon */
@ -67,48 +72,55 @@ body
margin-bottom: 25px; margin-bottom: 25px;
} }
.icon-circle { .icon-bg {
background: linear-gradient(135deg, #7928ff, #ff0080); width: 90px;
padding: 22px; height: 90px;
position: absolute;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 6px 20px rgba(255,0,128,0.4); filter: blur(15px);
background: linear-gradient(135deg, #7928ff, #ff0080);
animation: float 5s infinite ease-in-out;
} }
.login-icon { .icon {
width: 45px; width: 70px;
height: 45px; height: 70px;
background: linear-gradient(135deg, #7928ff, #ff0080);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
} }
/* Header Text */ /* Title & subtitle */
.header-text { .title {
text-align: center; text-align: center;
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(45deg, #7928ff, #ff0080);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.subtitle {
text-align: center;
color: #333;
margin-bottom: 20px; margin-bottom: 20px;
} }
.header-text h2 { /* Input fields */
background: linear-gradient(45deg, #7928ff, #ff0080);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
font-size: 28px;
}
.header-text p {
color: #333;
font-size: 14px;
}
/* Inputs */
input { input {
width: 100%; width: 100%;
padding: 13px; padding: 13px;
margin-bottom: 15px;
border-radius: 12px; border-radius: 12px;
border: 2px solid #e6d9ff; border: 2px solid #e6d9ff;
background: rgba(255,255,255,0.75); background: rgba(255,255,255,0.75);
box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 15px;
transition: 0.3s ease; transition: 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
} }
input:focus { input:focus {
@ -117,8 +129,20 @@ input:focus {
outline: none; outline: none;
} }
/* Login Button */ /* Error box */
.btn-login { #errorBox {
background: #ffe5e5;
border: 1px solid #ffb2b2;
color: #b00000;
padding: 10px;
border-radius: 12px;
margin-bottom: 10px;
display: none;
box-shadow: 0 5px 15px rgba(255,0,0,0.1);
}
/* Button */
.btn {
width: 100%; width: 100%;
padding: 13px; padding: 13px;
background: linear-gradient(to right, #7928ff, #ff0080); background: linear-gradient(to right, #7928ff, #ff0080);
@ -132,37 +156,19 @@ input:focus {
transition: 0.3s ease; transition: 0.3s ease;
} }
.btn-login:hover { .btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(255,0,128,0.4); box-shadow: 0 10px 18px rgba(255,0,128,0.4);
} }
/* Error Box */ /* Register link */
.error { .login-link {
background: #ffe5e5; text-align: center;
border: 1px solid #ffb2b2; margin-top: 15px;
color: #b00000;
padding: 10px;
border-radius: 12px;
margin-bottom: 10px;
display: none;
box-shadow: 0 5px 15px rgba(255,0,0,0.1);
} }
/* Demo Box */ .login-link a {
.demo-box { color: #7928ff;
background: rgba(240,240,255,0.7); font-weight: 600;
padding: 18px; text-decoration: underline;
margin-top: 20px;
border-radius: 18px;
border: 1px solid rgba(180,160,255,0.4);
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.demo-item {
background: white;
padding: 12px;
margin-top: 12px;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
} }