My 404 page

index.html

<div class="code-area">
  <span style="color: #777;font-style:italic;">
    // 404 page not found.
  </span>
  <span>
    <span style="color:#d65562;">
      if
    </span>
	  (<span style="color:#4ca8ef;">!</span><span style="font-style: italic;color:#bdbdbd;">found</span>)
    {
  </span>
  <span>
    <span style="padding-left: 15px;color:#2796ec">
       <i style="width: 10px;display:inline-block"></i>throw
    </span>
    <span>
      (<span style="color: #a6a61f">"(╯°□°)╯︵ ┻━┻"</span>);
    </span>
	  <span style="display:block">}</span>
	  <span style="color: #777;font-style:italic;">
		  // <a href="/">Go home!</a>
	  </span>
  </span>
</div>

my-404-page.markdown

My 404 page

Have you ever felt like flipping a table (╯°□°)╯︵ ┻━┻ when you land on a 404 page? Me too!

A Pen by Kostis on CodePen.

License.

script.js

// Inspired by some other person's idea, but repurposed and reimplemented as a 404 page for my personal website.
// See it live here:
// https://themisec.com/this-page-doesnt-exist

style.css

/* Styles of the 404 page of my website. */

body {
    background: #081421;
    color: #d3d7de;
    font-family: "Courier new";
    font-size: 18px;
    line-height: 1.5em;
	cursor: default;
}

a {
	color: #fff;
}

.code-area {
    position: absolute;
    width: 320px;
	min-width: 320px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.code-area > span {
    display: block;
}

@media screen and (max-width: 320px) {
    .code-area {
		font-size: 5vw;
		min-width: auto;
        width: 95%;
		margin: auto;
		padding: 5px;
		padding-left: 10px;
		line-height: 6.5vw;
    }
}