404 page

404-page.markdown

404 page

404 page

A Pen by Alberto Jerez on CodePen.

License.

index.html

<div class="text-wrapper">
    <div class="title" data-content="404">
        404
    </div>

    <div class="subtitle" data-content="Oops, the page you're looking for doesn't exist">
        Oops, the page you're looking for doesn't exist.
    </div>

    <div class="buttons">
        <a class="button" href="http://www.ajerez.es">Go to homepage</a>
    </div>
</div>

style.scss

@import url(https://fonts.googleapis.com/css?family=Raleway:300);

$color1: white;
$color2: #342643;
$color3: #1FA9D6;

*, *:before, *:after {
  box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    background: url(https://i.imgur.com/CZdBKjO.gif) no-repeat center center fixed; 
    background-size: cover;
    font-family: 'Raleway', sans-serif;
    background-color: $color2; 
    height: 100%;
}

.text-wrapper {
    height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.title {
    font-size: 9em;
    font-weight: 700;
    color: $color1;
    position:relative;
}

.subtitle {
    font-size: 40px;
    font-weight: 700;
    color: $color1;
    position:relative;
}

.buttons {
    margin: 30px;
    
    a.button {
        background-color: $color2;
        font-weight: 700;
        border: 2px solid $color1;
        text-decoration: none;
        padding: 15px;
        text-transform: uppercase;
        color: $color1;
        border-radius: 26px;
        transition: all 0.2s ease-in-out;
        
        &:hover {
            background-color: lighten($color2, 10%);
            color: white;
            transition: all 0.2s ease-in-out;
        }
    }

    
}


// Glitch animation from https://codepen.io/lbebber/pen/ypgql
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(200)+px,9999px,random(200)+px,0);
    }
  }
}
.subtitle:after, .title:after{
  content:attr(data-content);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:$color1;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(200)+px,9999px,random(200)+px,0);
    }
  }
}
.subtitle:before, .title:before{
  content:attr(data-content);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:$color1;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}