A Pen by Brett Sauers.

CfGej.markdown

CfGej

A Pen by Brett Sauers on CodePen.

License.

index.html

<header>
  <h1>nightcry<b>7</b></h1>
  <h2><b>don't ask</b> what it means, I just thought it sounded <b>cool</b></h2>
</header>
<section>
  <div id="view">
    <div id="holder">
      <div class="imgblk red"><h1>5</h1></div>
      <div class="imgblk blue"><h1>1</h1></div>
      <div class="imgblk green"><h1>2</h1></div>
      <div class="imgblk orange"><h1>3</h1></div>
      <div class="imgblk purple"><h1>4</h1></div>
    </div>
  </div>
</section>

script.js

=

style.css

body{
  background-color: #39b39e;
}
header{
  padding:30px;
  box-sizing:border-box;
}
h1 {
  font-size: 10em;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  color:#fff;
  text-align:center;
}
h2 {
  font-size: 3em;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  color:#fff;
  text-align:center;
}
h1 b,h2 b{
  font-weight:400;
}


#view{
  width:100%;
  height:300px;
  background-color:#222;
  overflow:hidden;
}
#holder{
  position:relative;
  width:200%;
  left:-100%;
}
.imgblk{
  height:500px;
  float:left;
  text-align:center;
  font-size:100px;
}
.red{background-color:red;}
.blue{background-color:blue;}
.green{background-color:green;}
.orange{background-color:orange;}
.purple{background-color:purple;}
.yellow{background-color:yellow;}