🚀 Day 21 – Final Project: Responsive Landing Page

It’s time to combine everything you’ve learned! In this final project, you’ll build a responsive landing page with a header, hero section, features, and footer — all styled beautifully using CSS.

💡 Requirements

Use Flexbox for layout
Apply transitions/hover effects
Make it responsive with media queries
Include navigation, content, and a call-to-action

🧠 Interactive Editor (Preview)

<!doctype html>
<html>
<head>
<style>
body{margin:0;font-family:Poppins,sans-serif;}
header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:20px;
 background:#219ebc;
 color:#fff;
}
nav a{
 color:#fff;
 text-decoration:none;
 margin:0 10px;
 transition:color 0.3s;
}
nav a:hover{color:#ffb703;}
.hero{
 display:flex;
 justify-content:center;
 align-items:center;
 flex-direction:column;
 height:80vh;
 background:#e3f2fd;
 text-align:center;
}
.hero h1{font-size:2.4rem;color:#023047;}
.hero p{color:#333;}
.hero button{
 background:#ffb703;
 color:#fff;
 border:none;
 padding:12px 24px;
 font-size:1rem;
 border-radius:8px;
 cursor:pointer;
 transition:transform 0.3s;
}
.hero button:hover{transform:scale(1.1);background:#fb8500;}
.features{
 display:flex;
 justify-content:space-around;
 flex-wrap:wrap;
 padding:40px 20px;
}
.feature{
 background:#fff;
 border:1px solid #ddd;
 border-radius:10px;
 width:280px;
 text-align:center;
 padding:20px;
 margin:10px;
 transition:transform 0.3s;
}
.feature:hover{transform:translateY(-10px);}
footer{
 background:#023047;
 color:#fff;
 text-align:center;
 padding:20px;
}
@media (max-width:700px){
 .features{flex-direction:column;align-items:center;}
 .hero h1{font-size:1.8rem;}
}
</style>
</head>
<body>
<header>
 <h2>MyBrand</h2>
 <nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
 </nav>
</header>
<section class="hero">
 <h1>Welcome to My Landing Page</h1>
 <p>Learn, Build, and Grow your web development skills.</p>
 <button>Get Started</button>
</section>
<section class="features">
 <div class="feature"><h3>🔥 Fast</h3><p>Optimized for speed.</p></div>
 <div class="feature"><h3>⚙️ Flexible</h3><p>Built using modern CSS techniques.</p></div>
 <div class="feature"><h3>📱 Responsive</h3><p>Looks great on all devices.</p></div>
</section>
<footer>
 <p>© 2025 MyBrand | Designed by You 💻</p>
</footer>
</body>
</html>

Search This Blog

Tech Courses and Job Updates

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)