CodePen

HTML

            
              <header>
  <h1><span>An app you didn't know you needed</span> SIMPLIFIED.</h1>
  
  <button class="invite">Request Invite</button>
</header>

<div class="wrap">
  <div class="grid col3"><h2>Fast</h2>
    <p>A revolutionary way to enhance your
    day-to-day life, quickly.</p>
  </div>
  
  <div class="grid col3"><h2>Easy</h2>
    <p>Everything you do, do it with gracious ease. Easily.</p>
  </div>
  <div class="grid col3"><h2>Reliable</h2>
    <p>
      Reliably rely on our service that's built on reliability.
    </p>
  </div>
</div>

<div class="modal">
  <h3>Ha! You don't get an invite. You think we'd let you use our service that easily?</h3>
  
  <p>
    Just kidding. I think these startups are awesome and I'd love to launch my own one day. It's still fun to pick on them, though.
  </p>
  <p>
    If you found this amusing please <a href="http://www.mattboldt.com">see my blog</a> where I do other cool things.
  </p>
  <small><a href="#" class="x">exit</a></small>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400);


body{
  margin:0;
  padding:0;
  font-family:"Alegreya Sans";
}
p{
  font-family:"Alegreya Sans";
  font-weight:200;
}
header{
  background-image:
    -webkit-linear-gradient(top, rgba(255,255,255,.8) 20%, rgba(0,0,0,0.5) 80%),
url(http://i.imgur.com/HS5coix.jpg);
background-image:
    -moz-linear-gradient(top, rgba(255,255,255,.8) 20%, rgba(0,0,0,0.5) 80%),
url(http://i.imgur.com/HS5coix.jpg);
background-image:
    -o-linear-gradient(top, rgba(255,255,255,.8) 20%, rgba(0,0,0,0.5) 80%),
url(http://i.imgur.com/HS5coix.jpg);
background-image:
    linear-gradient(top, rgba(255,255,255,.8) 20%, rgba(0,0,0,0.5) 80%),
url(http://i.imgur.com/HS5coix.jpg);
  background-size:100% 100%;
  text-align:center;
  h1{
    margin:0;
    padding:1em 0 .5em;
    font-size:7em;
    color:#fff;
    font-weight:300;
    text-align:center;
    span{
      display:block;
      font-size:.5em;

    font-weight:300;
      letter-spacing:-2px;
      color:#222;
    }
  }
  button{
    display:inline-block;
    margin:0 0 2em;
    padding:.5em 1em;
    font-size:1.5em;
    color:#fff;
    font-weight:300;
    background:none;
    border:#fff 3px solid;
    border-radius:3px;
    appearance:none;
    transition:all .25s;
    &:hover{
      background:#fff;
      color:#111;
    }
  }
}

.wrap{
  margin:1em auto;
  max-width:750px;
}

.grid{
  display:inline-block;
  vertical-align:top;
  h2{
    text-align:center;
  }
  p{
    font-size:1.5em;
  }
}
.col3{
  width:30%;
  padding:0 1%;
}

.modal{
  padding:2em;
  width:50%;
  font-size:1.25em;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#fff;
  border-radius:1em;
  box-shadow:rgba(0,0,0,0.8) 0px 0px 50px;
  opacity:0;
  display:none;
  transition:all .25s ease-in;
}
  .modal--init{
  display:block;
    opacity:1;
  }
  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
$(".invite").click(function(e){
  e.preventDefault();
  $(".modal").addClass("modal--init");
});

$(".x").click(function(e){
  e.preventDefault();
  $(".modal").removeClass("modal--init");
});
  

  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................