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
View Compiled
@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%
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.