https://github.com/qiekn/Natours

Advanced CSS and Sass: Flexbox, Grid, Animations and More

Jonas Schmedtmann

6B1D07A96AE18010BC7FC41CE8737BF56163D11F

Natours Project - Advanced CSS and Sass

Trillo Project - Flexbox

Nexter Project - Css Grid Layouts

Part 1

Building the header

first to be clean

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

after added the background img adn linear-gradient,

we use clip-path and polygon() to make some cool shape-style

more about clip-path see MDN

and here is a useful website for nomal shape → CSS clip-path maker

.header {
  height: 95vh;
  background-image: linear-gradient(to right bottom,
      rgba(126, 213, 111, 0.8),
      rgba(40, 180, 133, 0.8)),
    url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
  position: relative;

  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%)
}

Now remember that this absolute positioning needs to have a reference. And the reference is the first element with the relative position that it can find.

so we use position: relative; here, beacause <header> would be the parent of <logo-box> which use position: absolute .

another point I learn here is the background-position property.

CSS animation

“It’s really cool, believe me.”