Natours Project

Project View

    Heading
    Main
    • Adicionado -20vh para a primeira tag section do main, para ela subir e seu background ficar em baixo da área branca que estava do corte da imagem verde.
      • Heading: EXCITING TOURS FOR ADVENTUROUS PEOPLE
    • a) Código do heading-secondary (texto acima):
      .heading-secondary {
      font-size: 3.5rem;
      text-transform: uppercase;
      font-weight: 700;
      display: inline-block;
      background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
      -webkit-background-clip: text;
      color: transparent;
      }
      b) Adicionado background-image com o linear-gradient verde.
      c) Adicionado o -webkit-background-clip para que o background seja aplicado somente nos pixels ocupados pelo texto.
      d) Transformado a cor da letra do texto para transparent, visto que assim somente será exibido o linear-gradient verde.

      • Área de Fotos
    • Adicionada as fotos, com width em porcentagem para se auto adequar ao tamanho do browser.
    • Adicionada propriedade hover em cima das imagens, para que ao passar o mouse elas alterem o z-index para um maior (adicionado z-index nas imagens padrão).
    • Adicionado um transition: all .2s na classe principal das fotos, para ficar mais smooth
    • Borda verde: utilizado o outline, para poder usar o outline-offset.
    • Outline-offset: utiizado para definir um espaçamento entre o objeto e a borda (ouline).

    • Agora para quando hover em uma imagem, as outras diminuirem de tamanho, foi utilizado:
      &:hover &__photo:not(:hover)
      //composition:hover composition__photo:not(:hover)
      Ou seja, quando hover a composition, select a composition__photo que is not(:hover) (que não está com o mouse em cima).

    Features Section
    • Copiado o efeito verde do header e colado no section-feature.
    • Criado nova file "feature-box", dentro da pasta Components, visto que será reutilizado. Essa file possui os styles da box de informações.
    • Para criar o efeito de gangorra nessa sessão, não foi utilizado o clip-path, e sim o skewY(-7deg), para virar a sessão inteira.
    • Adicionado o skewY(7deg) em todos os filhos da section-feature (a que contém as boxes), para que tudo dentro dessa section volte a posição correta.
    • Adicionado no section-feature uma margin-top: -10rem, para subir essa section, cobrindo a parte esquerda que estava em branco.

    Tours Section
    • Criar o grey da section-tours, colocar margin-top: -10rem para cobrir o branco da parte direita da section.feature.
    • Criar os cartões como components, para que possamos reutiliza-los na página.

    Story Section
    • Adicionada a tag figure, utilizada para adicionar uma imagem
    • Nessa seção, temos o texto que acompanha a volta da imagem em círculo.
      shape-outside: circle(50%, at 50% 50%);
      shape-outside: circle(radius at center horizontal center vertical);
      Esse shape-outside é utilizado somente para informar onde o texto deve flutuar ao redor do elemento.
    • Criado o círculo com o clip-path.
    • Visto esse elemento estar como float, utilizado o transform: tranlateX() para mover, ao invés de usar margin.

      • Background Video
    • Adicionado um elemento dentro da section que possui o mesmo tamanho dela e adicionado um vídeo dentro desse container.

    Book Section (Form area)
    • O formulário será um component, para poder ser utilizado em outras páginas, mas não a sua box inteira, visto ela ocupar um width muito grande, por isso será separado.
    • Foi utilizado um linear-gradient que irá começar com uma cor e então mudar para transparente, criando o efeito de corte na imagem do formulário.
    • Utilizada as classes de formulario, de quando clica em um input e ele não está ainda válido (para deixar a outline vermelha e trocar para verde quando for um nome ou e-mail válido).
    • Sibling Selector
      Foi utilizado o &__input:placeholder-shown + &__label, visto que precisamos selecionar o label, que é um sibling (irmão), utilizamos:
      +, esse é utilizado quando o sibling (tag) a selecionar é o próximo (a tag de baixo).
      ~, esse é utilizado caso haja algum outro sibling entre as duas tags.
    • Radio Buttons:
      Não se é possível aplicar style a esses buttons, então foram criados nossos botões.

    Footer

    Navigation Button (_navigation.scss) Checkbox Hack
    • 1st: create a checkbox that will be hidden later.
    • 2nd: have a label connected to that checkbox, which is where we click to check the box. This is going to be the navigation button.
    • 3rd: reveal the background as soon as the checkbox becomes checked.
    • We can use the checked pseudo class in CSS to style this.
    • Utilizado um background-image: radial-gradient(), visto que ela sai do meio de um elemento e vai para todas as direções.

    Organizando o botão
    • Foi criado um elemento span, com o ::after sendo a linha de baixo e o ::before a linha de cima.

    Modal-window ao clicar no Book now!
    • Adicionada após o footer.
    • Criado a box e o content.
    • Adicionado o Hyphenation, que é o adicionar o hífen automaticamente quando uma palavra não couber na linha.
      Sintaxe: hyphens: auto; e definir no html a língua que a página está, como por exempo, lang="en".
      Isso precisa de vários códigos para funcionar nos browsers atuais (pre-fixes), como -moz-hypens, etc.

    • Foi adicionada uma ID a classe popup, para utiliza-la nas anchors tag.
      1) Ao clicar no Book now, o elemento popup é passado para a URL, virando um target, visto estar no href de uma anchor tag (#popup).
      2) Utilizar o elemento &:target{} para dar styles ao .popup quando passar por esse status.
      3) Ao clicar no Book now, a classe popup vira um target, e com isso, visto termos &:target {opacity: 1; visibility: visible;}, ele irá alterar o opacity: 0 e visibility: hidden que estava no estado normal para esses do target e irá aparecer.
      4) Para fechar a box, utilizamos o botão criado.

      Botão de fechamento
      1) Adicionado: <a href="#section-tours" class="popup__close"> &times; </a> (times é o ícone de X)
      2) Ou seja, ao clicar nesse botão, o elemento #popup não mais irá ser o target, e portanto perderá os status de opacity: 1 e visibility: visible, voltando ao inicial de opacity: 0 e visibility: hidden.
    Sempre que for adicionar alguma animação, adicionar o começo dela na classe principal e então criar um acontecimento (:hover, :target) que irá puxar essa classe e trocar os styles.

    Trocar o estilo do texto selecionado
    • Adicionado no _home.scss:
      ::selection {
      background-color: $color-primary;
      color: $color-white;
      }

    Hover não funciona em mobile devices
    • Visto que os cards precisam de um hover para mostrarem o botão, adicionar que em determinado witdh o card não precisaria ser virado não adiantaria muito, visto termos um iPad Pro que é touch e tem um width grande.
    • Portanto, adicionar que caso o device não possua o efeito :hover, aplicar também os efeitos de não precisar :hover no card para ver as informações da parte de trás.
    • Exemplo:
      @media only screen and (max-width: 56.25em),
      only screen and (hover: none) {

      Onde então, caso não tenha a habilidade de hover, os efeitos serão aplicados.