xDouglas90/natours-landing-page

Landing page para uma startup agência de viagens fictícia, com intuito de reforço nos estudos de HTML, CSS & SASS por meio do curso "Advanced CSS and Sass Flexbox, Grid, Animations and More!" do Jonas Schmedtmann.

CSS

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;