1990s Marketing Page — Hero section, feature cards, testimonials, pricing table, and responsive navigation. The classic SaaS landing page — every marketer, startup, and developer builds one. Inspired by freeCodeCamp's Responsive Web Design certification.

01

Hero Section

Complete

Why learn this?

The hero is the first thing users see — it's your one chance to make an impression. A great hero combines a compelling headline, supporting text, and a clear call-to-action. Every marketing site uses this pattern.

What you built

A full-viewport hero with gradient background, bold headline with gradient text accent, descriptive subtext, and a prominent CTA button. Clean, semantic HTML with minimal CSS.

Key concepts

  • min-height: 100vh — Full viewport height sections
  • background: linear-gradient() — Color gradients for depth
  • clamp() — Fluid typography that scales with viewport
  • -webkit-background-clip: text — Gradient text effects
  • border-radius: 50px — Pill-shaped buttons

Approach

  1. Create a section with min-height: 100vh and flexbox centering
  2. Apply a multi-stop gradient background using linear-gradient()
  3. Write the headline with a span for gradient accent using background-clip: text
  4. Add descriptive subtext with muted color and max-width constraint
  5. Style the CTA as a pill button with hover lift animation
<section class="hero">
  <h1>Build Smarter<br>with <span>AI Agents</span></h1>
  <p>Automate workflows, integrate tools...</p>
  <a href="#" class="cta">Start Building Free</a>
</section>

<style>
.hero {
  min-height: 100vh;
  background: linear-gradient(
    135deg, #0a0a1a, #16213e, #0f3460
  );
}
.hero h1 span {
  background: linear-gradient(90deg, #00d4aa, #00a8cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .cta {
  padding: 1rem 2.5rem;
  border-radius: 50px;
  transition: transform 0.2s;
}
.hero .cta:hover {
  transform: translateY(-2px);
}
</style>
Tip: Use clamp(min, preferred, max) for your headline font-size — clamp(2.5rem, 6vw, 4.5rem) scales smoothly from phone to large desktop without breakpoints.
View Live DemoNext: Feature Cards
02

Feature Cards

Complete

Why learn this?

Feature grids are the most reused layout pattern on the web. Every SaaS product, service page, and marketing site uses cards to organize features. Mastering card layouts with CSS Grid is essential for any web developer.

What you built

A responsive 3-column feature card grid with icon headers, hover effects, and auto-wrapping for smaller screens. Six feature cards showcasing the product benefits.

Key concepts

  • grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) — Auto-wrapping grid
  • border-radius: 16px — Card-style containers
  • transition: transform 0.2s — Subtle hover animations
  • rgba() — Semi-transparent backgrounds for depth

Approach

  1. Create a grid container with auto-fit, minmax() for responsive columns
  2. Add semi-transparent card backgrounds with rgba()
  3. Style each card with an emoji icon, title, and description
  4. Add translateY hover lift with border color transition
  5. Wrap content in a max-width container for readability
<div class="feature-grid">
  <div class="feature-card">
    <div class="icon">&#9889;</div>
    <h3>Visual Workflows</h3>
    <p>Build agent pipelines without code.</p>
  </div>
  <!-- repeat for each feature -->
</div>

<style>
.feature-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(300px, 1fr)
  );
  gap: 1.5rem;
}
.feature-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 2rem;
  transition: transform 0.2s, border-color 0.2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: #00d4aa;
}
</style>
Tip: auto-fit with minmax(300px, 1fr) means cards are at least 300px wide and expand to fill space. On small screens, they stack into one column automatically — no media query needed.
View Live DemoNext: Testimonials
03

Testimonials Section

Complete

Why learn this?

Social proof converts visitors into customers. Testimonials with quotes, avatars, and attribution build trust. Every landing page needs this section to establish credibility.

What you built

A 3-column testimonial grid with pull quotes, avatar badges (initials on gradient circles), author name, and role. Each card uses a decorative opening quote mark in the accent color.

Key concepts

  • ::before pseudo-element — Decorative content without extra HTML
  • content: '\201C' — Unicode quote character via CSS
  • flexbox — Horizontal author layout with avatar + text
  • background: linear-gradient() — Avatar gradient circles

Approach

  1. Create testimonial cards with a quote paragraph and author block
  2. Use ::before to add a large decorative open-quote mark
  3. Make avatar circles with initials using flexbox centering
  4. Style the quote text in italics with increased line-height
  5. Add attribution with name (bold) and role (muted)
<div class="testimonial-card">
  <div class="quote">We cut response time
  from 4 hours to under 30 seconds.</div>
  <div class="author">
    <div class="avatar">SK</div>
    <div>
      <div class="name">Sarah Kim</div>
    </div>
  </div>
</div>

<style>
.quote::before {
  content: '\201C';
  font-size: 2.5rem;
  color: #00d4aa;
  display: block;
}
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(
    135deg, #00d4aa, #00a8cc
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
</style>
Tip: ::before pseudo-elements are perfect for decorative content that search engines shouldn't index. The actual quote text stays in the HTML — only the decorative quote mark comes from CSS.
View Live DemoNext: Pricing Table
04

Pricing Table

Complete

Why learn this?

The pricing table is the most conversion-critical component on any SaaS site. It must communicate value clearly, highlight the recommended plan, and make the decision effortless. Getting this right directly impacts revenue.

What you built

A 3-tier pricing grid (Starter/Pro/Enterprise) with plan names, prices, feature checklists, and CTA buttons. The Pro plan is "featured" with an accent border, badge, and slight scale boost.

Key concepts

  • ::before with content: '\2713' — Checkmark bullets via CSS
  • transform: scale(1.03) — Highlighting the recommended plan
  • text-transform: uppercase + letter-spacing — Badge styling
  • sup element — Price superscript styling

Approach

  1. Create 3 pricing cards in a responsive grid (same auto-fit pattern)
  2. Add a .featured modifier class for the recommended plan
  3. Style prices with sup for the dollar sign and span for period
  4. Add feature lists with CSS checkmark bullets using ::before
  5. Style CTA buttons — outline for regular, gradient-filled for featured
<div class="pricing-card featured">
  <div class="badge">Most Popular</div>
  <div class="plan">Pro</div>
  <div class="price">
    <sup>$</sup>49<span>/mo</span>
  </div>
  <ul>
    <li>Unlimited agents</li>
    <li>10,000 task runs/mo</li>
  </ul>
  <a href="#" class="btn">
    Start Free Trial
  </a>
</div>
Tip: The sup element raises the dollar sign above the baseline — style it with vertical-align: super and a smaller font-size for a polished pricing look. The \2713 checkmark is a Unicode character that works in CSS content.
View Live DemoNext: Full Page Polish
05

Full Page with Responsive Nav

Complete

Why learn this?

This step assembles all components into a complete, production-quality landing page. You add a sticky navigation bar (with mobile hamburger), glue everything together with scroll behavior, and add accessibility touches.

What you built

A complete landing page with sticky nav, all 4 content sections (hero, features, testimonials, pricing), footer, mobile responsive hamburger menu, smooth hover effects, and reduced-motion support.

Key concepts

  • position: sticky — Sticky navigation that stays on scroll
  • backdrop-filter: blur() — Frosted glass nav effect
  • Mobile hamburger menu with JavaScript toggle
  • prefers-reduced-motion — Accessibility for motion sensitivity
  • CSS scroll margin/scroll behavior for smooth anchor links

Approach

  1. Combine all 4 section components into one HTML file with consistent styling
  2. Add a sticky nav bar with logo, links, and CTA button
  3. Implement hamburger menu with JavaScript class toggle
  4. Add footer with copyright
  5. Apply prefers-reduced-motion to disable animations for accessibility
<nav>
  <div class="nav-inner">
    <div class="logo">Agent<span>Forge</span></div>
    <div class="nav-links" id="navLinks">
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#" class="nav-cta">Get Started</a>
    </div>
    <button class="hamburger" id="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</nav>

<style>
nav { position: sticky; top: 0;
  background: rgba(10,10,15,0.95);
  backdrop-filter: blur(10px); }
@media (max-width: 640px) {
  .hamburger { display: flex; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}
</style>
Tip: Sticky nav with backdrop-filter: blur(10px) creates the frosted glass effect. Combine with rgba() background for the translucent look that lets page content shimmer through. Always add prefers-reduced-motion for accessibility.
View Live Demo
Model
DeepSeek V4 Flash
Total Tokens
~38K
Est. Cost
$0.01
Steps
5
Tokens measured from actual output files at ~0.28 tok/byte. Input estimated from turns multiplied by system + AGENTS.md context.
Previous
4
Survey Form
Forms & Inputs
Up Next
5
Doc Page
Technical Layout