If you are not redirected automatically, follow this link to example.
www.000webhost.com
@import url(https://fonts.googleapis.com/css?family=Lato:400,700|Bitter:400,700,400italic); $algrey: rgba(0,0,0,.1); $lgrey: #e6e6e6; $mgrey: #999; $dgrey: #4c4e50; $primary: #007079; $background: #fafafa; $serif: "Bitter", Georgia, serif; $sansSerif: "Lato", sans-serif; * { box-sizing: border-box; } body { color: $dgrey; font-family: $sansSerif; background-color: $background; } ul { padding-left: 0; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .ir { display: block; width: 1px; height: 1px; text-indent: 100%; white-space: nowrap; overflow: hidden; } h1, .h1, h2, .h2 { text-align: center; } h1, .h1 { font-size: 3.8em; font-weight: bold; font-family: $sansSerif; margin-top: 0; margin-bottom: 0; } h2, .h2 { color: $mgrey; font-size: 1.3em; font-weight: normal; font-family: $serif; margin-top: 0; } h3, .h3 { font-family: $serif; font-size: 1.6em; line-height: 1.2em; margin-bottom: .2em; } p { font-size: 1em; line-height: 1.4em; margin: .6em 0 1em; } a { color: $dgrey; &:hover { color: $primary; } &:active { color: darken($primary, 5); } } .content-wrapper { width: 100%; padding: 0 5em; & > div { max-width: 40em; margin: 0 auto; } } #nav { position: fixed; top: 0; z-index: 1; background-color: $lgrey; padding: 5em 0; header, ul { width: 100%; } header { margin-bottom: 2em; } ul { font-size: 1.3em; text-align: center; margin-bottom: 0; } li { display: inline-block; list-style: none; padding: 0; margin-right: .25em; &:last-child { margin-right: 0; } } a { display: block; width: 2em; height: 2em; color: white; text-decoration: none; text-align: center; line-height: 2em; border-radius: 999em; background-color: $dgrey; &:hover { color: white; background-color: $primary; } &:active { color: white; background-color: darken($primary, 5); } } i { font-size: .8em; } } #navSecondary { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; background-color: $dgrey; .h1 { color: $lgrey; font-size: 1.4em; text-decoration: none; } } #main { position: relative; z-index: 2; padding-top: 4em; background-color: $background; margin-top: 22em; } article { position: relative; padding-left: 5em; padding-bottom: 4em; border-bottom: solid .5em $algrey; margin-bottom: 4em; &:last-child { border-bottom: 0; padding-bottom: 0; } h3 { margin-top: 0; } h3 a { text-decoration: none; } } article aside { display: block; position: absolute; top: .25em; left: .5em; width: 3em; .thumb { display: block!important; overflow: hidden; width: 3em!important; height: 3em!important; font-family: FontAwesome; content: attr(data-type); color: white; text-align: center; line-height: 3em!important; background-color: $primary; border-radius: 4em; box-shadow: 0 0 0 .5em $algrey; margin-bottom: 1em; img { display: block; width: 100%; height: auto; } } a.thumb { &:hover { box-shadow: 0 0 0 .5em lighten($algrey, 25); } &:active { box-shadow: 0 0 0 .5em darken($algrey, 25); } } time { display: block; color: $mgrey; font-size: .8em; font-weight: bold; text-align: center; } } article footer { margin-top: 1em; a { color: $dgrey; font-weight: bold; font-family: $serif; text-decoration: none; } i { font-weight: normal; margin-right: .25em; } } #footer { ul { width: 50%; float: left; } li { display: inline-block; margin-right: .25em; &:last-child { margin-right: 0; } } p { text-align: right; } a { font-size: .9em; text-decoration: none; } }