octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <div class='blurImg'>
  <div style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
  <div class='blur' style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
</div>
<header>
  <div>
    <h1>
      Medium
    </h1>
    <p>
      Everyone’s stories and ideas
    </p>
    <a href='https://medium.com/' title='Medium'>Learn more</a>
  </div>
  <nav role='navigation'>
    <ul>
      <li>
        <a class='active' href='#'>Reading List</a>
      </li>
      <li>
        <a href='#'>Bookmarks</a>
      </li>
      <li>
        <a href='#'>Top 100</a>
      </li>
    </ul>
  </nav>
</header>
<div class='container'>
  <div></div>
</div>
            
          
!

CSS

            
              @import "nib"

body
  font-size 14px
  font-family Sans-Serif

*
  box-sizing border-box

a
  text-decoration none

.blurImg
  position relative
  width 100%
  height 440px
  z-index -1
  top 0
  left 0
  & > div
    position fixed
    width 100%
    height 440px
    background-repeat no-repeat
    background-size cover
    background-position center center

.blur
  opacity 0

header
  z-index 1
  position absolute
  top 0
  width 100%
  padding 0px 20px
  & > div
    max-width 600px
    margin 0 auto
    padding-top 150px
    height 380px
    text-align center
    color White
    a
      font-size 0.8em
      letter-spacing 0.08em
      color rgba(255,255,255,0.85)
      line-height 30px
      padding 7px 14px
      border 1px solid rgba(255,255,255,0.3)
      border-radius 2em
      transition all 0.3s ease
      &:hover
        background white
        color Gray
  p
    font-size 1.5em
    margin-bottom 0.7em
    font-family Times New Roman

h1
  font-weight 800
  font-size 3.4em
  margin-bottom 0.2em

nav
  max-width 600px
  margin 0 auto
  height 60px
  border-top 1px rgba(255,255,255,0.35) solid
  ul
    li
      display inline-block
      margin-right 20px
      a
        font-weight 800
        font-size 11px
        text-transform uppercase
        letter-spacing .2em
        color rgba(255,255,255,0.5)
        transition color 0.3s linear
        line-height 60px
        display block
        &.active
          box-shadow 0px -1px 0px white

nav ul li a.active, nav ul li a:hover
  color white

.container
  height 1300px
  background white
  z-index 1
  padding 0px 20px
  div
    max-width 600px
    margin 0 auto
    padding-top 40px


            
          
!

JS

            
              #Image Credit - https://medium.com/

#https://github.com/andreasstorm

$(window).scroll ->
  oVal = ($(window).scrollTop() / 240)
  $(".blur").css "opacity", oVal
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console