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

Homepage Credit and Responsive

Browse Source
This commit is contained in:
Jevinca Marvella 2025-12-08 10:58:24 +07:00
parent a502ad1ed3
commit 9fee35e6e6
3 changed files with 62 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Homepage.css
View File

@ -13,6 +13,11 @@ body {
overflow-x: hidden; overflow-x: hidden;
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
max-width: 100vw;
} }
/* Animated Background Grid */ /* Animated Background Grid */
@ -195,8 +200,15 @@ header {
z-index: 10; z-index: 10;
text-align: center; text-align: center;
padding: 140px 20px 120px; padding: 140px 20px 120px;
max-width: 1100px; max-width: 100%;
width: 100%;
margin: 0 auto; margin: 0 auto;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 70vh;
overflow: hidden;
} }
.hero-title { .hero-title {

54
Homepage.html
View File

@ -12,36 +12,36 @@
<!-- Neon Particles Background --> <!-- Neon Particles Background -->
<div id="particles"></div> <div id="particles"></div>
<!-- Header --> <!-- Main Content Wrapper -->
<header> <div class="main-content">
<div class="logo">2048</div> <!-- Header -->
<div class="nav-buttons"> <header>
<a href="Login.html" class="btn btn-login">Login</a> <div class="logo">2048</div>
</div> <div class="nav-buttons">
</header> <a href="Login.html" class="btn btn-login">Login</a>
</div>
</header>
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero"> <section class="hero">
<div class="hero-title">2048</div> <div class="hero-title">2048</div>
<p class="hero-subtitle">Join the tiles, reach 2048</p> <p class="hero-subtitle">Join the tiles, reach 2048</p>
<div class="cta-buttons"> <div class="cta-buttons">
<a href="2048.html" class="btn btn-cta btn-play">Play</a> <a href="2048.html" class="btn btn-cta btn-play">Play</a>
<a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a> <a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
</div> </div>
</section> </section>
</div>
<!-- Spacer -->
<br><br><br>
<!-- Footer with Credits --> <!-- Footer with Credits -->
<footer> <footer>
<hr class="footer-hr"> <hr class="footer-hr">
<div class="credits"> <div class="credits">
<p class="credits-text"> <p class="credits-text">
<strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera <strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera
</p> </p>
</div> </div>
</footer> </footer>
<!-- Logout Confirmation Modal --> <!-- Logout Confirmation Modal -->
<div class="logout-overlay" id="logout-overlay" style="display: none"> <div class="logout-overlay" id="logout-overlay" style="display: none">

68
Homepage_Credit.css
View File

@ -1,40 +1,23 @@
/* Body Setup - Flexbox untuk push footer ke bawah */ /* Main Content Wrapper - Takes all space except footer */
body { .main-content {
min-height: 100vh; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 0; position: relative;
margin: 0; z-index: 10;
} }
/* Main Content Area - Flex Grow untuk isi space */ /* Footer Section - Always at bottom */
header,
.hero,
section:not(footer) {
flex-shrink: 0; /* prevent shrinking */
}
/* Spacer juga perlu flex-grow supaya push footer */
br {
display: block;
}
/* Wrapper untuk semua konten sebelum footer */
body > *:not(footer):not(script):not(#particles):not(.logout-overlay):not(.logout-success-overlay) {
flex-shrink: 0;
}
/* Footer Section - Relative & Auto Push to Bottom */
footer { footer {
position: relative; position: relative;
margin-top: auto; /* push footer ke bawah */
z-index: 10; z-index: 10;
text-align: center; text-align: center;
padding: 20px 20px; padding: 20px;
background: transparent; background: transparent;
margin-top: 0;
} }
/* HR Line Above Credits - Simple Single Line */ /* HR Line Above Credits */
.footer-hr { .footer-hr {
width: 50%; width: 50%;
max-width: 500px; max-width: 500px;
@ -44,7 +27,7 @@ footer {
border: none; border: none;
} }
/* Credits Container - No Box, Just Text */ /* Credits Container */
.credits { .credits {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
@ -53,7 +36,7 @@ footer {
border: none; border: none;
} }
/* Simple Credit Text - Small & Clean */ /* Credit Text */
.credits-text { .credits-text {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 12px; font-size: 12px;
@ -68,23 +51,12 @@ footer {
font-weight: 500; font-weight: 500;
} }
/* Responsive */ /* Responsive - HP Only */
@media (max-width: 768px) {
footer {
padding: 15px 15px;
}
.footer-hr {
width: 60%;
margin-bottom: 10px;
}
.credits-text {
font-size: 11px;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.main-content {
min-height: calc(100vh - 80px);
}
footer { footer {
padding: 12px 10px; padding: 12px 10px;
} }
@ -95,7 +67,11 @@ footer {
} }
.credits-text { .credits-text {
font-size: 10px; font-size: 9px;
line-height: 1.4; line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
} }
} }