Cards

      Primeiro passo, criar as colunas que irão possuir os cards.
    • Adicionar dentro das colunas, uma div com a classe card.
    • Adicionar na classe card:
      .card {
      background-color: #ff4500;
      height: 50rem;
      transition: all .8s;

      &:hover {
      transform: rotateY(180deg);
      }
      }
    • Adicionar o persperctive.
    • Adicionar outra classe no card, a card_side. Essa contém os efeitos do card (background-color, color, height, etc).
    • Adiciconar as classes card__side__front e __back.
    • Adicionar position: relative ao card e position: absolute aos side, para que os cards fiquem um em cima do outro.
    • backface-visibility: hidden. Utilizado para não ficar aparecendo a outra parte do card, com texto ao contrário.
    • Adicionar as classes de estilo para cada card.
    • Adicionado dentro do card as classes card__picture, card__heading, card__details.
    • Adicionado o &--1, &--2 e &--3 dentro do card__picture, para definir as imagens de cada card.
    • Adicionadas as imagens como background, para podermos aplicar linear-gradient em cima dela.
    • Utilizada a propriedade background-blend-mode: screen;, para poder aplicar em cima da imagem com opacity (existem outras opções além do screen).
    • Ao adicionar a imagem, ela quebrou o border-radius, portanto adicionamos no &__side um overflow: hidden, com isso qualquer coisa do elemento que saia fora será escondido.
    • Adicionado o clip-path para poder passar a linha horizontal na imagem, também adicionado webkit para funcionar em outros browsers.

    • Adicionado o span dentro do __heading, para adicionar os textos.
    • Adicionado o box-decoration-break: clone, porque como essa linha é um texto, o padding estava sendo aplicado somente no começo e no final. Com essa propriedade, é aplicado em todas as boxes criadas por um elemento.

      • Back