A Pen by James Grubb.

index.html

<div class="btn">Start Learning to code here</div>
<div class="page-width">
  <article class="col-1-3"><img src="http://drive.google.com/uc?export=view&id=0B9p2-Ypr2z0bRHVBT1kxdnlPczg" /></article><aside class="col-1-3"><h1 class="heading">Coding made simple <em>Learn to code with The Times</em></h1></aside><figure class="col-1-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque culpa, maiores architecto quos, iure fugit.</p></figure>
  <div class="illustration">
    <div class="cube">
            <div class="face one"></div>
            <div class="face two"></div>
            <div class="face three"></div>
            <div class="face four"></div>
            <div class="face five"></div>
            <div class="face six"></div>
        </div>
  </div>
</div>

script.js

//var element = $('.btn');
element.velocity('callout.shake');

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Chivo|Cousine:400,700);

$orange: orange;
$grey: grey;
@mixin round($width , $height:$width){
  width: $width;
  height: $height;
  border-radius: 50%;
};

%page-width{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: auto;
  background: $orange;
};

%code{
     vertical-align: middle;
    display: inline-block;
    margin:5px;
    font: 12px/10px Chivo, sans-serif;
}

figure{
  display: block;
  margin: 0;
  padding: 0;
}


*{
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

* {
  @include box-sizing(border-box);
}


body{
    font-family: Georgia, serif;
    background-color: $grey;
    color: white;
}
.btn{
  text-align: center;
  display: inline-block;
  margin: 18px;
  padding: 10px;
  background: orange;
  border-radius: 3px;
  text-transform: uppercase;
  color: lighten($orange , 20% );
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  &:before{
    position: absolute;
    content: '▲';
font-size: 10px;
    padding: 3px;
    @include round(20px);
    background: $orange;
    text-align: center;
    top:-12px;
    right:45%;
    z-index:0;
    @include round(20px);
  }
  
}

.page-width{
  @extend %page-width;
  padding: 10px;
  &:after{
    content: "";
  display: table;
  clear: both;
  }
}

[class*="col-"]{
  float: left;
}


.col-1-3{
  width: 33.333333%;
  background: $grey;
  padding: 20px;
}

img{max-width: 100%;
height: auto;}

h1.heading{
    font: 30px/28px 'Georgia', serif;
    color: white;
    letter-spacing: -0.04em;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  em{
    font-weight: normal;
    font-style: italic;  
  }

p  {
    font: 16px/20px 'Georgia', serif;
    color: #2b2a29;}

suACy.markdown

suACy

A Pen by James Grubb on CodePen.

License.