S3 intro

index.pug

.heading
  .line S3
  .line 
    .text manager
  

s3-intro.markdown

S3 intro

A Pen by Lukasz Celitan on CodePen.

License.

style.scss

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700');

$brand-a: #4a156b;
$brand-b: white;
$background: rgba(249, 115, 21, 1);
$font-body: 'Roboto';
$font-heading: 'Audiowide', cursive;

.is-hidden {
 display: none; 
}

html{
  box-sizing: border-box;
}

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

html,body{
  height: 100%;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  background: $background;
  font-family: $font-heading;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
}

@mixin animate-text {
  animation-name: reveal-text;
  animation-duration: 540ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transform: translateY(100%);
}

.text {
  font-size: 2.1rem;
  margin-top: -40px;
  font-family: $font-body;
}

.heading {
  > .line {
    font-size: 6rem;
    weight: 400;
    line-height: 1em;
    font-family: $font-heading;
    @include animate-text;
    animation-delay: 200ms;
    &:nth-child(2n){
      animation-delay: 400ms;
    }
    &:nth-child(3n){
      animation-delay: 500ms;
    }
    &:last-child{
      animation-delay: 550ms;
      &::after {
        content: '';
        display: block;
        background-color: $brand-b;
        height: 2px;
        width: 120px;
        margin-top: -16px;
        margin-left: 6px;
      }
    }
  }
}

@keyframes reveal-text {
  to {
     clip-path: polygon(0 0, 100% 0, 100% 140%, 0 140%);
     transform: translateY(0);
  }
}