Complete HTML & CSS Landing Page Project

Project Overview

In this comprehensive tutorial, we'll build a modern, responsive landing page from scratch using HTML and CSS. This project will incorporate all the concepts we've learned: semantic HTML, CSS Grid, Flexbox, responsive design, animations, forms, and accessibility best practices.

Project Planning
Project Structure
HTML Structure
CSS Implementation
Responsive Design
Animations and Interactions
Accessibility Features
Complete Code
Deployment

Project Planning

What We're Building

A modern SaaS (Software as a Service) landing page for a fictional product called "TaskFlow" - a project management tool.

Page Sections

Navigation Bar - Fixed header with logo and menu
Hero Section - Main headline, subheading, CTA button
Features Section - Key product features with icons
How It Works - Step-by-step process
Testimonials - Customer reviews
Pricing - Pricing plans
CTA Section - Call to action
Footer - Links and copyright

Design Goals

Responsive - Works on mobile, tablet, and desktop
Accessible - WCAG compliant
Modern - Clean design with subtle animations
Performance - Optimized images and CSS

Project Structure

landing-page/
│
├── index.html          # Main HTML file
├── css/
│   └── style.css       # All CSS styles
├── js/
│   └── main.js         # JavaScript for interactivity
├── images/
│   ├── hero-bg.jpg
│   ├── feature-1.svg
│   ├── feature-2.svg
│   ├── feature-3.svg
│   └── avatar-placeholder.jpg
└── assets/
└── fonts/          # Custom fonts (if any)

HTML Structure

Complete HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="description" content="TaskFlow - The ultimate project management tool for modern teams">
<title>TaskFlow | Manage Projects Effortlessly</title>
<!-- Preconnect for performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome Icons (free) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation Bar -->
<nav class="navbar" aria-label="Main navigation">
<div class="container nav-container">
<div class="logo">
<a href="#home" aria-label="TaskFlow home">
<i class="fas fa-tasks" aria-hidden="true"></i>
<span>TaskFlow</span>
</a>
</div>
<button class="mobile-menu-btn" aria-label="Toggle menu" aria-expanded="false">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
<ul class="nav-menu" role="list">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#how-it-works" class="nav-link">How It Works</a></li>
<li><a href="#testimonials" class="nav-link">Testimonials</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
<li><a href="#cta" class="nav-link btn-primary btn-small">Get Started</a></li>
</ul>
</div>
</nav>
<main id="main-content">
<!-- Hero Section -->
<section id="home" class="hero" aria-label="Hero section">
<div class="container hero-container">
<div class="hero-content">
<span class="hero-badge">🚀 Launching Soon</span>
<h1 class="hero-title">
Manage Projects <span class="gradient-text">Effortlessly</span>
</h1>
<p class="hero-description">
TaskFlow helps teams organize, track, and manage their work. 
From simple to-do lists to complex project workflows, we've got you covered.
</p>
<div class="hero-buttons">
<a href="#pricing" class="btn btn-primary btn-large">Start Free Trial</a>
<a href="#demo" class="btn btn-outline btn-large">Watch Demo</a>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-number">10k+</span>
<span class="stat-label">Active Users</span>
</div>
<div class="stat">
<span class="stat-number">98%</span>
<span class="stat-label">Satisfaction</span>
</div>
<div class="stat">
<span class="stat-number">24/7</span>
<span class="stat-label">Support</span>
</div>
</div>
</div>
<div class="hero-image">
<img src="https://via.placeholder.com/600x500/4361ee/ffffff?text=TaskFlow+Dashboard" 
alt="TaskFlow dashboard preview showing task management interface"
loading="eager">
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features" aria-label="Features">
<div class="container">
<div class="section-header">
<span class="section-tag">Features</span>
<h2 class="section-title">Everything You Need to Succeed</h2>
<p class="section-description">
Powerful features that help you organize, track, and collaborate on projects.
</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-chart-line" aria-hidden="true"></i>
</div>
<h3 class="feature-title">Analytics Dashboard</h3>
<p class="feature-description">
Get insights into your team's productivity with detailed analytics and reports.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-users" aria-hidden="true"></i>
</div>
<h3 class="feature-title">Team Collaboration</h3>
<p class="feature-description">
Work together seamlessly with real-time updates and team messaging.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-mobile-alt" aria-hidden="true"></i>
</div>
<h3 class="feature-title">Mobile Ready</h3>
<p class="feature-description">
Access your projects on the go with our fully responsive mobile app.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shield-alt" aria-hidden="true"></i>
</div>
<h3 class="feature-title">Enterprise Security</h3>
<p class="feature-description">
Bank-level encryption and security to protect your data.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-clock" aria-hidden="true"></i>
</div>
<h3 class="feature-title">Time Tracking</h3>
<p class="feature-description">
Track time spent on tasks and generate detailed timesheets.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-plug" aria-hidden="true"></i>
</div>
<h3 class="feature-title">Integrations</h3>
<p class="feature-description">
Connect with Slack, GitHub, Google Drive, and 100+ other tools.
</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="how-it-works" aria-label="How it works">
<div class="container">
<div class="section-header">
<span class="section-tag">Simple Process</span>
<h2 class="section-title">Get Started in 3 Easy Steps</h2>
<p class="section-description">
No complex setup. Start managing projects in minutes.
</p>
</div>
<div class="steps-grid">
<div class="step-card">
<div class="step-number">1</div>
<div class="step-icon">
<i class="fas fa-user-plus" aria-hidden="true"></i>
</div>
<h3 class="step-title">Create Account</h3>
<p class="step-description">
Sign up for free and set up your workspace in seconds.
</p>
</div>
<div class="step-card">
<div class="step-number">2</div>
<div class="step-icon">
<i class="fas fa-folder-open" aria-hidden="true"></i>
</div>
<h3 class="step-title">Create Project</h3>
<p class="step-description">
Add your first project and invite team members to collaborate.
</p>
</div>
<div class="step-card">
<div class="step-number">3</div>
<div class="step-icon">
<i class="fas fa-check-circle" aria-hidden="true"></i>
</div>
<h3 class="step-title">Start Working</h3>
<p class="step-description">
Create tasks, assign them, and track progress in real-time.
</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials" aria-label="Customer testimonials">
<div class="container">
<div class="section-header">
<span class="section-tag">Testimonials</span>
<h2 class="section-title">Loved by Teams Worldwide</h2>
<p class="section-description">
See what our customers have to say about TaskFlow.
</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-rating">
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
</div>
<p class="testimonial-text">
"TaskFlow has completely transformed how our team works. We're more productive and organized than ever before!"
</p>
<div class="testimonial-author">
<img src="https://via.placeholder.com/50x50/4361ee/ffffff?text=JD" 
alt="John Doe avatar" 
class="author-avatar">
<div class="author-info">
<strong>John Doe</strong>
<span>CEO, TechStart</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-rating">
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
</div>
<p class="testimonial-text">
"The best project management tool we've ever used. The interface is intuitive and the features are powerful."
</p>
<div class="testimonial-author">
<img src="https://via.placeholder.com/50x50/2ecc71/ffffff?text=JS" 
alt="Jane Smith avatar" 
class="author-avatar">
<div class="author-info">
<strong>Jane Smith</strong>
<span>Product Manager, InnovateCo</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-rating">
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star" aria-hidden="true"></i>
<i class="fas fa-star-half-alt" aria-hidden="true"></i>
</div>
<p class="testimonial-text">
"Excellent customer support and continuous updates. TaskFlow keeps getting better every month!"
</p>
<div class="testimonial-author">
<img src="https://via.placeholder.com/50x50/e74c3c/ffffff?text=MW" 
alt="Mike Wilson avatar" 
class="author-avatar">
<div class="author-info">
<strong>Mike Wilson</strong>
<span>Project Lead, DesignHub</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="pricing" aria-label="Pricing plans">
<div class="container">
<div class="section-header">
<span class="section-tag">Pricing</span>
<h2 class="section-title">Simple, Transparent Pricing</h2>
<p class="section-description">
Choose the plan that works best for your team. All plans include a 14-day free trial.
</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3 class="plan-name">Free</h3>
<div class="plan-price">
<span class="currency">$</span>
<span class="amount">0</span>
<span class="period">/month</span>
</div>
<p class="plan-description">Perfect for individuals and small teams</p>
<ul class="plan-features">
<li><i class="fas fa-check" aria-hidden="true"></i> Up to 5 projects</li>
<li><i class="fas fa-check" aria-hidden="true"></i> 10 team members</li>
<li><i class="fas fa-check" aria-hidden="true"></i> 2GB storage</li>
<li><i class="fas fa-check" aria-hidden="true"></i> Basic analytics</li>
<li><i class="fas fa-times" aria-hidden="true"></i> Priority support</li>
</ul>
<a href="#" class="btn btn-outline btn-block">Get Started</a>
</div>
<div class="pricing-card featured">
<div class="popular-badge">Most Popular</div>
<h3 class="plan-name">Pro</h3>
<div class="plan-price">
<span class="currency">$</span>
<span class="amount">19</span>
<span class="period">/month</span>
</div>
<p class="plan-description">Perfect for growing teams</p>
<ul class="plan-features">
<li><i class="fas fa-check" aria-hidden="true"></i> Unlimited projects</li>
<li><i class="fas fa-check" aria-hidden="true"></i> Unlimited team members</li>
<li><i class="fas fa-check" aria-hidden="true"></i> 50GB storage</li>
<li><i class="fas fa-check" aria-hidden="true"></i> Advanced analytics</li>
<li><i class="fas fa-check" aria-hidden="true"></i> Priority support</li>
</ul>
<a href="#" class="btn btn-primary btn-block">Start Free Trial</a>
</div>
<div class="pricing-card">
<h3 class="plan-name">Enterprise</h3>
<div class="plan-price">
<span class="currency">$</span>
<span class="amount">49</span>
<span class="period">/month</span>
</div>
<p class="plan-description">For large organizations</p>
<ul class="plan-features">
<li><i class="fas fa-check" aria-hidden="true"></i> Unlimited projects</li>
<li><i class="fas fa-check" aria-hidden="true"></i> Unlimited team members</li>
<li><i class="fas fa-check" aria-hidden="true"></i> 500GB storage</li>
<li><i class="fas fa-check" aria-hidden="true"></i> Custom analytics</li>
<li><i class="fas fa-check" aria-hidden="true"></i> 24/7 dedicated support</li>
</ul>
<a href="#" class="btn btn-outline btn-block">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="cta" aria-label="Call to action">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">Ready to Boost Your Productivity?</h2>
<p class="cta-description">
Join thousands of teams already using TaskFlow to manage their work.
</p>
<form class="cta-form" action="#" method="post">
<div class="form-group">
<label for="cta-email" class="sr-only">Email address</label>
<input type="email" id="cta-email" placeholder="Enter your email" required>
<button type="submit" class="btn btn-primary">Start Free Trial</button>
</div>
<p class="form-note">No credit card required. Free for 14 days.</p>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo">
<i class="fas fa-tasks" aria-hidden="true"></i>
<span>TaskFlow</span>
</div>
<p>Making project management simple and effective.</p>
<div class="social-links">
<a href="#" aria-label="Follow us on Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Follow us on LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="#" aria-label="Follow us on GitHub"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="footer-links">
<h4>Product</h4>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#">Integrations</a></li>
<li><a href="#">Roadmap</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Company</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Support</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 TaskFlow. All rights reserved.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/main.js"></script>
</body>
</html>

CSS Implementation

Complete CSS Code (css/style.css)

/* ============================================
CSS Variables & Reset
============================================ */
:root {
/* Colors */
--primary: #4361ee;
--primary-dark: #3a56d4;
--primary-light: #e0e7ff;
--secondary: #2ecc71;
--secondary-dark: #27ae60;
--accent: #f39c12;
--danger: #e74c3c;
--dark: #1a2c3e;
--dark-light: #2c3e50;
--gray: #6c757d;
--gray-light: #e9ecef;
--gray-lighter: #f8f9fa;
--white: #ffffff;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 6rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Transitions */
--transition-fast: 150ms;
--transition-base: 300ms;
--transition-slow: 500ms;
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-family);
color: var(--dark);
line-height: 1.5;
overflow-x: hidden;
background: var(--white);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--spacing-md);
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
p {
margin-bottom: var(--spacing-md);
color: var(--gray);
}
a {
text-decoration: none;
color: var(--primary);
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
img {
max-width: 100%;
height: auto;
}
/* Utility Classes */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-xl);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-xl);
font-weight: 600;
border-radius: var(--radius-md);
transition: all var(--transition-base);
cursor: pointer;
text-decoration: none;
border: 2px solid transparent;
font-size: var(--font-size-base);
}
.btn-primary {
background: var(--primary);
color: var(--white);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
border-color: var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
}
.btn-large {
padding: var(--spacing-md) var(--spacing-2xl);
font-size: var(--font-size-lg);
}
.btn-small {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
}
.btn-block {
width: 100%;
justify-content: center;
}
/* Section Header */
.section-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-3xl);
}
.section-tag {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary);
background: var(--primary-light);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
margin-bottom: var(--spacing-md);
}
.section-title {
margin-bottom: var(--spacing-md);
}
.section-description {
font-size: var(--font-size-lg);
max-width: 600px;
margin: 0 auto;
}
/* ============================================
Navigation
============================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--white);
box-shadow: var(--shadow-sm);
z-index: 1000;
padding: var(--spacing-md) 0;
transition: all var(--transition-base);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-xl);
font-weight: 800;
color: var(--dark);
}
.logo i {
color: var(--primary);
font-size: 1.5rem;
}
.nav-menu {
display: flex;
gap: var(--spacing-lg);
list-style: none;
align-items: center;
}
.nav-link {
color: var(--dark);
font-weight: 500;
transition: color var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
color: var(--primary);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--dark);
}
/* ============================================
Hero Section
============================================ */
.hero {
padding: calc(80px + var(--spacing-4xl)) 0 var(--spacing-4xl);
background: linear-gradient(135deg, var(--white) 0%, var(--gray-lighter) 100%);
}
.hero-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
}
.hero-badge {
display: inline-block;
background: var(--primary-light);
color: var(--primary);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.hero-title {
margin-bottom: var(--spacing-md);
}
.gradient-text {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-description {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
}
.hero-buttons {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-2xl);
}
.hero-stats {
display: flex;
gap: var(--spacing-2xl);
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--dark);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--gray);
}
.hero-image img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}
/* ============================================
Features Section
============================================ */
.features {
padding: var(--spacing-4xl) 0;
background: var(--white);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-2xl);
}
.feature-card {
text-align: center;
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
border: 1px solid var(--gray-light);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.feature-icon {
width: 70px;
height: 70px;
background: var(--primary-light);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
}
.feature-icon i {
font-size: 2rem;
color: var(--primary);
}
.feature-title {
margin-bottom: var(--spacing-sm);
}
.feature-description {
color: var(--gray);
}
/* ============================================
How It Works Section
============================================ */
.how-it-works {
padding: var(--spacing-4xl) 0;
background: var(--gray-lighter);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-2xl);
text-align: center;
}
.step-card {
position: relative;
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base);
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: var(--primary);
color: var(--white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
}
.step-icon {
font-size: 3rem;
color: var(--primary);
margin-bottom: var(--spacing-md);
}
.step-title {
margin-bottom: var(--spacing-sm);
}
.step-description {
color: var(--gray);
}
/* ============================================
Testimonials Section
============================================ */
.testimonials {
padding: var(--spacing-4xl) 0;
background: var(--white);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
}
.testimonial-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
border: 1px solid var(--gray-light);
transition: all var(--transition-base);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.testimonial-rating {
margin-bottom: var(--spacing-md);
color: var(--accent);
}
.testimonial-text {
font-style: italic;
margin-bottom: var(--spacing-lg);
color: var(--dark);
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: var(--radius-full);
object-fit: cover;
}
.author-info strong {
display: block;
color: var(--dark);
}
.author-info span {
font-size: var(--font-size-sm);
color: var(--gray);
}
/* ============================================
Pricing Section
============================================ */
.pricing {
padding: var(--spacing-4xl) 0;
background: var(--gray-lighter);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-2xl);
align-items: stretch;
}
.pricing-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
text-align: center;
position: relative;
transition: all var(--transition-base);
border: 1px solid var(--gray-light);
}
.pricing-card.featured {
transform: scale(1.05);
border-color: var(--primary);
box-shadow: var(--shadow-lg);
z-index: 1;
}
.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--white);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
white-space: nowrap;
}
.plan-name {
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-md);
}
.plan-price {
margin-bottom: var(--spacing-md);
}
.currency {
font-size: var(--font-size-xl);
vertical-align: top;
line-height: 1.5;
}
.amount {
font-size: var(--font-size-5xl);
font-weight: 800;
}
.period {
font-size: var(--font-size-base);
color: var(--gray);
}
.plan-description {
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-sm);
}
.plan-features {
list-style: none;
margin-bottom: var(--spacing-xl);
}
.plan-features li {
padding: var(--spacing-xs) 0;
color: var(--gray);
}
.plan-features i {
margin-right: var(--spacing-sm);
}
.plan-features i.fa-check {
color: var(--secondary);
}
.plan-features i.fa-times {
color: var(--danger);
}
/* ============================================
CTA Section
============================================ */
.cta {
padding: var(--spacing-4xl) 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
text-align: center;
}
.cta-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-md);
color: var(--white);
}
.cta-description {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
color: rgba(255, 255, 255, 0.9);
}
.cta-form .form-group {
display: flex;
gap: var(--spacing-md);
max-width: 500px;
margin: 0 auto var(--spacing-md);
}
.cta-form input {
flex: 1;
padding: var(--spacing-md) var(--spacing-lg);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
outline: none;
}
.cta-form input:focus {
outline: 2px solid var(--secondary);
}
.form-note {
font-size: var(--font-size-sm);
opacity: 0.8;
}
/* ============================================
Footer
============================================ */
.footer {
background: var(--dark);
color: var(--white);
padding: var(--spacing-3xl) 0 var(--spacing-xl);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.footer-brand .logo a {
color: var(--white);
margin-bottom: var(--spacing-md);
display: inline-flex;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--spacing-md);
}
.social-links {
display: flex;
gap: var(--spacing-md);
}
.social-links a {
color: rgba(255, 255, 255, 0.7);
font-size: 1.25rem;
transition: color var(--transition-fast);
}
.social-links a:hover {
color: var(--white);
}
.footer-links h4 {
color: var(--white);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-lg);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: var(--spacing-sm);
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--transition-fast);
}
.footer-links a:hover {
color: var(--white);
}
.footer-bottom {
text-align: center;
padding-top: var(--spacing-xl);
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
font-size: var(--font-size-sm);
}
/* ============================================
Responsive Design
============================================ */
@media (max-width: 1024px) {
:root {
--font-size-5xl: 2.5rem;
--font-size-4xl: 2rem;
--spacing-4xl: 4rem;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.hero-image {
max-width: 500px;
margin: 0 auto;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
:root {
--font-size-5xl: 2rem;
--font-size-4xl: 1.75rem;
--spacing-4xl: 3rem;
--spacing-3xl: 2rem;
}
.container {
padding: 0 var(--spacing-md);
}
/* Mobile Navigation */
.mobile-menu-btn {
display: block;
}
.nav-menu {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background: var(--white);
flex-direction: column;
padding: var(--spacing-xl);
transition: left var(--transition-base);
box-shadow: var(--shadow-lg);
}
.nav-menu.active {
left: 0;
}
.hero-buttons {
flex-direction: column;
}
.hero-stats {
flex-wrap: wrap;
}
.pricing-card.featured {
transform: scale(1);
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.social-links {
justify-content: center;
}
.cta-form .form-group {
flex-direction: column;
}
.cta-form button {
width: 100%;
}
}
/* ============================================
Animations
============================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content {
animation: fadeInUp 0.8s ease-out;
}
.feature-card {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }
.feature-card:nth-child(5) { animation-delay: 0.5s; }
.feature-card:nth-child(6) { animation-delay: 0.6s; }
.step-card {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
.step-card:nth-child(1) { animation-delay: 0.1s; }
.step-card:nth-child(2) { animation-delay: 0.2s; }
.step-card:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
.pricing-card {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }

JavaScript for Interactivity

Complete JavaScript Code (js/main.js)

// ============================================
// Mobile Menu Toggle
// ============================================
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navMenu = document.querySelector('.nav-menu');
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
navMenu.classList.toggle('active');
});
}
// Close menu when clicking outside
document.addEventListener('click', function(event) {
if (navMenu && navMenu.classList.contains('active')) {
if (!navMenu.contains(event.target) && !mobileMenuBtn.contains(event.target)) {
navMenu.classList.remove('active');
mobileMenuBtn.setAttribute('aria-expanded', 'false');
}
}
});
// Close menu when clicking a link
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', () => {
if (navMenu.classList.contains('active')) {
navMenu.classList.remove('active');
mobileMenuBtn.setAttribute('aria-expanded', 'false');
}
});
});
});
// ============================================
// Active Link on Scroll
// ============================================
const sections = document.querySelectorAll('section[id]');
const navLinksActive = document.querySelectorAll('.nav-link');
function updateActiveLink() {
const scrollPosition = window.scrollY + 100;
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionBottom = sectionTop + section.offsetHeight;
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
const currentId = section.getAttribute('id');
navLinksActive.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${currentId}`) {
link.classList.add('active');
}
});
}
});
}
window.addEventListener('scroll', updateActiveLink);
window.addEventListener('load', updateActiveLink);
// ============================================
// Navbar Background Change on Scroll
// ============================================
const navbar = document.querySelector('.navbar');
function updateNavbarBackground() {
if (window.scrollY > 50) {
navbar.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
} else {
navbar.style.boxShadow = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';
navbar.style.background = 'rgba(255, 255, 255, 1)';
}
}
window.addEventListener('scroll', updateNavbarBackground);
updateNavbarBackground();
// ============================================
// Smooth Scroll for Anchor Links
// ============================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId !== '#' && targetId !== '#home' && targetId !== '') {
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
});
// ============================================
// CTA Form Validation
// ============================================
const ctaForm = document.querySelector('.cta-form');
if (ctaForm) {
ctaForm.addEventListener('submit', function(e) {
e.preventDefault();
const emailInput = this.querySelector('input[type="email"]');
const email = emailInput.value.trim();
if (!email) {
showMessage('Please enter your email address', 'error');
emailInput.focus();
return;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showMessage('Please enter a valid email address', 'error');
emailInput.focus();
return;
}
// Simulate form submission
const submitBtn = this.querySelector('button');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Sending...';
submitBtn.disabled = true;
setTimeout(() => {
showMessage('Thank you! Check your email to get started.', 'success');
emailInput.value = '';
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}, 1500);
});
}
// Message helper
function showMessage(message, type) {
const existingMessage = document.querySelector('.form-message');
if (existingMessage) {
existingMessage.remove();
}
const messageDiv = document.createElement('div');
messageDiv.className = `form-message ${type}`;
messageDiv.textContent = message;
messageDiv.style.cssText = `
margin-top: 1rem;
padding: 0.75rem;
border-radius: 0.5rem;
font-size: 0.875rem;
text-align: center;
${type === 'error' ? 'background: #fee2e2; color: #dc2626;' : 'background: #d1fae5; color: #065f46;'}
`;
const ctaForm = document.querySelector('.cta-form');
ctaForm.appendChild(messageDiv);
setTimeout(() => {
messageDiv.remove();
}, 5000);
}
// ============================================
// Intersection Observer for Animations
// ============================================
const animateElements = document.querySelectorAll('.feature-card, .step-card, .testimonial-card, .pricing-card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1, rootMargin: '50px' });
animateElements.forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(element);
});
// ============================================
// Header Image Lazy Loading (optional)
// ============================================
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));

Deployment

How to Deploy Your Landing Page

Local Testing

   # Navigate to your project folder
cd landing-page
# Use a local server (Python 3)
python -m http.server 8000
# Or use Live Server in VS Code

Hosting Options

GitHub Pages (free): Push to GitHub and enable Pages
Netlify (free): Drag and drop your folder
Vercel (free): Connect your Git repository
Cloudflare Pages (free): Easy deployment

Optimization Checklist

[ ] Compress images (use tools like TinyPNG)
[ ] Minify CSS and JS
[ ] Add proper meta tags
[ ] Test on multiple browsers
[ ] Validate HTML and CSS
[ ] Test accessibility
[ ] Check performance (Lighthouse)

Conclusion

Congratulations! You've built a complete, modern, responsive landing page with:

Features Implemented

✅ Semantic HTML5 structure
✅ CSS Grid and Flexbox layouts
✅ Responsive design for all devices
✅ Mobile-first navigation
✅ CSS animations and transitions
✅ Accessible components
✅ Form validation
✅ Smooth scrolling
✅ Active link highlighting
✅ Interactive elements

Skills Practiced

HTML structure and semantics
CSS styling and layout
Responsive design principles
JavaScript interactivity
Accessibility best practices
Performance optimization
Cross-browser compatibility

Next Steps

Customize the content and colors to match your brand
Replace placeholder images with real assets
Add real functionality with a backend (optional)
Optimize for SEO with meta tags and structured data
Deploy your site to share with the world!

This landing page project demonstrates all the key concepts of modern web development. You can use it as a template for your own projects or continue enhancing it with more advanced features like animations, dark mode, or CMS integration.

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/