TripleSkins 404

index.jade

link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800")
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css")

.app
  .overlay
    .wrapper
      i.icon.fa.fa-frown-o
      h1.title TripleSkins is undergoing improvements.
      p.byline We'll be back soon. We #[b promise].
      .social
        a(href="#") #[i.fa.fa-twitter]
        a(href="#") #[i.fa.fa-youtube-play]

script.babel

(function($) {
  $(function() {
    $('.app').tubular({
      videoId: 'OczqXW30hNg'
    })
  });
}(jQuery));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.lukej.me/jquery.tubular/1.0.1/jquery.tubular.1.0.js"></script>

style.scss

$gray: #222222;
$red: #e74c3c;
$gold: #F9AE42;

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 666;
  background: rgba(#000, 0.9);
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  z-index: 999;
}

.icon {
  font-size: 15em !important;
  color: $red;
}

.title {
  color: $red;
}

.byline {
  color: $red;
  font-size: 1.3em;
  font-weight: 300;
}

.social {
  position: absolute;
  bottom: 15px;
  right: 15px;
  > a {
    color: $red;
    margin: 0 8px;
    font-size: 1.5em;
    text-decoration: none;
    
    &:hover {
      color: darken($red, 5%);
    }
  }
}

TripleSkins 404.markdown

TripleSkins 404

A Pen by Sean Wilson on CodePen.

License.