A Pen by Ricky Eckhardt.

index.slim

.container
  header.logo COOL SHIT
.container
  nav
    ul
      li
        h1 WEB DESIGN
        ul
          li
            a href="#" 
              time 30
              | How To Setup Node.js 
          li
            a href="#" 
              time 11
              | Slim vs. Haml
          li
            a href="#" 
              time 11
              | Get Sassy Now
      li
        h1 TYPOGRAPHY
        ul
          li
            a href="#" 
              time 05
              | No More Than Three 
          li
            a href="#" 
              time 02
              | Font Awesome Guide 
      li
        h1 DESIGN
        ul
          li
            a href="#" 
              time 24
              | Color Basics
          li
            a href="#" 
              time 22
              | To Much Color?
          li
            a href="#" 
              time 13
              | Sassy Color
          li
            a href="#" 
              time 02
              | Contrast is King
  main
    .fullwidth
      a href="#"
        img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/1-8.jpg"
    .halfwidth
      a href="#"
        img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/1-3.jpg"
    .halfwidth
      a href="#"
        img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/1-7.jpg"
    .fullwidth
      a href="#"
        img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/1-5.jpg"
    
  
    

Layout-Sketch-.markdown

Layout Sketch

Layout based on magazine table of contents. Just sketching the idea out.

A Pen by Ricky Eckhardt on CodePen.

License.

style.sass

@import url(http://fonts.googleapis.com/css?family=Oswald:700)
@import url(http://fonts.googleapis.com/css?family=Lato:300,400)
@import url(http://fonts.googleapis.com/css?family=PT+Sans)

*
  margin: 0
  padding: 0

body
  font-family: 'PT Sans', sans-serif
  font-size: 1.2em
  color: rgba(0,0,0,.8)
    
a
  text-decoration: none
  color: rgba(0,0,0,.8)
    
a:hover
  color: rgba(41, 128, 185,1.0)
  
h1  
  font-family: 'Lato', sans-serif
  font-weight: 300

.container
  display: flex
  max-width: 1000px
  margin: 0 auto
  
.logo
  flex: 1
  text-align: right
  margin-top: 50px
  font-family: 'Oswald', sans-serif
  font-size: 4em
  font-weight: 700
  
nav
  flex: 1
  
  & ul li
    list-style-type: none
    margin: 50px 0
  
    & time
      font-family: inherit
      font-weight: 300
      margin-right: 1em
      
    & ul li
      margin: 10px 0
      
main
  flex: 3
  margin-bottom: 4em
  
section
  width: 100%
    
.fullwidth
  position: relative
  width: 100%
  height: 300px
  background-color: blue
  clear: both
  overflow: hidden
  
.halfwidth
  position: relative
  float: left
  width: 50%
  height: 400px
  background-color: pink  
    
img
  margin: 0
  padding: 0
  border: 0
  width: 100%
    
.fullwidth:after
  content: "12"
  position: absolute
  display: block
  bottom: 20px
  left: 20px
  height: 50px
  width: 50px
  background-color: white
  border-radius: 50%
  line-height: 50px
  text-align: center
  
.halfwidth:after
  content: "12"
  position: absolute
  display: block
  bottom: 20px
  right: 20px
  height: 50px
  width: 50px
  background-color: white
  border-radius: 50%
  line-height: 50px
  text-align: center
    
.halfwidth:nth-child(3):after
  top: 20px