DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Hero Landing Page - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Hero Landing Page
rohit
Feb 13, 2026
4
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<!-- Navbar --> <nav> <div class="nav-logo">Vel<span>ox</span></div> <ul class="nav-links"> <li><a href="#">Product</a></li> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Blog</a></li> </ul> <a href="#" class="nav-cta">Get Started</a> </nav> <!-- Hero --> <section class="hero"> <!-- Background --> <div class="hero-bg"> <div class="orb orb-1"></div> <div class="orb orb-2"></div> <div class="orb orb-3"></div> <div class="hero-grid"></div> </div> <!-- Floating shapes --> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div> <div class="shape shape-5"></div> <div class="shape shape-6"></div> <!-- Content --> <div class="hero-inner"> <div class="badge"> <div class="badge-dot">🚀</div> <span class="badge-text">Now in Public Beta</span> </div> <h1 class="hero-title"> Build Faster.<br> <span class="line-accent">Ship Smarter.</span><br> Grow Bigger. </h1> <p class="hero-sub"> The all-in-one platform that helps modern teams design, build, and launch products at lightning speed — without the chaos. </p> <div class="cta-row"> <a href="#" class="btn-primary"> Start for Free <span class="arrow">→</span> </a> <a href="#" class="btn-ghost"> ▶ Watch Demo </a> </div> <!-- Social proof --> <div class="proof-row"> <div class="avatars"> <div class="av av-1"></div> <div class="av av-2"></div> <div class="av av-3"></div> <div class="av av-4"></div> <div class="av av-5">+2k</div> </div> <span class="proof-text">Loved by <strong>2,000+</strong> teams worldwide</span> <div class="proof-divider"></div> <div> <div class="stars">★★★★★</div> <div class="rating-text"><strong>4.9</strong> / 5 rating</div> </div> </div> </div> <!-- Scroll hint --> <div class="scroll-hint"> <span class="scroll-label">Scroll</span> <div class="scroll-line"></div> </div> <!-- Marquee --> <div class="marquee-wrap"> <div class="marquee-track"> <span class="marquee-item">Design System</span> <span class="marquee-item">Component Library</span> <span class="marquee-item">Analytics Dashboard</span> <span class="marquee-item">Team Collaboration</span> <span class="marquee-item">One-click Deploy</span> <span class="marquee-item">Custom Domains</span> <span class="marquee-item">99.9% Uptime</span> <span class="marquee-item">Design System</span> <span class="marquee-item">Component Library</span> <span class="marquee-item">Analytics Dashboard</span> <span class="marquee-item">Team Collaboration</span> <span class="marquee-item">One-click Deploy</span> <span class="marquee-item">Custom Domains</span> <span class="marquee-item">99.9% Uptime</span> </div> </div> </section>
1
:root { --bg: #05050a; --accent: #ff6b35; --lime: #d4f53c; --blue: #3c8ef5; --text: #f0eee8; --muted: #6b6878; --border: rgba(255,255,255,0.07); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); font-family: 'Satoshi', 'DM Sans', sans-serif; color: var(--text); min-height: 100vh; overflow-x: hidden; } /* ══════════════════════════════ NAVBAR ══════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 22px 56px; border-bottom: 1px solid var(--border); background: rgba(5,5,10,0.6); backdrop-filter: blur(16px); } .nav-logo { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; } .nav-logo span { color: var(--accent); } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { font-size: 13px; font-weight: 400; letter-spacing: 0.05em; color: var(--muted); text-decoration: none; transition: color 0.25s; } .nav-links a:hover { color: var(--text); } .nav-cta { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; background: var(--accent); color: #fff; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; box-shadow: 0 0 0 rgba(255,107,53,0); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,53,0.45); } /* ══════════════════════════════ HERO ══════════════════════════════ */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 140px 56px 80px; overflow: hidden; } /* ── Animated background mesh ── */ .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Big slow rotating gradient orbs */ .orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: orbFloat linear infinite; } .orb-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(255,107,53,0.18), transparent 65%); top: -200px; left: -200px; animation-duration: 20s; } .orb-2 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(60,142,245,0.14), transparent 65%); bottom: -150px; right: -150px; animation-duration: 25s; animation-direction: reverse; } .orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(212,245,60,0.1), transparent 65%); top: 50%; left: 55%; animation-duration: 18s; } @keyframes orbFloat { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.05); } 66% { transform: translate(-20px,40px) scale(0.97); } } /* Grid lines */ .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%); } /* Floating geometric shapes — pure CSS */ .shape { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); animation: shapeFloat ease-in-out infinite; } .shape-1 { width: 80px; height: 80px; top: 18%; left: 8%; border-color: rgba(255,107,53,0.25); animation-duration: 7s; } .shape-2 { width: 40px; height: 40px; top: 30%; right: 12%; border-radius: 8px; border-color: rgba(212,245,60,0.3); animation-duration: 9s; animation-delay: -3s; transform: rotate(20deg); } .shape-3 { width: 120px; height: 120px; bottom: 22%; left: 6%; border-color: rgba(60,142,245,0.2); animation-duration: 11s; animation-delay: -5s; } .shape-4 { width: 56px; height: 56px; bottom: 28%; right: 9%; border-radius: 12px; border-color: rgba(255,107,53,0.2); animation-duration: 8s; animation-delay: -2s; transform: rotate(-15deg); } .shape-5 { width: 20px; height: 20px; top: 55%; left: 15%; background: rgba(212,245,60,0.15); border: none; border-radius: 4px; animation-duration: 6s; animation-delay: -4s; } .shape-6 { width: 14px; height: 14px; top: 40%; right: 22%; background: rgba(255,107,53,0.25); border: none; animation-duration: 5s; animation-delay: -1s; } @keyframes shapeFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(8deg); } } /* ── Hero content ── */ .hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 960px; gap: 0; } /* Eyebrow badge */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border-radius: 100px; background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.25); margin-bottom: 32px; animation: fadeUp 0.8s ease both; } .badge-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; } .badge-text { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,107,53,0.9); } /* Main headline */ .hero-title { font-family: 'Fraunces', serif; font-size: clamp(52px, 8.5vw, 110px); font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; color: var(--text); margin-bottom: 30px; animation: fadeUp 0.8s ease 0.1s both; } .hero-title .line-accent { font-style: italic; /* Gradient text */ background: linear-gradient(135deg, var(--accent) 0%, #ff9a5c 60%, var(--lime) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Shimmer animation */ background-size: 200% auto; animation: shimmer 4s linear infinite, fadeUp 0.8s ease 0.1s both; } @keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* Sub text */ .hero-sub { font-size: clamp(15px, 2vw, 19px); color: var(--muted); max-width: 520px; line-height: 1.75; font-weight: 300; margin-bottom: 48px; animation: fadeUp 0.8s ease 0.2s both; } /* CTA row */ .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.8s ease 0.3s both; margin-bottom: 72px; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; padding: 16px 36px; border-radius: 100px; background: var(--accent); color: #fff; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 24px rgba(255,107,53,0.35); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(255,107,53,0.5); } .btn-primary .arrow { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 13px; transition: transform 0.3s; } .btn-primary:hover .arrow { transform: translate(3px,-3px); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; padding: 16px 32px; border-radius: 100px; border: 1px solid var(--border); color: var(--muted); text-decoration: none; transition: border-color 0.3s, color 0.3s; } .btn-ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--text); } /* Social proof row */ .proof-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.8s ease 0.4s both; } .avatars { display: flex; } .av { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bg); overflow: hidden; margin-left: -10px; background: var(--card); font-size: 16px; display: flex; align-items: center; justify-content: center; } .av:first-child { margin-left: 0; } .av-1 { background: linear-gradient(135deg,#ff6b35,#ff9a5c); } .av-2 { background: linear-gradient(135deg,#3c8ef5,#6ab0ff); } .av-3 { background: linear-gradient(135deg,#d4f53c,#a8c91e); } .av-4 { background: linear-gradient(135deg,#b06bff,#d4a0ff); } .av-5 { background: rgba(255,255,255,0.1); font-size:11px; color:var(--muted); } .proof-text { font-size: 13px; color: var(--muted); font-weight: 300; } .proof-text strong { color: var(--text); font-weight: 500; } .proof-divider { width: 1px; height: 28px; background: var(--border); } .stars { color: #fbbf24; font-size: 14px; letter-spacing: 1px; } .rating-text { font-size: 13px; color: var(--muted); } .rating-text strong { color: var(--text); } /* ── Scroll indicator — pure CSS ── */ .scroll-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; animation: fadeUp 1s ease 0.8s both; } .scroll-label { font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--muted); } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--muted), transparent); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0%,100% { transform: scaleY(1); transform-origin: top; opacity: 1; } 50% { transform: scaleY(0.4); opacity: 0.4; } } /* ── Marquee strip at bottom ── */ .marquee-wrap { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; border-top: 1px solid var(--border); background: rgba(255,255,255,0.015); padding: 12px 0; z-index: 2; } .marquee-track { display: flex; gap: 48px; white-space: nowrap; animation: marquee 20s linear infinite; width: max-content; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-item { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 16px; } .marquee-item::after { content: '✦'; color: var(--accent); font-size: 8px; } /* Fade up keyframe */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── Responsive ── */ @media (max-width: 768px) { nav { padding: 18px 24px; } .nav-links { display: none; } .hero { padding: 120px 24px 80px; } .cta-row { flex-direction: column; align-items: center; } .proof-divider { display: none; } .shape-3, .shape-4 { display: none; } }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!