html(lang="es")
  head
    meta(charset="UTF-8")
    title Vertical timeline intervals
  body
    .container
      ul
        li
          span
          div
            .title Codify
            .info Let's make coolest things in css
            .type Presentation
          |  
          span.number
            span 10:00
            |  
            span 12:00
        li
          div
            span
            .title Codify
            .info Let's make coolest things in javascript
            .type Presentation
          |  
          span.number
            span 13:00
            |  
            span 14:00
        li
          div
            span
            .title Codify
            .info Let's make coolest things in css
            .type Review
          |  
          span.number
            span 15:00
            |  
            span 17:45
  

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700')

body
  height: 100vh
  font-family: 'Open Sans', sans-serif
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bea2e7+0,86b7e7+100
  background: #bea2e7
  /* Old browsers
  background: -moz-linear-gradient(top, #bea2e7 0%, #86b7e7 100%)
  /* FF3.6-15
  background: -webkit-linear-gradient(top, #bea2e7 0%, #86b7e7 100%)
  /* Chrome10-25,Safari5.1-6
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%)
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea2e7', endColorstr='#86b7e7',GradientType=0 )
  /* IE6-9

.container
  ul
    margin: 0
    margin-top: 100px
    list-style: none
    position: relative
    padding: 1px 100px
    color: #fff
    font-size: 13px
    &:before
      content: ''
      width: 1px
      height: 100%
      position: absolute
      border-left: 2px dashed #fff
    li
      position: relative
      margin-left: 30px
      background-color: rgba(255, 255, 255, 0.2)
      padding: 14px
      border-radius: 6px
      width: 250px
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08)
      &:not(:first-child)
        margin-top: 60px
      > span
        width: 2px
        height: 100%
        background: #fff
        left: -30px
        top: 0
        position: absolute
        &:before, &:after
          content: ''
          width: 8px
          height: 8px
          border-radius: 50%
          border: 2px solid #fff
          position: absolute
          background: #86b7e7
          left: -5px
          top: 0
      span:after
        top: 100%
      > div
        margin-left: 10px
  div
    .title, .type
      font-weight: 600
      font-size: 12px
    .info
      font-weight: 300
    > div
      margin-top: 5px
  span.number
    height: 100%
    span
      position: absolute
      font-size: 10px
      left: -35px
      font-weight: bold
      &:first-child
        top: 0
      &:last-child
        top: 100%