Mini Project – Landing Page

Build a complete landing page layout combining flexbox, grid, and responsive design techniques.

Time to combine everything you've learned into a real project. You'll build a complete landing page that uses modern layout techniques, responsive design, and professional styling patterns that developers use every day.

The WanderLust team needs a new homepage that showcases their travel services. You'll create a layout with a hero section, feature cards, testimonials, and a contact form — all responsive and perfectly styled.

Planning the Layout Structure

Before writing CSS, smart developers plan their layout structure. Think of it like drawing a house blueprint before building — you need to know where each room goes.

1. Header
Logo + Navigation

2. Hero Section
Main headline + CTA

3. Features Grid
Three service cards

4. Footer
Contact + social links

Each section uses different CSS layout methods. The header needs flexbox for navigation, the hero section centers content with flexbox, and the features use CSS Grid for responsive cards.

Building the Header Navigation

Every professional website starts with a clean header. The navigation bar needs to position the logo on the left and menu items on the right — flexbox handles this perfectly.

<!-- WanderLust header with logo and navigation -->
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Makes sizing predictable */
}

.header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
  padding: 1rem 2rem; /* Breathing room inside */
}

.nav-container {
  display: flex;
  justify-content: space-between; /* Logo left, menu right */
  align-items: center; /* Vertically centered */
  max-width: 1200px; /* Prevents stretching on wide screens */
  margin: 0 auto; /* Centers the container */
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0ea5e9; /* WanderLust brand blue */
}

.nav-menu {
  display: flex;
  gap: 2rem; /* Space between menu items */
  list-style: none; /* Removes bullet points */
}

.nav-link {
  color: #334155;
  text-decoration: none; /* No underlines */
  font-weight: 500;
  transition: color 0.3s; /* Smooth color change */
}

.nav-link:hover {
  color: #0ea5e9; /* Blue on hover */
}
</style>

<header class="header">
  <nav class="nav-container">
    <div class="logo">WanderLust</div>
    <ul class="nav-menu">
      <li><a href="#" class="nav-link">Destinations</a></li>
      <li><a href="#" class="nav-link">About</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>
</header>

What just happened?

Flexbox positioned the logo and menu on opposite sides automatically. The max-width prevents the header from stretching too wide on large screens. Try this: hover over the menu links to see the smooth color transition.

Creating the Hero Section

The hero section is the first thing visitors see — it needs to make a strong impression. You'll center content both horizontally and vertically using flexbox, creating that "magazine cover" effect that professional sites use.

/* WanderLust hero section with centered content */
.hero {
  background: linear-gradient(135deg, #0ea5e9, #f97316); /* Blue to orange gradient */
  color: white;
  min-height: 80vh; /* Takes most of screen height */
  display: flex;
  align-items: center; /* Vertically centers content */
  justify-content: center; /* Horizontally centers content */
  text-align: center; /* Centers text inside */
  padding: 2rem; /* Safety padding on small screens */
}

.hero-content {
  max-width: 600px; /* Prevents text from stretching too wide */
}

.hero-title {
  font-size: 3rem; /* Big and bold */
  font-weight: 900;
  margin-bottom: 1rem;
  line-height: 1.2; /* Tighter spacing for large text */
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9; /* Slightly transparent for hierarchy */
}

.cta-button {
  background: white;
  color: #0ea5e9; /* Flipped colors for contrast */
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s; /* Smooth hover animation */
}

.cta-button:hover {
  transform: translateY(-2px); /* Lifts button on hover */
}

What just happened?

The gradient background creates visual impact while flexbox centers everything perfectly. The transform: translateY(-2px) makes the button lift slightly on hover, adding polish. Try this: resize your browser — the content stays centered at any size.

Building a Responsive Features Grid

CSS Grid shines when creating card layouts that adapt to different screen sizes. You'll build feature cards that automatically adjust from three columns on desktop to one column on mobile — no media queries needed for the basic layout.

/* WanderLust features section with responsive grid */
.features {
  padding: 5rem 2rem; /* Generous spacing */
  background: #f8fafc; /* Light background for contrast */
  max-width: 1200px;
  margin: 0 auto; /* Centers the section */
}

.features-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 3rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Magic responsive formula */
  gap: 2rem; /* Space between cards */
}

.feature-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
  text-align: center;
  transition: transform 0.3s; /* Smooth hover effect */
}

.feature-card:hover {
  transform: translateY(-5px); /* Lifts entire card */
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: #0ea5e9;
  border-radius: 50%; /* Perfect circle */
  margin: 0 auto 1rem; /* Centers and adds bottom space */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #0f172a;
}

.feature-description {
  color: #64748b;
  line-height: 1.6;
}

What just happened?

The repeat(auto-fit, minmax(300px, 1fr)) is CSS Grid magic — it creates as many columns as fit, but each must be at least 300px wide. Cards automatically stack on narrow screens. Try this: slowly resize your browser to watch the responsive behavior.

Adding Professional Polish

The difference between amateur and professional websites lies in the details. Small touches like consistent spacing, hover effects, and proper typography hierarchy make a huge impact on user perception.

Spacing System
Use consistent padding/margin values: 1rem, 2rem, 3rem

Hover Effects
Transform and transition for interactive feedback

Color Hierarchy
Primary text dark, secondary text gray, accents colorful

Box Shadows
Subtle shadows create depth and visual separation

Notice how the WanderLust landing page uses all these principles. The spacing is consistent, colors follow a clear hierarchy, and interactive elements provide immediate feedback when hovered.

Complete Landing Page Structure

Here's how all the sections connect together in a complete landing page. This structure works for any business — just change the content and colors to match the brand.

<!-- Complete WanderLust landing page structure -->
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #334155;
}

/* Header styles from earlier */
.header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem 2rem;
  position: sticky; /* Stays at top when scrolling */
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0ea5e9;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  color: #334155;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #0ea5e9;
}

/* Footer to complete the page */
.footer {
  background: #0f172a;
  color: white;
  text-align: center;
  padding: 3rem 2rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer p {
  opacity: 0.8;
  margin-top: 1rem;
}
</style>

<!DOCTYPE html>
<html>
<body>
  <header class="header">
    <nav class="nav-container">
      <div class="logo">WanderLust</div>
      <ul class="nav-menu">
        <li><a href="#" class="nav-link">Destinations</a></li>
        <li><a href="#" class="nav-link">About</a></li>
        <li><a href="#" class="nav-link">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div style="background: linear-gradient(135deg, #0ea5e9, #f97316); color: white; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem;">
      <div style="max-width: 600px;">
        <h1 style="font-size: 2.5rem; font-weight: 900; margin-bottom: 1rem;">Discover Your Next Adventure</h1>
        <p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;">Explore breathtaking destinations worldwide</p>
        <button style="background: white; color: #0ea5e9; padding: 1rem 2rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">Start Your Journey</button>
      </div>
    </div>
  </main>

  <footer class="footer">
    <div class="footer-content">
      <h3>Ready to explore?</h3>
      <p>© 2024 WanderLust Travel. Your adventure starts here.</p>
    </div>
  </footer>
</body>
</html>

What just happened?

You built a complete landing page structure! The position: sticky header stays visible while scrolling, and each section flows naturally into the next. Try this: scroll down to see how the sticky navigation works in real browsers.

Pro Development Tip

Real developers build landing pages in sections, testing each part before moving on. Start with wireframes (simple boxes), add the HTML structure, then style one section at a time. This prevents overwhelming yourself with too much code at once.

Quiz

Up Next: Mini Project – Portfolio Layout

Create a professional portfolio website showcasing projects with advanced grid layouts and interactive galleries.

← Previous Course Index Next →