2526-web/kelompok06-2048
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage Update Responsive

Browse Source
This commit is contained in:
Jevinca Marvella 2025-12-08 10:10:14 +07:00
parent 1394ce7270
commit a502ad1ed3
3 changed files with 295 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
Homepage.css
View File

@ -171,23 +171,23 @@ header {
position: relative; position: relative;
z-index: 1; z-index: 1;
animation: loginPulse 2s ease-in-out infinite; animation: loginPulse 2s ease-in-out infinite;
} }
@keyframes loginPulse { @keyframes loginPulse {
0%, 100% { 0%, 100% {
box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5); box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
} }
50% { 50% {
box-shadow: 0 8px 40px rgba(0, 234, 255, 0.9), 0 0 35px rgba(0, 153, 255, 0.7); box-shadow: 0 8px 40px rgba(0, 234, 255, 0.9), 0 0 35px rgba(0, 153, 255, 0.7);
} }
} }
.btn-login:hover { .btn-login:hover {
background: linear-gradient(135deg, #7d0dde, #00aaff); background: linear-gradient(135deg, #7d0dde, #00aaff);
box-shadow: 0 12px 50px rgb(117, 3, 230), 0 0 50px rgba(0, 153, 255, 0.9); box-shadow: 0 12px 50px rgb(117, 3, 230), 0 0 50px rgba(0, 153, 255, 0.9);
transform: translateY(-5px) scale(1.1); transform: translateY(-5px) scale(1.1);
border-color: rgba(0, 255, 255, 0.8); border-color: rgba(0, 255, 255, 0.8);
} }
/* Hero Section */ /* Hero Section */
.hero { .hero {
@ -361,7 +361,6 @@ header {
box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7); box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
} }
/* Floating Decoration Elements */ /* Floating Decoration Elements */
.hero::before { .hero::before {
content: ''; content: '';
@ -412,8 +411,6 @@ header {
/* =========================== /* ===========================
LOGOUT BUTTON STYLES LOGOUT BUTTON STYLES
=========================== */ =========================== */
/* Logout Button */
.btn-logout { .btn-logout {
background: linear-gradient(135deg, #ff0066, #cc0033) !important; background: linear-gradient(135deg, #ff0066, #cc0033) !important;
color: #fff !important; color: #fff !important;
@ -693,33 +690,3 @@ header {
line-height: 1.6; line-height: 1.6;
font-family: 'Exo 2', sans-serif; font-family: 'Exo 2', sans-serif;
} }
/* ===========================
RESPONSIVE FOR LOGOUT MODALS
=========================== */
@media (max-width: 480px) {
.logout-modal,
.logout-success-modal {
padding: 40px 30px;
}
.logout-title,
.success-title {
font-size: 24px;
}
.logout-message,
.success-message {
font-size: 14px;
}
.logout-buttons {
flex-direction: column;
gap: 12px;
}
.btn-logout-cancel,
.btn-logout-confirm {
width: 100%;
}
}

1
Homepage.html
View File

@ -6,6 +6,7 @@
<title>Homepage</title> <title>Homepage</title>
<link rel="stylesheet" href="Homepage.css"> <link rel="stylesheet" href="Homepage.css">
<link rel="stylesheet" href="Homepage_Credit.css"> <link rel="stylesheet" href="Homepage_Credit.css">
<link rel="stylesheet" href="Homepage_Responsive.css">
</head> </head>
<body> <body>
<!-- Neon Particles Background --> <!-- Neon Particles Background -->

78
Homepage_Responsive.css Normal file
View File

@ -0,0 +1,78 @@
/* RESPONSIVE */
@media (max-width: 480px) {
/* Header */
header {
padding: 18px 20px;
flex-direction: column;
gap: 12px;
}
.logo {
font-size: 24px;
letter-spacing: 2px;
}
.btn-login {
padding: 12px 28px;
font-size: 14px;
letter-spacing: 2px;
}
/* Hero Section - CENTERED & BALANCED */
.hero {
padding: 50px 15px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 120px);
}
.hero-title {
font-size: 60px;
letter-spacing: 5px;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 35px;
}
.btn-cta {
padding: 15px 32px;
font-size: 15px;
letter-spacing: 2px;
}
.cta-buttons {
gap: 15px;
}
/* Logout Modal Responsive */
.logout-modal,
.logout-success-modal {
padding: 40px 30px;
}
.logout-title,
.success-title {
font-size: 24px;
}
.logout-message,
.success-message {
font-size: 14px;
}
.logout-buttons {
flex-direction: column;
gap: 12px;
}
.btn-logout-cancel,
.btn-logout-confirm {
width: 100%;
}
}