diff --git a/index.html b/index.html
index 716645f..9ba9397 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
+
@@ -18,17 +19,19 @@
-
-
-
Sign in
-
Get started free
+
diff --git a/script.js b/script.js
index f7cae6b..9bd48b1 100644
--- a/script.js
+++ b/script.js
@@ -33,35 +33,27 @@ function initNavigation() {
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
- e.preventDefault();
const targetId = link.getAttribute('href');
- const targetElement = document.querySelector(targetId);
- if (targetElement) {
- const navHeight = document.querySelector('.navbar').offsetHeight;
- const targetPosition = targetElement.offsetTop - navHeight;
- window.scrollTo({
- top: targetPosition,
- behavior: 'smooth'
- });
- closeMobileMenu();
+ if (targetId && targetId !== '#' && targetId.startsWith('#')) {
+ e.preventDefault();
+ const targetElement = document.querySelector(targetId);
+ if (targetElement) {
+ const navHeight = document.querySelector('.navbar').offsetHeight;
+ const targetPosition = targetElement.offsetTop - navHeight;
+ window.scrollTo({
+ top: targetPosition,
+ behavior: 'smooth'
+ });
+ closeMobileMenu();
+ }
}
});
});
// Button actions
- const primaryBtns = document.querySelectorAll('.btn-primary');
- const secondaryBtns = document.querySelectorAll('.btn-secondary');
+ const allBtns = document.querySelectorAll('.btn-primary, .btn-secondary, .btn-text');
- primaryBtns.forEach(btn => {
- btn.addEventListener('click', (e) => {
- if (btn.getAttribute('href') === '#') {
- e.preventDefault();
- showNotification('Feature coming soon!', 'info');
- }
- });
- });
-
- secondaryBtns.forEach(btn => {
+ allBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
if (btn.getAttribute('href') === '#' || btn.tagName === 'BUTTON') {
e.preventDefault();
@@ -82,29 +74,23 @@ function initMobileMenu() {
function toggleMobileMenu() {
const burger = document.querySelector('.burger');
- const navLinks = document.querySelector('.nav-links');
- const navActions = document.querySelector('.nav-actions');
+ const navMenu = document.querySelector('.nav-menu');
burger.classList.toggle('active');
- if (navLinks) {
- navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
- }
- if (navActions) {
- navActions.style.display = navActions.style.display === 'flex' ? 'none' : 'flex';
+ if (navMenu) {
+ navMenu.classList.toggle('open');
}
}
function closeMobileMenu() {
const burger = document.querySelector('.burger');
- const navLinks = document.querySelector('.nav-links');
- const navActions = document.querySelector('.nav-actions');
+ const navMenu = document.querySelector('.nav-menu');
if (burger && burger.classList.contains('active')) {
burger.classList.remove('active');
}
- if (navLinks) navLinks.style.display = 'none';
- if (navActions) navActions.style.display = 'none';
+ if (navMenu) navMenu.classList.remove('open');
}
// ==================== SCROLL EFFECTS ====================
@@ -172,7 +158,6 @@ document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeMobileMenu();
});
-// Burger menu styles
const style = document.createElement('style');
style.textContent = `
.burger.active span:nth-child(1) {
@@ -184,18 +169,42 @@ style.textContent = `
.burger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
+ .nav-menu {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ flex: 1;
+ justify-content: flex-end;
+ }
@media (max-width: 768px) {
- .nav-links, .nav-actions {
+ .nav-menu {
+ display: none;
position: absolute;
top: 70px;
left: 0;
width: 100%;
- background: white;
+ background: var(--color-surface);
flex-direction: column;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ gap: 1.5rem;
+ border-bottom: 1px solid var(--color-border);
+ align-items: center;
+ }
+ .nav-menu.open {
+ display: flex;
+ }
+ .nav-links {
+ position: static;
+ transform: none;
+ flex-direction: column;
+ align-items: center;
gap: 1rem;
- border-bottom: 1px solid #E5E7EB;
+ }
+ .nav-actions {
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
}
}
`;