Header & Footer

Overview

The Natours website features a stunning hero header and a comprehensive footer, both implementing modern CSS techniques including gradient overlays, clip paths, and interactive link effects.

The header component is defined in sass/components/layout/_header.scss and the footer in sass/components/layout/_footer.scss.

Header Component

The header serves as the hero section of the website, featuring a full-width background image with a gradient overlay and a distinctive angled bottom edge created with CSS clip-path.

Header Structure

<header class="header">
  <div class="header__logo-box">
    <img src="./img/logo-white.png" alt="Logo" class="header__logo">
  </div>

  <div class="header__text-box">
    <h1 class="heading-primary">
      <span class="heading-primary--main">Outdoors</span>
      <span class="heading-primary--sub">is where life happens</span>
    </h1>

    <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
  </div>
</header>

Header Base Styles

.header {
  height: 97vh;
  background-image: linear-gradient(
    to right bottom,
    rgba($color-primary-light, 0.8),
    rgba($color-primary-dark, 0.8)),
  url('../img/hero.jpg');
  background-size: cover;
  background-position: top;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  position: relative;
}

Visual Description

The header creates an immersive hero section with these visual characteristics:

Height & Positioning

Takes up 97% of the viewport height (97vh), creating a full-screen hero effect while leaving a subtle hint of content below.

Gradient Overlay

Uses a linear gradient from #7ED56F (light green) to #28B485 (dark green) with 80% opacity, creating a vibrant teal overlay over the hero image.

Background Image

The hero image (hero.jpg) is set to cover ensuring it fills the entire header area, with top positioning to keep the most important part of the image visible.

Angled Bottom Edge

Uses clip-path: polygon() to create a diagonal cut at the bottom, starting at 75vh on the right and sloping down to 100% on the left.

The clip-path polygon coordinates work as follows:

0 0 = top-left corner
100% 0 = top-right corner
100% 75vh = right side at 75% viewport height
0 100% = bottom-left corner

This creates the distinctive angled bottom edge.

&__logo-box {
  position: absolute;
  top: 4rem;
  left: 4rem;

  .header__logo {
    height: 3.6rem;
  }
}

The logo is positioned in the top-left corner:

<div class="header__logo-box">
  <img src="./img/logo-white.png" alt="Logo" class="header__logo">
</div>

Absolute Positioning

The logo box uses position: absolute to remove it from the normal document flow, allowing it to sit on top of the header background.

Corner Placement

top: 4rem and left: 4rem place the logo 40px from the top and left edges, providing comfortable breathing room.

Logo Sizing

The logo image has a fixed height of 3.6rem (36px) while width adjusts automatically to maintain aspect ratio.

Header Text Box

&__text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

The main heading and call-to-action button are centered in the header:

<div class="header__text-box">
  <h1 class="heading-primary">
    <span class="heading-primary--main">Outdoors</span>
    <span class="heading-primary--sub">is where life happens</span>
  </h1>

  <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
</div>

Perfect Centering Technique

The text box uses a classic CSS centering technique:

Position: Set to absolute to enable precise positioning
Initial Position: top: 40% and left: 50% move the top-left corner of the element
Transform: translate(-50%, -50%) shifts the element back by half its own width and height
Result: Perfect horizontal and vertical centering

The text box is positioned at 40% from the top rather than 50% to create a more visually appealing composition, following the rule of thirds in design.

Complete Header Example

<header class="header">
  <div class="header__logo-box">
    <img src="./img/logo-white.png" alt="Logo" class="header__logo">
  </div>

  <div class="header__text-box">
    <h1 class="heading-primary">
      <span class="heading-primary--main">Outdoors</span>
      <span class="heading-primary--sub">is where life happens</span>
    </h1>

    <a href="#section-tours" class="btn btn--white btn--animated">
      Discover our tours
    </a>
  </div>
</header>

Header Color Variables

The gradient overlay uses color variables defined in _variables.scss:

$color-primary-light: #7ED56F;  // Light green
$color-primary-dark: #28B485;   // Dark green

The gradient creates a smooth transition from light to dark green:

linear-gradient(
  to right bottom,                          // Direction
  rgba($color-primary-light, 0.8),         // Light green at 80% opacity
  rgba($color-primary-dark, 0.8)           // Dark green at 80% opacity
)

Both -webkit-clip-path and clip-path are included for better browser compatibility. The -webkit- prefix supports older versions of Safari and Chrome.

The footer provides a dark, elegant close to the page with navigation links, copyright information, and interactive hover effects.

<footer class="footer">
  <div class="footer__logo-box">
    <img src="img/logo-green-2x.png" alt="Full logo" class="footer__logo" />
  </div>

  <div class="row">
    <div class="col-1-of-2">
      <div class="footer__navigation">
        <ul class="footer__list">
          <li class="footer__item"><a href="#" class="footer__link">Company</a></li>
          <li class="footer__item"><a href="#" class="footer__link">Contact us</a></li>
          <li class="footer__item"><a href="#" class="footer__link">Careers</a></li>
          <li class="footer__item"><a href="#" class="footer__link">Privacy policy</a></li>
          <li class="footer__item"><a href="#" class="footer__link">Terms</a></li>
        </ul>
      </div>
    </div>

    <div class="col-1-of-2">
      <p class="footer__copyright">
        Built by <a href="#" class="footer__link">Marcos Laurindo Ferreira</a> 
        for his online course Advanced CSS and Sass. Copyright &copy; by 
        Marcos Laurindo Ferreira.
      </p>
    </div>
  </div>
</footer>

.footer {
  background-color: $color-grey-dark-3;
  padding: 10rem 0;
  font-size: 1.4rem;
}

The footer establishes a dark foundation:

Background: #333 (dark grey) creates a clear visual separation from the main content
Padding: 10rem (100px) top and bottom provides generous spacing
Font Size: 1.4rem (14px) for comfortable readability

&__logo-box {
  text-align: center;
  margin-bottom: 8rem;
}

&__logo {
  width: 15rem;
  height: auto;
}

The logo is prominently displayed at the top of the footer:

<div class="footer__logo-box">
  <img src="img/logo-green-2x.png" alt="Full logo" class="footer__logo" />
</div>

Centered Alignment

text-align: center centers the logo horizontally within its container.

Spacing

margin-bottom: 8rem (80px) creates substantial space between the logo and footer content.

&__navigation {
  border-top: 1px solid $color-grey-dark-1;
  padding-top: 2rem;
  display: inline-block;
}

&__list {
  list-style: none;
}

&__item {
  display: inline-block;

  &:not(:last-child) {
    margin-right: 1.5rem;
  }
}

The navigation creates a horizontal list of links:

Border Top

A subtle 1px border in #777 (grey) separates the navigation from the logo area.

Inline Display

Both the navigation container and individual items use inline-block to create a horizontal layout.

Item Spacing

margin-right: 1.5rem adds 15px of space between navigation items, except for the last item.

The footer links feature sophisticated hover effects:

&__link {
  &:link,
  &:visited {
    background-color: $color-grey-dark-3;
    color: $color-grey-light-1;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s ease;
  }

  &:hover,
  &:active {
    color: $color-primary;
    box-shadow: 0 1rem 2rem rgba($color-black, .4);
    transform: rotate(5deg) scale(1.3);
  }
}

Link States Breakdown

&:link,
&:visited {
  background-color: $color-grey-dark-3;  // #333 dark grey
  color: $color-grey-light-1;            // #F7F7F7 light grey
  text-decoration: none;                 // Removes underline
  text-transform: uppercase;             // Capitalizes text
  display: inline-block;                 // Enables transforms
  transition: all .2s ease;              // Smooth 200ms animation
}

Hover Effect Visualization

When a user hovers over a footer link, three simultaneous effects occur:

Color Change: Text changes from light grey (#F7F7F7) to primary green (#55C57A)
Shadow: A dark shadow appears (0 10px 20px rgba(0,0,0,0.4)) creating depth
Transform: The link rotates 5 degrees clockwise and scales up to 130% of its original size

The transition: all .2s ease on the default state ensures all property changes animate smoothly over 200 milliseconds with an easing function.

&__copyright {
  border-top: 1px solid $color-grey-dark-1;
  padding-top: 2rem;
  width: 80%;
  color: $color-grey-light-1;
  float: right;
}

The copyright section mirrors the navigation styling:

<div class="col-1-of-2">
  <p class="footer__copyright">
    Built by <a href="https://marcotech.dev.br" class="footer__link">Marcos Laurindo Ferreira</a> 
    for his online course <a href="#" class="footer__link">Advanced CSS and Sass</a>. 
    Copyright &copy; by Marcos Laurindo Ferreira. You are 100% allowed to use this 
    webpage for both personal and commercial use, but NOT to claim it as your own design.
  </p>
</div>

The copyright text is set to width: 80% and float: right, creating visual balance with the left-aligned navigation links.

The footer uses the Natours grid system to create a two-column layout:

<div class="row">
  <div class="col-1-of-2">
    <!-- Navigation -->
  </div>
  <div class="col-1-of-2">
    <!-- Copyright -->
  </div>
</div>

This creates a balanced layout:

Left Column: Navigation links in a horizontal list
Right Column: Copyright text and attribution

<footer class="footer">
  <div class="footer__logo-box">
    <img src="img/logo-green-2x.png" alt="Full logo" class="footer__logo" />
  </div>

  <div class="row">
    <div class="col-1-of-2">
      <div class="footer__navigation">
        <ul class="footer__list">
          <li class="footer__item">
            <a href="#" class="footer__link">Company</a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link">Contact us</a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link">Careers</a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link">Privacy policy</a>
          </li>
          <li class="footer__item">
            <a href="#" class="footer__link">Terms</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="col-1-of-2">
      <p class="footer__copyright">
        Built by <a href="#" class="footer__link">Author Name</a> 
        for their online course. Copyright &copy; Year.
      </p>
    </div>
  </div>
</footer>

The footer uses these color variables:

$color-grey-dark-3: #333;     // Footer background
$color-grey-dark-1: #777;     // Border color
$color-grey-light-1: #F7F7F7; // Text color
$color-primary: #55C57A;      // Hover link color
$color-black: #000;           // Shadow base color

BEM Naming Convention

Both the header and footer follow the BEM (Block Element Modifier) naming convention:

Block

The main component: .header or .footer

Element

Parts of the component: .header__logo-box, .footer__navigationElements are denoted with double underscores (__)

Modifier

Variations of blocks or elements (not shown in these examples)Modifiers are denoted with double hyphens (--)

BEM Benefits

Clear Structure

The naming convention makes the HTML structure immediately obvious from the class names.

No Nesting

Avoids deep CSS selector nesting, improving specificity management and performance.

Reusability

Components are self-contained and can be easily moved or reused.

Responsive Considerations

For mobile devices, you may want to add responsive overrides:

// Header adjustments for mobile
@media (max-width: 768px) {
  .header {
    clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
    
    &__logo-box {
      top: 2rem;
      left: 2rem;
    }
  }
}

// Footer adjustments for mobile
@media (max-width: 768px) {
  .footer {
    &__item {
      display: block;
      margin-bottom: 1rem;
    }
    
    &__copyright {
      width: 100%;
      float: none;
    }
  }
}

Get Started

Core Concepts

Components

Styling

Layout

​Overview

​Header Component

​Header Structure

​Header Base Styles

​Visual Description

Height & Positioning

Gradient Overlay

Background Image

Angled Bottom Edge

​Header Logo Box

​Header Text Box

​Perfect Centering Technique

​Complete Header Example

​Header Color Variables

​Footer Component

​Footer Structure

​Footer Base Styles

​Footer Logo

Centered Alignment

Spacing

​Footer Navigation

​Interactive Footer Links

​Link States Breakdown

​Hover Effect Visualization

​Footer Copyright

​Footer Layout with Grid

​Complete Footer Example

​Footer Color Variables

​BEM Naming Convention

​BEM Benefits

Clear Structure

No Nesting

Reusability

​Responsive Considerations

​Key Takeaways

Header

Footer

Build docs developers (and LLMs) love

Overview

Header Component

Header Structure

Header Base Styles

Visual Description

Header Logo Box

Header Text Box

Perfect Centering Technique

Complete Header Example

Header Color Variables

Footer Component

Footer Structure

Footer Base Styles

Footer Logo

Footer Navigation

Interactive Footer Links

Link States Breakdown

Hover Effect Visualization

Footer Copyright

Footer Layout with Grid

Complete Footer Example

Footer Color Variables

BEM Naming Convention

BEM Benefits

Responsive Considerations

Key Takeaways