A CodePen by Alex Reynish.

index.html

<div class="ad-outer">
  <div class="ad-upper"></div>
  <div class="ad-inner">
  <h1>Insane</h1>
<p>Bender, I didn't know you liked cooking. That's so cute. I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! It doesn't look so shiny to me. Now, now. Perfectly symmetrical violence never solved anything. Large bet on myself in round one. Bender, you risked your life to save me!</p>
<h2>Devil's Hands are Idle Playthings</h2>
<p>Nay, I respect and admire Harold Zoid too much to beat him to death with his own Oscar. Hey, whatcha watching? Ummm&hellip;to eBay? Is that a cooking show? Take me to your leader! Can we have Bender Burgers again?</p>
<ul>
<li>I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'!</li>
<li>But, like most politicians, he promised more than he could deliver.</li>
<li>Hey, whatcha watching?</li>
</ul>
  </div>
</div>

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(http://fonts.googleapis.com/css?family=Tauri);

$t: rgba(0,0,0,0);

$box: #000;
$bg: rgb(227,	241,	249);

$s1: 2.5em;
$s2: 3.5em;
$s3: 4.5em;


@function trans($sz) {
  @return $b1 $sz
}

@function block($sz) {
  @return #000 $sz
}


$db: hsla(219, 43%, 48%, 1);
$mb: hsla(203, 46%, 76%, 1);
$lb: hsla(201, 65%, 93%, 1);

.grad {
  width: 111%;
  margin-top: -.3em;
  margin-left: -6%;
  border: .3em solid #000;
  @include background (
    linear-gradient(
      $db 40%, 
      block(40.1%),
      block(46.1%),
      $mb 46.2%,
      $mb 70%,
      block(70.1%),
      block(76.1%),
      #fff 76.2%//,
      //$lb 94%,
      //block(94.1%),
      //block(100%)
    )
    $bg
  );
  //border-bottom: 1em solid #000;
}


// Guff

body {
  background: rgb(226,	241,	249);
  line-height: 2.25em;
  font-family: 'Tauri', sans-serif;
  text-align: justify;
}

.ad-outer {
  width: 32em;
  margin: 2em auto;
  background-color: #eef;
  border: .25em solid #000;
  @include box-shadow(.8em .8em #fff, 1em 1em #000, -.8em .8em #fff, -1em 1em #000);
  @media screen and (max-width: 48em) {
    width: 80%;
  }
}

.ad-upper {
  height: 4em;
  @extend .grad;
}

.ad-inner {
  min-height: 18em;
  padding: 0 2em 2em;
  //background-color: ;
}

h1, h2 {
 font-family: 'Abril Fatface', cursive;
}

h1{
font-size:4em;
}