-
Landing Page usng HTML CSS
HTML
CSS
JavaScript
NILESH
.
Products
Solutions
Pricing
Get Started
Experience Seamless UI.
Keep scrolling to watch the navigation bar transform.
/* Modern UI Variables */ :root { --primary: #6366f1; --text-dark: #1e293b; --text-light: #ffffff; --nav-bg: rgba(227, 189, 189, 0.7); --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, sans-serif; } body { height: 250vh; /* Scroll space */ background: #f8fafc; color: var(--text-dark); } /* --- THE NAVIGATION --- */ nav { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 32px 5%; /* Starts tall and airy */ z-index: 1000; /* The Scroll Animation Magic */ animation: nav-morph linear forwards; animation-timeline: scroll(); animation-range: 0px 150px; } @keyframes nav-morph { to { padding: 16px 10%; background: var(--nav-bg); backdrop-filter: blur(12px); /* Frosted glass effect */ -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); } } /* Logo Styling */ .logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -1px; color: var(--primary); cursor: pointer; } /* Menu Links */ .nav-links { display: flex; gap: 40px; list-style: none; } .nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 0.95rem; transition: var(--transition); position: relative; } /* Modern Hover Underline */ .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0%; height: 2px; background: var(--primary); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { color: var(--primary); } /* "Get Started" Button (UI Polish) */ .cta-btn { background: var(--primary); color: white !important; padding: 10px 24px; border-radius: 50px; font-weight: 600 !important; box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.39); } /* Content Placeholder */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle at top right, #eef2ff, #f8fafc); text-align: center; padding: 20px; } .hero h1 { font-size: 2.5rem; margin-bottom: 20px; background: linear-gradient(to right, #4f46e5, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Live Preview