Freecodcamp CSS Project “Build a Product Landing Page”
Live Preview: https://saideresearch.github.io/product-landing-page/
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Landing Page - Premium Headphones</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;
background-color: #f9f9f9;
}
/* Header and Navbar Styles */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #2c3e50;
color: white;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#header-img {
height: 50px;
width: auto;
}
#nav-bar {
display: flex;
gap: 30px;
}
.nav-link {
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 5px 10px;
transition: all 0.3s ease;
}
.nav-link:hover {
background-color: #3498db;
border-radius: 5px;
}
/* Main Content Styles */
main {
margin-top: 80px;
padding: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
section {
margin-bottom: 60px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
h2 {
color: #2c3e50;
margin-bottom: 20px;
font-size: 32px;
text-align: center;
}
/* Hero Section */
#features {
text-align: center;
}
.feature-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
margin-top: 30px;
}
.feature {
flex: 1;
min-width: 250px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.feature h3 {
color: #3498db;
margin-bottom: 10px;
font-size: 24px;
}
/* Video Section */
#video-section {
text-align: center;
}
#video {
max-width: 800px;
width: 100%;
height: 450px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
/* Pricing Section */
.pricing-container {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.pricing-card {
flex: 1;
min-width: 280px;
max-width: 350px;
background-color: #f8f9fa;
border-radius: 10px;
padding: 30px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-10px);
}
.pricing-card h3 {
color: #2c3e50;
font-size: 24px;
margin-bottom: 15px;
}
.price {
font-size: 36px;
color: #3498db;
font-weight: bold;
margin-bottom: 20px;
}
.pricing-card ul {
list-style: none;
margin-bottom: 25px;
}
.pricing-card li {
margin-bottom: 10px;
color: #666;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
/* Form Section */
#form-section {
text-align: center;
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
}
#form-section h2 {
color: white;
}
#form {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}
#email {
padding: 15px;
font-size: 16px;
border: none;
border-radius: 5px;
outline: none;
}
#submit {
padding: 15px 30px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
#submit:hover {
background-color: #c0392b;
}
/* Media Query */
@media (max-width: 768px) {
#header {
flex-direction: column;
gap: 15px;
padding: 10px;
}
#nav-bar {
gap: 15px;
}
.nav-link {
font-size: 14px;
}
main {
margin-top: 120px;
}
#video {
height: 300px;
}
.feature-container {
flex-direction: column;
align-items: center;
}
.feature {
width: 100%;
}
}
</style>
</head>
<body>
<header id="header">
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="Company Logo" id="header-img">
<nav id="nav-bar">
<a href="#features" class="nav-link">Features</a>
<a href="#video-section" class="nav-link">Product Video</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#form-section" class="nav-link">Contact</a>
</nav>
</header>
<main>
<section id="features">
<h2>Premium Features</h2>
<div class="feature-container">
<div class="feature">
<h3>Superior Sound</h3>
<p>Experience crystal clear audio with our advanced sound technology. Perfect for music lovers and professionals alike.</p>
</div>
<div class="feature">
<h3>Noise Cancelling</h3>
<p>Active noise cancellation technology blocks out external noise, allowing you to focus on what matters most.</p>
</div>
<div class="feature">
<h3>Long Battery Life</h3>
<p>Enjoy up to 30 hours of continuous playback on a single charge. Perfect for long journeys and work sessions.</p>
</div>
</div>
</section>
<section id="video-section">
<h2>See Our Product in Action</h2>
<iframe id="video" src="https://www.youtube.com/embed/9RnjfD5fzEw" title="Product Video" frameborder="0" allowfullscreen></iframe>
</section>
<section id="pricing">
<h2>Choose Your Perfect Pair</h2>
<div class="pricing-container">
<div class="pricing-card">
<h3>Basic</h3>
<div class="price">$99</div>
<ul>
<li>✓ Superior Sound</li>
<li>✓ 20hr Battery Life</li>
<li>✗ Noise Cancelling</li>
<li>✗ Carrying Case</li>
</ul>
<a href="#" class="btn">Select</a>
</div>
<div class="pricing-card">
<h3>Pro</h3>
<div class="price">$199</div>
<ul>
<li>✓ Superior Sound</li>
<li>✓ 30hr Battery Life</li>
<li>✓ Noise Cancelling</li>
<li>✗ Carrying Case</li>
</ul>
<a href="#" class="btn">Select</a>
</div>
<div class="pricing-card">
<h3>Elite</h3>
<div class="price">$299</div>
<ul>
<li>✓ Superior Sound</li>
<li>✓ 40hr Battery Life</li>
<li>✓ Noise Cancelling</li>
<li>✓ Carrying Case</li>
</ul>
<a href="#" class="btn">Select</a>
</div>
</div>
</section>
<section id="form-section">
<h2>Stay Updated</h2>
<p>Subscribe to our newsletter for exclusive offers and updates!</p>
<form id="form" action="https://www.freecodecamp.org/email-submit" method="POST">
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<input type="submit" id="submit" value="Subscribe Now">
</form>
</section>
</main>
</body>
</html>