Landing Page Project
Create a high-converting product landing page with features, pricing, and call-to-action sections.
📋 Project Overview
- Objective: Build a product landing page
- Sections: Hero, Features, Pricing, Testimonials, CTA
- Features: Video embed, pricing tables, forms
- Focus: Conversion optimization
💻 Complete Landing Page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CloudSync - The best cloud storage solution">
<title>CloudSync - Secure Cloud Storage</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
/* Header */
header {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #4a90e2;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
}
nav a {
text-decoration: none;
color: #333;
transition: color 0.3s;
}
nav a:hover {
color: #4a90e2;
}
.btn {
display: inline-block;
padding: 0.8rem 2rem;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s;
}
.btn-primary {
background: #4a90e2;
color: white;
}
.btn-primary:hover {
background: #357abd;
transform: translateY(-2px);
}
.btn-secondary {
background: white;
color: #4a90e2;
border: 2px solid #4a90e2;
}
.btn-secondary:hover {
background: #4a90e2;
color: white;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 6rem 2rem;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Features Section */
.features {
padding: 5rem 2rem;
background: #f8f9fa;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #2c3e50;
}
.features-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #4a90e2;
}
/* Video Section */
.video-section {
padding: 5rem 2rem;
background: white;
}
.video-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
margin-top: 2rem;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Pricing Section */
.pricing {
padding: 5rem 2rem;
background: #f8f9fa;
}
.pricing-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.pricing-card {
background: white;
border-radius: 10px;
padding: 2rem;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.pricing-card:hover {
transform: scale(1.05);
}
.pricing-card.featured {
border: 3px solid #4a90e2;
transform: scale(1.05);
}
.plan-name {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.plan-price {
font-size: 3rem;
font-weight: bold;
color: #4a90e2;
margin-bottom: 0.5rem;
}
.plan-period {
color: #7f8c8d;
margin-bottom: 2rem;
}
.plan-features {
list-style: none;
margin-bottom: 2rem;
text-align: left;
}
.plan-features li {
padding: 0.5rem 0;
border-bottom: 1px solid #ecf0f1;
}
.plan-features li:before {
content: "✓ ";
color: #27ae60;
font-weight: bold;
margin-right: 0.5rem;
}
/* Testimonials */
.testimonials {
padding: 5rem 2rem;
background: white;
}
.testimonials-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.testimonial-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
position: relative;
}
.quote-icon {
font-size: 3rem;
color: #4a90e2;
opacity: 0.3;
position: absolute;
top: 10px;
left: 10px;
}
.testimonial-text {
font-style: italic;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.testimonial-author {
font-weight: bold;
color: #2c3e50;
}
.testimonial-role {
color: #7f8c8d;
font-size: 0.9rem;
}
/* CTA Section */
.cta {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 5rem 2rem;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.signup-form {
max-width: 500px;
margin: 0 auto;
display: flex;
gap: 1rem;
}
.signup-form input {
flex: 1;
padding: 1rem;
border: none;
border-radius: 5px;
font-size: 1rem;
}
.signup-form button {
padding: 1rem 2rem;
background: white;
color: #667eea;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s;
}
.signup-form button:hover {
transform: translateY(-2px);
}
/* Footer */
footer {
background: #2c3e50;
color: white;
padding: 3rem 2rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.footer-section h4 {
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section a {
color: #bdc3c7;
text-decoration: none;
display: block;
margin-bottom: 0.5rem;
transition: color 0.3s;
}
.footer-section a:hover {
color: white;
}
.footer-bottom {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #34495e;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<div class="logo">☁️ CloudSync</div>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#testimonials">Reviews</a></li>
<li><a href="#cta" class="btn btn-primary">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Secure Cloud Storage Made Simple</h1>
<p>Store, sync, and share your files with confidence. Access your data anywhere, anytime.</p>
<div class="hero-buttons">
<a href="#cta" class="btn btn-primary">Start Free Trial</a>
<a href="#features" class="btn btn-secondary">Learn More</a>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<h2 class="section-title">Why Choose CloudSync?</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Bank-Level Security</h3>
<p>Your files are encrypted with 256-bit AES encryption, ensuring maximum security.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Lightning Fast</h3>
<p>Upload and download files at incredible speeds with our global CDN network.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Access Anywhere</h3>
<p>Available on all devices - desktop, mobile, and web. Your files, everywhere.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤝</div>
<h3>Easy Collaboration</h3>
<p>Share files and folders with team members and control access permissions.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<h3>Auto Sync</h3>
<p>Automatic synchronization keeps your files up-to-date across all devices.</p>
</div>
<div class="feature-card">
<div class="feature-icon">💾</div>
<h3>Version History</h3>
<p>Restore previous versions of your files with 30-day version history.</p>
</div>
</div>
</section>
<!-- Video Section -->
<section class="video-section">
<div class="video-container">
<h2 class="section-title">See CloudSync in Action</h2>
<p>Watch how easy it is to get started with CloudSync</p>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="CloudSync Demo Video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="pricing">
<h2 class="section-title">Choose Your Plan</h2>
<div class="pricing-grid">
<div class="pricing-card">
<h3 class="plan-name">Basic</h3>
<div class="plan-price">$9</div>
<div class="plan-period">per month</div>
<ul class="plan-features">
<li>100 GB Storage</li>
<li>2 GB File Upload Limit</li>
<li>Basic Support</li>
<li>Web Access</li>
</ul>
<a href="#cta" class="btn btn-secondary">Get Started</a>
</div>
<div class="pricing-card featured">
<h3 class="plan-name">Pro</h3>
<div class="plan-price">$19</div>
<div class="plan-period">per month</div>
<ul class="plan-features">
<li>1 TB Storage</li>
<li>10 GB File Upload Limit</li>
<li>Priority Support</li>
<li>All Platform Access</li>
<li>Advanced Sharing</li>
</ul>
<a href="#cta" class="btn btn-primary">Get Started</a>
</div>
<div class="pricing-card">
<h3 class="plan-name">Business</h3>
<div class="plan-price">$49</div>
<div class="plan-period">per month</div>
<ul class="plan-features">
<li>Unlimited Storage</li>
<li>Unlimited Upload</li>
<li>24/7 Support</li>
<li>Team Collaboration</li>
<li>Advanced Admin Controls</li>
<li>API Access</li>
</ul>
<a href="#cta" class="btn btn-secondary">Get Started</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="testimonials">
<h2 class="section-title">What Our Customers Say</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="quote-icon">"</div>
<p class="testimonial-text">CloudSync has transformed how our team collaborates. The sync is seamless and the security gives us peace of mind.</p>
<div class="testimonial-author">Sarah Johnson</div>
<div class="testimonial-role">CEO, TechStart Inc.</div>
</div>
<div class="testimonial-card">
<div class="quote-icon">"</div>
<p class="testimonial-text">Best cloud storage I've used. Fast, reliable, and the mobile app is fantastic. Highly recommended!</p>
<div class="testimonial-author">Michael Chen</div>
<div class="testimonial-role">Freelance Designer</div>
</div>
<div class="testimonial-card">
<div class="quote-icon">"</div>
<p class="testimonial-text">Switched from our old provider and couldn't be happier. The pricing is fair and features are excellent.</p>
<div class="testimonial-author">Emily Rodriguez</div>
<div class="testimonial-role">Marketing Director</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="cta">
<h2>Ready to Get Started?</h2>
<p>Join thousands of satisfied users. Start your 14-day free trial today.</p>
<form class="signup-form" action="signup.php" method="POST">
<input type="email" name="email" placeholder="Enter your email" required>
<button type="submit">Start Free Trial</button>
</form>
<p style="font-size: 0.9rem; margin-top: 1rem; opacity: 0.8;">No credit card required</p>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h4>CloudSync</h4>
<p>Secure cloud storage for everyone.</p>
</div>
<div class="footer-section">
<h4>Product</h4>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Integrations</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Company</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Legal</h4>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 CloudSync. All rights reserved.</p>
</div>
</footer>
</body>
</html>🎯 Key Elements
- Sticky header: Navigation always visible
- Compelling hero: Clear value proposition
- Feature grid: Showcase benefits with icons
- Video embed: Product demonstration
- Pricing table: Clear plans and features
- Social proof: Customer testimonials
- Strong CTA: Email signup form
- Complete footer: Additional links and info