Styling the Homepage — Hero, Featured Tours Section, and Call-to-Action

The homepage is the highest-impact page on the Summit Trail Outfitters site. It is the first thing most visitors see, and it establishes whether the site looks like a real outdoor adventure company or a beginner exercise. This lesson applies every major technique from the course to make it look like the former.

The hero section

The hero needs: a background image with a dark overlay, vertically and horizontally centered content, and a prominent call-to-action button.

/* === Hero Section === */

.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(rgba(44, 74, 30, 0.55), rgba(44, 74, 30, 0.55)),
    url('images/hero.jpg') no-repeat center / cover;
  background-color: var(--color-primary); /* fallback if image fails */
  padding: var(--space-xl) var(--space-md);
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 100vh;
    padding: var(--space-xl) 0;
  }
}

.hero-content {
  max-width: 680px;
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-bg);
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-content p {
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

clamp(2rem, 5vw, 3.5rem) makes the hero heading fluid — it grows with the viewport between a floor of 2rem and a ceiling of 3.5rem, with no breakpoint needed.

The section heading pattern

A reusable heading style used throughout the homepage:

.section-heading {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.section-subheading {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-lg);
}

Featured tours section

/* === Featured Tours === */

.featured-tours {
  background-color: var(--color-bg-alt);
  padding: var(--space-xl) 0;
}

.tours-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 600px) {
  .tours-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.tour-card {
  flex: 1 1 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.tour-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

Tour card internals

.tour-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.tour-card:hover .tour-card-image {
  transform: scale(1.04);
}

.tour-card-body {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}

.tour-card-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.tour-card-description {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-md);
}

.tour-card-cta {
  margin-top: auto;
}

The overflow: hidden on .tour-card clips the scaled image to the card boundary — without it, the zoomed image would overflow the rounded corners on hover.

Call-to-action section

/* === CTA Section === */

.cta-section {
  background-color: var(--color-primary);
  padding: var(--space-xl) 0;
  text-align: center;
}

.cta-section h2 {
  color: var(--color-bg);
  margin-bottom: var(--space-sm);
}

.cta-section p {
  color: var(--color-accent);
  font-size: 1.125rem;
  margin-bottom: var(--space-lg);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

Exercise

Apply all homepage styles to the STO index.html:

1. Add the hero, featured tours, and CTA sections to styles.css.

2. In index.html, ensure your sections have the correct class names: .hero-section, .featured-tours, .tours-grid, .tour-card, .cta-section.

3. Open the browser and test the hero at 375px — the heading should be readable at the smaller clamp() value. Test at 1200px — it should be larger but still not overwhelming.

4. Hover over a tour card. You should see the card lift (translateY(-6px)) and the image subtly zoom (scale(1.04)). Both should animate smoothly via the transition.

5. If you do not have a hero image yet, the background-color: var(--color-primary) fallback will show the dark green — correct behavior.

Recap

• clamp(min, preferred, max) creates fluid type that scales with the viewport without breakpoints.
• The dark overlay on the hero uses multiple background layers: rgba(...) on top, url(...) image below — both in a single background declaration.
• Tour cards use overflow: hidden to clip the scaled image to the card boundary on hover.
• transition on transform and box-shadow creates smooth hover animations — always define the transition on the default state, not the :hover state.
• flex: 1 on .tour-card-body and margin-top: auto on .tour-card-cta pins the button to the bottom of every card regardless of description length.

Lesson 04 styles the tours listing page — a more detailed tour card layout with category tags, metadata rows, and a grid that adapts across breakpoints.