Homepage Credit and Responsive
This commit is contained in:
Jevinca Marvella
parent
a502ad1ed3
commit
9fee35e6e6
14
Homepage.css
14
Homepage.css
@ -13,6 +13,11 @@ body {
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
/* Animated Background Grid */
|
||||
@ -195,8 +200,15 @@ header {
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 140px 20px 120px;
|
||||
max-width: 1100px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 70vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
|
||||
@ -12,36 +12,36 @@
|
||||
<!-- Neon Particles Background -->
|
||||
<div id="particles"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="logo">2048</div>
|
||||
<div class="nav-buttons">
|
||||
<a href="Login.html" class="btn btn-login">Login</a>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Wrapper -->
|
||||
<div class="main-content">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="logo">2048</div>
|
||||
<div class="nav-buttons">
|
||||
<a href="Login.html" class="btn btn-login">Login</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-title">2048</div>
|
||||
<p class="hero-subtitle">Join the tiles, reach 2048</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="2048.html" class="btn btn-cta btn-play">Play</a>
|
||||
<a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Spacer -->
|
||||
<br><br><br>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-title">2048</div>
|
||||
<p class="hero-subtitle">Join the tiles, reach 2048</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="2048.html" class="btn btn-cta btn-play">Play</a>
|
||||
<a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer with Credits -->
|
||||
<footer>
|
||||
<hr class="footer-hr">
|
||||
<div class="credits">
|
||||
<p class="credits-text">
|
||||
<strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<footer>
|
||||
<hr class="footer-hr">
|
||||
<div class="credits">
|
||||
<p class="credits-text">
|
||||
<strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Logout Confirmation Modal -->
|
||||
<div class="logout-overlay" id="logout-overlay" style="display: none">
|
||||
|
||||
@ -1,40 +1,23 @@
|
||||
/* Body Setup - Flexbox untuk push footer ke bawah */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
/* Main Content Wrapper - Takes all space except footer */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Main Content Area - Flex Grow untuk isi space */
|
||||
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 Section - Always at bottom */
|
||||
footer {
|
||||
position: relative;
|
||||
margin-top: auto; /* push footer ke bawah */
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 20px 20px;
|
||||
padding: 20px;
|
||||
background: transparent;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* HR Line Above Credits - Simple Single Line */
|
||||
/* HR Line Above Credits */
|
||||
.footer-hr {
|
||||
width: 50%;
|
||||
max-width: 500px;
|
||||
@ -44,7 +27,7 @@ footer {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Credits Container - No Box, Just Text */
|
||||
/* Credits Container */
|
||||
.credits {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
@ -53,7 +36,7 @@ footer {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Simple Credit Text - Small & Clean */
|
||||
/* Credit Text */
|
||||
.credits-text {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
@ -68,23 +51,12 @@ footer {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
footer {
|
||||
padding: 15px 15px;
|
||||
}
|
||||
|
||||
.footer-hr {
|
||||
width: 60%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.credits-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive - HP Only */
|
||||
@media (max-width: 480px) {
|
||||
.main-content {
|
||||
min-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
@ -95,7 +67,11 @@ footer {
|
||||
}
|
||||
|
||||
.credits-text {
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
font-size: 9px;
|
||||
line-height: 1.6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user