Typed.js 404 Page

index.html

<div class="hero">
  <div class="inner-text">
    <p class="p1">404:</p>
    <p class="p2">Error</p>
  </div>
</div>

script.js

$(function() {
  $(".p2").typed({
    strings: ["Page not found", "try again", "nothin' here"],
    typeSpeed: 50,
    backSpeed: 10,
    backDelay: 2000,
    showCursor: true,
    loop: true
  });
});

$('.hero-down').mousedown(function() {
  TweenMax.fromTo('.btn-react', 0.25, {
    opacity: 0,
    scale: 0
  }, {
    opacity: 0.25,
    scale: 1,
    onComplete: function() {
      TweenMax.to('.btn-react', 0.25, {
        opacity: 0,
        scale: 0
      });
    }
  });
});

// smooth scroll to div
$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>

style.scss

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto';
  text-align: center;
  color: #f5f5f5;
  animation:fadeIn 1s ease-in;
}

.hero {
  background: url('https://howtomakefilm.com/wp-content/uploads/2018/06/How-to-Write-a-Movie-Script-3.jpg') no-repeat center;
  background-size: cover;
  background-color: rgba(0,0,0,0.50);
  background-blend-mode: multiply;
  height: 100%;
  width: 100%;
}

.inner-text {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vmin;
  @media only screen and (min-width: 320px) {
    padding-left: 15px;
    padding-right: 15px; 
  }
  @media only screen and (min-width: 400px) {
    padding-left: 40px;
    padding-right: 40px; 
  }
  @media only screen and (min-width: 680px) {
    font-size: 75px;
  }
  @media only screen and (min-width: 950px) {
    font-size: 100px;
  }
}

.p1 {
  display: inline-block;
  font-size: 1em;
  font-weight: 900;
  marign: 0;
  line-height: 1;
  @media only screen and (max-width: 465px) {
    display: block;
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.p2 {
  display: inline-block;
  font-size: 1em;
  font-weight: 100;
  marign: 0;
  line-height: 1;
  color: #20b2aa;
  @media only screen and (max-width: 465px) {
    position: relative;
    top: 0.6em;
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

typed-js-404-page.markdown

Typed.js 404 Page

A Pen by Conner on CodePen.

License.