Natours - Landing Page

Projeto feito em curso com objetivo de aprendizado em **CSS3** & **SASS**.

---

• Este projeto foi realizado sob tutoria de Jonas Schmedtmann no curso Master CSS and SASS.
• Você pode visualizar o resultado do meu projeto Clicando Aqui.

---

Realizações

• A melhor maneira de realizar um reset básico no CSS, utilizando o seletor universal *:

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

• Como estruturar as definições de fonte para todo o projeto:

- Header

• Como cortar partes de elementos utilizando clip-path:

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

• A maneira mais fácil de centralizar elementos com as propriedades top e left do transform:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

• Como criar animações CSS utilizando @keyframes e a propriedade animation:

@mixin moveInX($direction, $initX, $midX, $finalX) {
  @keyframes moveIn#{$direction} {
    0% {
      opacity: 0;
      transform: translateX($initX);
    }

    80% {
      transform: translateX($midX);
    }

    100% {
      opacity: 1;
      transform: translateX($finalX);
    }
  }
}

animation: moveInRight 1s ease-out;