Skip to content
Hoover Digital Media Learning Platform

Styling the About and Contact Pages — Team Layout, Contact Form, and Footer

This is the final lesson of CSS Foundations. By the end of this lesson, every page of the Summit Trail Outfitters site is styled, the footer ties all pages together, and you have a complete, responsive multi-page website built with CSS you wrote yourself.

About page — company story section

Section titled “About page — company story section”

A two-column layout at tablet and above — image left, text right — that stacks on mobile:

/* === About Page === */


.about-story {
  padding: var(--space-xl) 0;
}


.about-story-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: center;
}


@media (min-width: 768px) {
  .about-story-inner {
    flex-direction: row;
    align-items: flex-start;
  }
}


.about-story-image {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}


@media (min-width: 768px) {
  .about-story-image {
    width: 45%;
  }
}


.about-story-text h2 {
  margin-bottom: var(--space-md);
}

About page — team section

Section titled “About page — team section”
/* === Team Grid === */


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


.team-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}


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


.guide-card {
  flex: 1 1 220px;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}


.guide-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-md);
  border: 3px solid var(--color-accent);
}


.guide-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}


.guide-role {
  font-size: 0.875rem;
  color: var(--color-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}


.guide-bio {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

Contact page — form layout

Section titled “Contact page — form layout”
/* === Contact Form === */


.contact-section {
  padding: var(--space-xl) 0;
}


.contact-form {
  max-width: 600px;
  margin: 0 auto;
}


.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}


.form-group label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
}


.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}


.form-group textarea {
  min-height: 160px;
  resize: vertical;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(58, 92, 38, 0.15);
}


.form-submit {
  width: 100%;
  margin-top: var(--space-md);
}

The :focus state with border-color and box-shadow is the accessible alternative to outline: none — removing the default outline without replacing it hides focus indicators from keyboard users, but a custom box-shadow ring restores the visibility in a branded style.

Section titled “Site-wide footer”
/* === Site Footer === */


.site-footer {
  background-color: var(--color-primary);
  color: var(--color-accent);
  padding: var(--space-xl) 0 var(--space-lg);
}


.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}


@media (min-width: 768px) {
  .footer-grid {
    flex-direction: row;
    gap: var(--space-2xl);
  }
}


.footer-col h3 {
  color: var(--color-bg);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}


.footer-col p,
.footer-col a {
  color: var(--color-accent);
  font-size: 0.9rem;
  line-height: 1.8;
  text-decoration: none;
}


.footer-col a:hover {
  color: var(--color-white);
}


.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}


.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(168, 201, 127, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: rgba(168, 201, 127, 0.7);
}

Course completion recap

Section titled “Course completion recap”

You have now styled every page of the Summit Trail Outfitters website. Step back and look at what you built from scratch using CSS:

Module 01 — Getting Started with CSS Connected a stylesheet to HTML, learned the cascade, and wrote your first rules.

Module 02 — Selectors & Specificity Targeted elements precisely with type, class, pseudo-class, and pseudo-element selectors — and understood why some rules win over others.

Module 03 — The Box Model Controlled space inside and around every element with margin, padding, border, and box-sizing: border-box.

Module 04 — Color & Typography Applied STO’s brand palette in hex and rgba, loaded Google Fonts, built a rem-based type scale, and added visual depth with shadows and opacity.

Module 05 — Layout with Flexbox and Grid Replaced normal flow with a powerful one-dimensional layout system — horizontal nav bars, equal-height card rows, vertically centered hero content. Introduced CSS Grid for two-dimensional layouts.

Module 06 — Styling Forms Removed browser default styles from inputs, buttons, and selects. Styled focus states accessibly, built form layouts with Flexbox, and applied validation state styling.

Module 07 — Responsive Design Added the viewport meta tag, applied mobile-first media queries, and built a layout that works from 375px to 1440px.

Module 08 — Styling STO End-to-End Combined every technique into a finished product: CSS custom properties for the brand system, a sticky responsive header, a hero with parallax-ready image overlay, a product listing page with hover animations, blog reading typography, accessible form styles, and a multi-column footer.

Final exercise

Section titled “Final exercise”

Run the complete responsive audit:

  1. Open each HTML file in turn: index.html, tours.html, blog.html, blog-article.html, about.html, contact.html.

  2. At 375px: all pages should be single-column, readable, and have no horizontal overflow.

  3. At 768px: header switches to horizontal, cards show two per row where applicable, two-column layouts appear on the About page.

  4. At 1280px: the site looks like a polished professional website.

  5. Look at the :root custom properties in DevTools. Every color you see on screen traces back to one of those declarations — change --color-primary and watch the entire site update.

Every page of the STO site is styled. Module 09 will add the animation layer — then it is a complete portfolio project you can deploy, share, and be proud of.

What comes next

Section titled “What comes next”

Module 08 closes out the STO styling work. The site looks like a professional outdoor adventure company — but it is still static.

Module 09 — CSS Animations adds a motion layer without touching JavaScript: a staggered hero entrance on page load, cascading tour card reveals, reusable animation patterns like spinners and skeleton loaders, and prefers-reduced-motion support so the animations are accessible from day one.

After Module 09, JavaScript Foundations picks up where CSS ends — making the STO site interactive with hamburger menus, form validation, dynamic content, and scroll-triggered reveals.