Skip to content

Instantly share code, notes, and snippets.

@spmsupun

spmsupun/hacker-themed-error-page.markdown

Created July 5, 2018 12:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save spmsupun/d49a9a1ccd05db5369648972bbfa030c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save spmsupun/d49a9a1ccd05db5369648972bbfa030c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. spmsupun revised this gist Jul 5, 2018. No changes.
  2. spmsupun created this gist Jul 5, 2018.
    7 changes: 7 additions & 0 deletions hacker-themed-error-page.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Hacker themed error page
    ------------------------


    A [Pen](https://codepen.io/spmsupun/pen/OEYaWO) by [Supun Praneeth](https://codepen.io/spmsupun) on [CodePen](https://codepen.io).

    [License](https://codepen.io/spmsupun/pen/OEYaWO/license).
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <div class="overlay"></div>
    <div class="terminal">
    <h1>Error <span class="errorcode">404</span></h1>
    <p class="output">The page you are looking for might have been removed, had its name changed or is temporarily unavailable</ü>
    <p class="output">Please try <a href="#1">this link</a> or <a href="#2">this link</a></p>
    <p class="output">Good luck</p>
    </div>
    111 changes: 111 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    @import 'https://fonts.googleapis.com/css?family=Inconsolata';

    html {
    min-height: 100%;
    }

    body {
    box-sizing: border-box;
    height: 100%;
    background-color: #000000;
    background-image: radial-gradient(#11581E, #041607);
    font-family: 'Inconsolata', Helvetica, sans-serif;
    font-size: 1.5rem;
    color: rgba(128, 255, 128, 0.8);
    text-shadow:
    0 0 1ex rgba(51, 255, 51, 1),
    0 0 2px rgba(255, 255, 255, 0.8);
    }

    .overlay {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background:
    repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0) 100%);
    background-size: auto 4px;
    z-index: 99;
    }

    .overlay::before {
    content: "";
    pointer-events: none;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
    0deg,
    transparent 0%,
    rgba(32, 128, 32, 0.2) 2%,
    rgba(32, 128, 32, 0.8) 3%,
    rgba(32, 128, 32, 0.2) 3%,
    transparent 100%);
    background-repeat: no-repeat;
    animation: scan 7.5s linear 0s infinite;
    }

    @keyframes scan {
    0% { background-position: 0 -100vh; }
    35%, 100% { background-position: 0 100vh; }
    }

    .terminal {
    box-sizing: inherit;
    position: absolute;
    height: 100%;
    width: 1000px;
    max-width: 100%;
    padding: 4rem;
    text-transform: uppercase;
    }

    .output {
    color: rgba(128, 255, 128, 0.8);
    text-shadow:
    0 0 1px rgba(51, 255, 51, 0.4),
    0 0 2px rgba(255, 255, 255, 0.8);
    }

    .output::before {
    content: "> ";
    }

    /*
    .input {
    color: rgba(192, 255, 192, 0.8);
    text-shadow:
    0 0 1px rgba(51, 255, 51, 0.4),
    0 0 2px rgba(255, 255, 255, 0.8);
    }
    .input::before {
    content: "$ ";
    }
    */

    a {
    color: #fff;
    text-decoration: none;
    }

    a::before {
    content: "[";
    }

    a::after {
    content: "]";
    }

    .errorcode {
    color: white;
    }