Build a Landing Page
🎨 CSSProject: create a modern landing page with hero section, features, and footer using Flexbox.
0/5 completed
Project: Modern Landing Page
Build a landing page for a fictional app called "QuickNote".
Requirements
- Navbar — Flexbox layout, logo on left, nav links on right
- Hero Section — Large heading, subtitle, CTA button, centered
- Features — 3 cards in a Flexbox row
- Footer — Simple footer with copyright
Style Guide
| Element | Color |
|---|---|
| Primary | #5E256D (purple) |
| Background | #f8fafc |
| Card Background | #ffffff |
| Text | #1e293b |
Example
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; box-sizing: border-box; }
body { font-family: "Segoe UI", sans-serif; color: #1e293b; }
.navbar {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 40px; background: #5E256D; color: white;
}
.navbar .logo { font-size: 1.4rem; font-weight: 700; }
.navbar .links { display: flex; gap: 24px; }
.navbar .links a { color: rgba(255,255,255,0.85); text-decoration: none; }
.hero {
text-align: center; padding: 80px 20px;
background: linear-gradient(135deg, #ede9fe, #fdf4ff);
}
.hero h1 { font-size: 2.5rem; color: #5E256D; margin-bottom: 12px; }
.hero p { font-size: 1.1rem; color: #64748b; margin-bottom: 24px; }
.btn {
display: inline-block; padding: 14px 32px;
background: #5E256D; color: white; border-radius: 10px;
text-decoration: none; font-weight: 600;
}
.features {
display: flex; gap: 24px; padding: 60px 40px; max-width: 1000px; margin: 0 auto;
}
.feature {
flex: 1; background: white; border: 1px solid #e2e8f0;
border-radius: 14px; padding: 28px; text-align: center;
}
.feature h3 { color: #5E256D; margin-bottom: 8px; }
footer {
text-align: center; padding: 24px; background: #1e293b;
color: #94a3b8; font-size: 0.85rem;
}
</style>
</head>
<body>
<nav class="navbar">
<span class="logo">QuickNote</span>
<div class="links"><a href="#">Features</a><a href="#">Pricing</a><a href="#">About</a></div>
</nav>
<section class="hero">
<h1>Capture Ideas Instantly</h1>
<p>The fastest way to organize your thoughts.</p>
<a href="#" class="btn">Get Started Free</a>
</section>
<section class="features">
<div class="feature"><h3>⚡ Fast</h3><p>Lightning quick note taking.</p></div>
<div class="feature"><h3>🔒 Secure</h3><p>Your notes are encrypted.</p></div>
<div class="feature"><h3>📱 Mobile</h3><p>Works on all devices.</p></div>
</section>
<footer>© 2025 QuickNote. All rights reserved.</footer>
</body>
</html>
🚀 Project
Build a Landing Page
Project: create a modern landing page with hero section, features, and footer using Flexbox.
Requirements
🚀 Start Project
- 1. Navbar using Flexbox (logo left, links right)
- 2. Hero section with large heading, subtitle and CTA button
- 3. Three feature cards in a Flexbox row
- 4. Footer with copyright
- 5. Use the primary color #5E256D