Skip to content

Commit 930cf8b

Browse files
futurestackintelfuturestackintel
authored
Update index.html
1 parent 26b1288 commit 930cf8b

1 file changed

Lines changed: 154 additions & 2 deletions

File tree

‎index.html‎

Lines changed: 154 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,9 +1073,123 @@
10731073
align-items: center;
10741074
}
10751075

1076+
/* HAMBURGER */
1077+
.hamburger {
1078+
display: none;
1079+
flex-direction: column;
1080+
gap: 5px;
1081+
cursor: pointer;
1082+
padding: 8px;
1083+
border: 1px solid var(--glass-border);
1084+
border-radius: 4px;
1085+
background: var(--glass);
1086+
transition: all 0.3s;
1087+
z-index: 200;
1088+
}
1089+
.hamburger:hover { border-color: var(--cyan); }
1090+
.hamburger span {
1091+
display: block;
1092+
width: 22px; height: 2px;
1093+
background: var(--cyan);
1094+
border-radius: 2px;
1095+
transition: all 0.3s;
1096+
}
1097+
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
1098+
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
1099+
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
1100+
1101+
.mobile-nav {
1102+
display: none;
1103+
position: fixed;
1104+
top: 69px; left: 0; right: 0;
1105+
background: rgba(5,8,22,0.98);
1106+
backdrop-filter: blur(30px);
1107+
border-bottom: 1px solid var(--glass-border);
1108+
padding: 16px;
1109+
z-index: 99;
1110+
flex-direction: column;
1111+
gap: 4px;
1112+
}
1113+
.mobile-nav.active { display: flex; }
1114+
.mobile-nav a {
1115+
color: var(--muted);
1116+
text-decoration: none;
1117+
font-family: 'Orbitron', monospace;
1118+
font-size: 12px;
1119+
letter-spacing: 2px;
1120+
text-transform: uppercase;
1121+
padding: 14px 16px;
1122+
border-radius: 4px;
1123+
border: 1px solid transparent;
1124+
display: flex;
1125+
align-items: center;
1126+
justify-content: space-between;
1127+
transition: all 0.2s;
1128+
}
1129+
.mobile-nav a:active { color: var(--cyan); background: var(--glass); border-color: var(--glass-border); }
1130+
.mobile-nav a::after { content: '→'; color: var(--cyan); font-size: 14px; }
1131+
.mobile-nav-cta {
1132+
margin-top: 8px;
1133+
background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
1134+
color: var(--dark) !important;
1135+
font-weight: 700;
1136+
justify-content: center !important;
1137+
}
1138+
.mobile-nav-cta::after { display: none !important; }
1139+
1140+
/* ABOUT */
1141+
.about-grid {
1142+
display: grid;
1143+
grid-template-columns: 1fr 1fr;
1144+
gap: 60px;
1145+
align-items: center;
1146+
}
1147+
1148+
/* FULL MOBILE RESPONSIVE */
10761149
@media (max-width: 768px) {
1077-
.about-grid { grid-template-columns: 1fr; }
1078-
.stats-bar { padding: 30px 20px; }
1150+
.cursor, .cursor-ring { display: none; }
1151+
body { cursor: auto; }
1152+
nav { padding: 12px 20px; }
1153+
.nav-links { display: none; }
1154+
.hamburger { display: flex; }
1155+
.about-grid { grid-template-columns: 1fr; gap: 36px; }
1156+
.stats-bar { padding: 24px 20px; grid-template-columns: repeat(2,1fr); }
1157+
.stat-number { font-size: 22px; }
1158+
.hero { padding: 60px 20px 80px; min-height: 90vh; }
1159+
.hero p { font-size: 15px; }
1160+
.hero-btns { flex-direction: column; align-items: center; gap: 12px; }
1161+
.btn-primary, .btn-secondary { width: 100%; text-align: center; padding: 16px 20px; }
1162+
.hero-glow { width: 300px; height: 300px; }
1163+
section { padding: 60px 20px; }
1164+
.section-title { font-size: clamp(22px, 6vw, 32px); }
1165+
.services-grid { grid-template-columns: 1fr; gap: 14px; }
1166+
.service-card { padding: 24px; }
1167+
.ebooks-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
1168+
.ebook-cover-img { height: 240px; }
1169+
.platform-btns { gap: 6px; }
1170+
.btn-platform { padding: 10px 12px; }
1171+
.courses-banner { padding: 36px 20px; }
1172+
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
1173+
.modal { padding: 28px 20px; margin: 10px; }
1174+
.modal h2 { font-size: 16px; }
1175+
.newsletter-bar { padding: 36px 20px; margin: 0 20px 60px; }
1176+
.newsletter-form { flex-direction: column; }
1177+
.newsletter-form input, .newsletter-form a { width: 100%; text-align: center; justify-content: center; }
1178+
footer { padding: 30px 20px; }
1179+
.footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
1180+
.footer-links { gap: 14px; flex-wrap: wrap; }
1181+
}
1182+
1183+
@media (max-width: 380px) {
1184+
.hero h1 { font-size: 25px; }
1185+
.btn-platform { font-size: 9px; padding: 8px 10px; }
1186+
.platform-btns { flex-direction: column; }
1187+
}
1188+
1189+
@media (hover: none) {
1190+
.service-card:active { background: rgba(0,234,255,0.08); transform: scale(0.98); }
1191+
.btn-platform:active { transform: scale(0.96); }
1192+
.btn-primary:active, .btn-secondary:active { transform: scale(0.97); }
10791193
}
10801194

10811195
.about-text p {
@@ -1216,8 +1330,22 @@
12161330
<li><a href="#courses">Courses</a></li>
12171331
<li><a href="#contact" class="nav-cta">Work With Us</a></li>
12181332
</ul>
1333+
<div class="hamburger" id="hamburger" onclick="toggleMenu()">
1334+
<span></span>
1335+
<span></span>
1336+
<span></span>
1337+
</div>
12191338
</nav>
12201339

1340+
<!-- MOBILE NAV MENU -->
1341+
<div class="mobile-nav" id="mobileNav">
1342+
<a href="#about" onclick="closeMenu()">About</a>
1343+
<a href="#services" onclick="closeMenu()">Services</a>
1344+
<a href="#ebooks" onclick="closeMenu()">Ebooks</a>
1345+
<a href="#courses" onclick="closeMenu()">Courses</a>
1346+
<a href="#contact" class="mobile-nav-cta" onclick="closeMenu()">Work With Us</a>
1347+
</div>
1348+
12211349
<!-- HERO -->
12221350
<div class="hero">
12231351
<div class="hero-glow"></div>
@@ -1671,6 +1799,30 @@ <h3>Send A Message</h3>
16711799
</footer>
16721800

16731801
<script>
1802+
// HAMBURGER MENU
1803+
function toggleMenu() {
1804+
const hamburger = document.getElementById('hamburger');
1805+
const mobileNav = document.getElementById('mobileNav');
1806+
hamburger.classList.toggle('active');
1807+
mobileNav.classList.toggle('active');
1808+
document.body.style.overflow = mobileNav.classList.contains('active') ? 'hidden' : '';
1809+
}
1810+
1811+
function closeMenu() {
1812+
document.getElementById('hamburger').classList.remove('active');
1813+
document.getElementById('mobileNav').classList.remove('active');
1814+
document.body.style.overflow = '';
1815+
}
1816+
1817+
// Close menu when clicking outside
1818+
document.addEventListener('click', function(e) {
1819+
const nav = document.getElementById('mobileNav');
1820+
const hamburger = document.getElementById('hamburger');
1821+
if (nav.classList.contains('active') && !nav.contains(e.target) && !hamburger.contains(e.target)) {
1822+
closeMenu();
1823+
}
1824+
});
1825+
16741826
// CURSOR
16751827
const cursor = document.getElementById('cursor');
16761828
const ring = document.getElementById('cursorRing');

0 commit comments

Comments
 (0)