404

404.markdown

404

Playing with ideas for 404 page. And I thought the Ryan could help me out a bit to make it more appealing for ladies :)

Forked from Richard Vyslouzil's Pen 404.

A Pen by Kai Smith on CodePen.

License.

index.html

<div class="pagenotfound">
  <div class="wrap">
    <div class="content">
      <h1>Oops, page was not found.</h1>
    </div>
  </div>
</div>

style.css

@import "compass/css3";

.pagenotfound {
	width: 100vw;
	height: 100vh;
	background: url(http://media2.giphy.com/media/258KoczzDzsbK/giphy.gif) no-repeat;
	background-size: cover;
  background-position: 50% 50%;
}

.wrap {
  width: 100%;
  height: 100%;
  background: rgba(black, 0.3);
}

.content {
  background: rgba(black, 0.3);
  margin: 0 auto;
  width: 96%;
  position: relative;
  top: 70%;
}

/**********************************
           BEAUTY STUFF
**********************************/

h1 {
  color: #BADA55;
  text-transform: uppercase;
  margin: 0;
  padding: 1em 0;
  text-align: center;
  text-shadow: 0 0 2px rgba(black, 0.8);
}