Natours Landing Page — Advanced CSS and Sass (Schmedtmann, 2018)

Natours — Advanced CSS and Sass (Jonas Schmedtmann)

Author/Course: Jonas Schmedtmann (Udemy, “Advanced CSS and Sass: Design and Build Real World Projects”) Repo folder: raw/repos/final-after-S06/ Stack: HTML5, CSS3, Sass/SCSS, node-sass, PostCSS/Autoprefixer Approximate date: 2017–2018 (node-sass 4.x era; final-after-S06 = end-state of course Section 06)

---

Overview

Natours is a one-page marketing site for a fictional outdoor-tour company. The folder name final-after-S06 signals this is the completed code state after Section 6 of Schmedtmann’s Udemy course — the most fully-featured snapshot of the project, including navigation, tours cards, stories, booking form, and a modal popup. No JavaScript is used; all interactivity is implemented with pure CSS techniques (checkbox hack for navigation, :hover for flip cards).

---

Page Sections

Section	Key technique
Navigation	Checkbox-hack full-screen overlay nav with animated hamburger icon
Header	Gradient overlay on background image; entrance animations via @keyframes
About	Float-based two-column layout; overlapping image composition
Features	4-column icon boxes
Tours	3D flip cards using transform: rotateY and backface-visibility: hidden
Stories	CSS shape-outside text wrapping; filter and clip-path on images; <video> background
Booking	CSS gradient-masked form on background image
Footer	Custom float grid
Popup	Pure-CSS modal using :target pseudo-class

---

Sass Architecture: 7-1 Pattern

The stylesheet follows the 7-1 architecture — 7 folders, 1 main entry file (sass/main.scss):

sass/
├── abstracts/       # No output — mixins, functions, variables
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _variables.scss
├── base/            # Global resets and defaults
│   ├── _animations.scss   — @keyframes moveInLeft/Right/Bottom
│   ├── _base.scss         — *, *::before, *::after; rem root; box-sizing
│   ├── _typography.scss   — heading hierarchy
│   └── _utilities.scss    — u-center-text, u-margin-* helpers
├── components/      # Reusable UI pieces
│   ├── _button.scss / _card.scss / _form.scss / _story.scss
│   ├── _popup.scss / _bg-video.scss / _composition.scss / _feature-box.scss
├── layout/          # Page-level regions
│   ├── _grid.scss / _header.scss / _footer.scss / _navigation.scss
└── pages/           # Per-page overrides
    └── _home.scss

---

Design Tokens (from _variables.scss)

Variable	Value	Role
$color-primary	#55c57a	Brand green (mid)
$color-primary-light	#7ed56f	Gradient start
$color-primary-dark	#28b485	Gradient end
$color-secondary-light	#ffb900	Accent yellow
$color-secondary-dark	#ff7730	Accent orange
$color-tertiary-light	#2998ff	Blue accent
$color-tertiary-dark	#5643fa	Purple accent
$default-font-size	1.6rem	Base text (10px root trick)
$grid-width	114rem	Max content width

---

Key Sass Mixins

• clearfix — ::after clearfix for float layouts
• absCenter — position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
• respond($breakpoint) — media query manager with named breakpoints:
  • phone → max-width: 37.5em (600 px)
  • tab-port → max-width: 56.25em (900 px)
  • tab-land → max-width: 75em (1 200 px)
  • big-desktop → min-width: 112.5em (1 800 px)

All breakpoints use em units (not px) so they scale correctly when the user changes browser font size.

---

CSS Animations

Three @keyframes defined in _animations.scss:

• moveInLeft — opacity 0→1 + translateX(-10rem → 0) with an overshoot at 80%
• moveInRight — mirror of moveInLeft
• moveInBottom — opacity 0→1 + translateY(3rem → 0)

These are applied to heading text on the hero section for entrance animation.

---

BEM Methodology

All class names follow BEM (Block Element Modifier):

• Block: .navigation, .card, .story, .form, .btn
• Element (double underscore): .navigation__nav, .card__side, .story__img
• Modifier (double dash): .card__side--back, .card__side--back-1, .btn--white

---

Build Pipeline

node-sass main.scss → style.comp.css   (compile:sass)
concat icon-font.css + style.comp.css → style.concat.css   (concat:css)
postcss autoprefixer → style.prefix.css   (prefix:css)
node-sass --output-style compressed → style.css   (compress:css)

npm start runs the dev server (live-server) and Sass watcher in parallel.

---

Key Concepts Demonstrated

Concept	Where
sass-scss preprocessor features	Variables, nesting, partials, mixins, @import
css-architecture 7-1 pattern	Full sass/ folder structure
bem-methodology	All class names across the project
css-animations	@keyframes in _animations.scss, flip cards, nav transitions
responsive-design	respond() mixin + em breakpoints throughout
Checkbox-hack navigation	_navigation.scss — CSS-only hamburger menu
CSS custom grid	_grid.scss — float-based .col-1-of-2/3/4 system
clip-path, shape-outside, filter	_story.scss, hero section

---

Entity Credits

• jonas-schmedtmann — course author and original Natours designer
• udemy — host platform for “Advanced CSS and Sass” course