CodePen

HTML

            
              <div class="tasks">
  <header>
    <a href="#" class="btn left"><span class="icon btn-add add-task"></span></a>
    <h1>Task</h1>
    <a href="#" class="btn right"><span class="icon btn-trash"></span></a>
  </header>
  <section>
  <ul class="all-tasks">
    <li><a href="#" class="task"><span class="checkbox"></span>Lorem ipsum dolor</a></li>
    <li><a href="#" class="task"><span class="checkbox"></span>Aliquam tincidunt mauris eu risus.</a></li>
    <li><a href="#" class="task"><span class="checkbox"></span>Vestibulum auctor dapibus neque.</a></li>
  </ul>  
    <div class="form"><a href="#" class="add-task"></a><form method="post"><input type="text" name="" class="add" placeholder="Type a new task" /></form> 
    </div>
  </section>
</div>

            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
html { width: 100%; height: 100%; overflow: hidden; @include background-image(radial-gradient(50% 100%, ellipse cover, rgba(61,110,178,.2) 50%,rgba(28,45,83,0) 100%), radial-gradient(100% 10%, ellipse cover, rgba(185,75,12,.6) 20%,rgba(72,154,50,.3) 80%), linear-gradient(left top, rgba(71,94,173,1) 1%,rgba(174,132,57,1) 50%,rgba(29,37,65,1) 100%)); }
body {
    
}


.left { float:left; }
.right { float: right; }
a { text-decoration: none; color: #555;
  &:hover { color: #000; }
}

.tasks {
  border-radius: 5px 5px 2px 2px;
  width: 300px;
  margin: 50px auto 0;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10px;
    right: 10px;
    background: #eeeeee;
    display: block;
    height: 5px;
    z-index: -6px;
    border-radius: 0 0 2px 2px;
    box-shadow:  0 0 5px rgba(0,0,0,.5);
  }
  &:after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 5px;
    right: 5px;
    background: #eeeeee;
    display: block;
    height: 5px;
    z-index: -5px;
    border-radius: 0 0 2px 2px;
    box-shadow:  0 0 5px rgba(0,0,0,.5);
  }
  .icon { background: url(http://s.cdpn.io/6035/task_sprite.png) no-repeat; display: inline-block; 
  }
  header {
    background: linear-gradient(#b56368, #ac535b);  
    height: 40px;
    border-radius: 5px 5px 0 0;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 0 5px rgba(0,0,0,.3);
    border: 1px solid #6f212f;
    border-bottom: 2px solid #6f212f;
    text-align: center;
  }
  h1 {
    font-family: ReklameScript-RegularDEMO; 
    color: #fad2d4;
    text-shadow: 0 0 4px rgba(111,33,46,0.75), -1px -1px 1px rgba(255,255,255,.1);
    font-weight: 300;
    display: inline-block;
    margin: 5px 0 0; padding: 0;
    font-size: 24px;
    
  }
  .btn {
    display: inline-block;
    border-radius: 3px;
    background: linear-gradient(#b7676b, #ac535b);
    border: 1px solid #6f212f;
    padding: 4px 4px 3px;
    margin: 7px 8px;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 2px 2px rgba(0,0,0,0.15);
    line-height: 1;
    vertical-align: sub;
    &:hover {
      background: linear-gradient(#b7676b, #994a51);
    }
    &:active {
      box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
      background: #863f45;
    }
  }
  .btn-add { 
    width: 15px; 
    height: 15px;
    background-position: -1px -1px;
  }
  .btn-trash {
    width: 15px; 
    height: 15px;
    background-position: -19px -2px;
  }
  section {
    background: #f8f7f7;
    box-shadow:  0 0 5px rgba(0,0,0,.3);
    position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 35px;
        width: 1px;
        background: rgba(224,13,48,.1);
        z-index: 2;
      }
    z-index: 1;
    border-radius: 0 0 2px 2px;
    ul {
      position: relative;
      margin: 0; padding: 10px 0;
      list-style: none;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
    }
    li {
      font-size: 13px;
      border-top: 1px solid #ccc;
      padding: 0 10px;
      a {
        line-height: 30px;
        display: block;
      }  
      .complete {
        color: #999;
        text-decoration: line-through;
      }
      .checkbox {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        box-shadow: inset 0 1px 1px rgba(100,100,100,0.5), 0 1px 1px rgba(255,255,255,1);
        margin-right: 20px;
        position: relative;
        display: inline-block;
        top: 5px;
        @include background-image(linear-gradient(top, rgba(203,196,197,1) 0%,rgba(226,222,222,1) 100%));
      }
      .checked {
        background: url(http://s.cdpn.io/6035/task_sprite.png) no-repeat -2px -21px;
      }
      
    }
    .form { padding: 0 10px 10px; }
    form { display: inline-block; }
      .add {
        color: #333; 
        background: transparent;
        border: none;
        outline: none;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        width: 230px;
        font-size: 13px;
      }
      .add-task {
        width: 17px;
        height: 17px;
        margin-right: 20px;
        position: relative;
        display: inline-block;
        top: 5px;
        background: url(http://s.cdpn.io/6035/task_sprite.png) no-repeat -23px -21px;
      }
  }
}

::-webkit-input-placeholder {
   color: #539aac;
}

:-moz-placeholder {  
   color: #539aac;  
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var a = { 
  init: function() {
    a.sitecalls();
  },
  sitecalls: function() {
    $('a').on('click',function(e){
      e.preventDefault(); 
    });
    $(document).on('click','.task',function(){
      $(this).toggleClass('complete').find('.checkbox').toggleClass('checked');
    });
    $('.add-task').on('click',function(){
      var newTask = $('.add');
      if (newTask.val()){
        $('.all-tasks').append($('<li />').append($('<a />').attr('href','#').addClass('task').append($('<span />').addClass('checkbox')).append($('<span />').html(newTask.val()))));
        newTask.val('');
      }
    });
  }
};

a.init();

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................