<div class="body-reference">
<div class="timeline-carrier">
<div class="timeline-container">
<div class="arrow-pickup">
<div class="title-of-svg">
Pickup
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42.9 43.09" style="enable-background:new 0 0 42.9 43.09;" xml:space="preserve">
<g>
<path class="st0" d="M21.28,38.42c-9.19,0-16.67-7.48-16.67-16.67c0-9.19,7.48-16.67,16.67-16.67s16.67,7.48,16.67,16.67
C37.95,30.94,30.47,38.42,21.28,38.42z M21.28,5.94c-8.71,0-15.8,7.09-15.8,15.8s7.09,15.8,15.8,15.8c8.71,0,15.8-7.09,15.8-15.8
S29.99,5.94,21.28,5.94z"/>
</g>
<g>
<path class="st0" d="M27.77,15.34c0.27,0.28,0.71,0.28,0.98,0c0.27-0.27,0.27-0.71,0-0.98L21.79,7.4c-0.13-0.13-0.31-0.2-0.49-0.2
c0,0-0.01,0-0.01,0c-0.01,0-0.01,0-0.02,0c-0.23,0-0.43,0.12-0.55,0.3l-6.9,6.89c-0.27,0.27-0.27,0.71,0,0.99
c0.27,0.27,0.71,0.27,0.98,0l5.77-5.77v24.78c0,0.39,0.31,0.7,0.69,0.7c0.39,0,0.7-0.31,0.7-0.7V9.55L27.77,15.34z M27.77,15.34"/>
</g>
<g>
<path style="fill:#fff;" d="M20.95,42.05c-11.3,0-20.5-9.2-20.5-20.5s9.2-20.5,20.5-20.5s20.5,9.2,20.5,20.5S32.25,42.05,20.95,42.05z
M20.95,4.05c-9.65,0-17.5,7.85-17.5,17.5s7.85,17.5,17.5,17.5s17.5-7.85,17.5-17.5S30.6,4.05,20.95,4.05z"/>
</g>
</svg>
<div class="date-of-svg">
02/02/19
</div>
</div>
<div class="line-of-time">
<div class="arrow-left-direction">
<div class="arrow-inner-left-direction"></div>
</div>
<div class="car-timeline">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 26.4 16.59" style="enable-background:new 0 0 26.4 16.59;" xml:space="preserve">
<g>
<path class="car-timeline-path" d="M10.16,11.19c-1.09,0-1.97,0.88-1.97,1.97c0,1.08,0.88,1.97,1.97,1.97c1.09,0,1.97-0.88,1.97-1.97 C12.13,12.07,11.25,11.19,10.16,11.19L10.16,11.19z M10.16,14.14c-0.54,0-0.98-0.44-0.98-0.98c0-0.54,0.44-0.98,0.98-0.98 c0.54,0,0.98,0.44,0.98,0.98C11.15,13.7,10.71,14.14,10.16,14.14L10.16,14.14z M25,9.73v2.1c0,0.52-0.42,0.95-0.95,0.95h-1.02 c-0.18-1.26-1.27-2.23-2.58-2.23c-1.31,0-2.39,0.97-2.57,2.23h-5.15c-0.18-1.26-1.27-2.23-2.57-2.23c-1.31,0-2.39,0.97-2.57,2.23 H6.32c-0.52,0-0.95-0.42-0.95-0.95v-2.1H25z M20.46,11.19c-1.09,0-1.97,0.88-1.97,1.97c0,1.08,0.88,1.97,1.97,1.97 c1.08,0,1.97-0.88,1.97-1.97C22.43,12.07,21.55,11.19,20.46,11.19L20.46,11.19z M20.46,14.14c-0.54,0-0.98-0.44-0.98-0.98 c0-0.54,0.44-0.98,0.98-0.98c0.54,0,0.98,0.44,0.98,0.98C21.44,13.7,21,14.14,20.46,14.14L20.46,14.14z M24.63,7.62L20.9,3.93 c-0.24-0.23-0.56-0.37-0.89-0.37h-1.88V2.86c0-0.52-0.42-0.95-0.95-0.95H6.32c-0.52,0-0.95,0.42-0.95,0.95V3L1.52,3.45l6.82,0.89 L1.43,5.02L8.32,6L1.43,6.6l3.94,0.74l0,1.86H25V8.51C25,8.18,24.86,7.85,24.63,7.62L24.63,7.62z M23,7.74h-3.61 c-0.08,0-0.15-0.07-0.15-0.15V4.8c0-0.08,0.07-0.15,0.15-0.15h0.69c0.04,0,0.08,0.02,0.1,0.04l2.92,2.79 C23.2,7.57,23.13,7.74,23,7.74L23,7.74z M23,7.74"/>
</g>
</svg>
</div>
<div class="there-is-no-space ">
<p>6 stops</p>
</div>
<div class="components-timeline-start-loop ">
<!-- component start -->
<div class="distance-between-stops">150 miles</div>
<div class="one-stop-timeline">
<div class="title-of-this-stop">
Origin, State
</div>
<div class="dot-of-this-stop dot-pickup"></div>
<div class="date-of-this-stop">
02/02/19
</div>
</div>
<!-- component stop -->
<!-- component start -->
<div class="distance-between-stops">150 miles</div>
<div class="one-stop-timeline">
<div class="title-of-this-stop">
Destination, state
</div>
<div class="dot-of-this-stop dot-dropoff"></div>
<div class="date-of-this-stop">
02/02/19
</div>
</div>
<!-- component stop -->
</div>
</div>
<div class="arrow-dropoff">
<div class="title-of-svg">
Dropoff
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 42.9 43.09" style="enable-background:new 0 0 42.9 43.09;" xml:space="preserve">
<g>
<path class="arrow-dropoff" d="M21.28,5.08c9.19,0,16.67,7.48,16.67,16.67c0,9.19-7.48,16.67-16.67,16.67S4.61,30.94,4.61,21.75
C4.61,12.55,12.09,5.08,21.28,5.08z M21.28,37.55c8.71,0,15.8-7.09,15.8-15.8s-7.09-15.8-15.8-15.8c-8.71,0-15.8,7.09-15.8,15.8
S12.56,37.55,21.28,37.55z"/>
</g>
<g>
<path class="arrow-dropoff" d="M14.79,28.15c-0.27-0.28-0.71-0.28-0.98,0c-0.27,0.27-0.27,0.71,0,0.98l6.96,6.96c0.13,0.13,0.31,0.2,0.49,0.2
c0,0,0.01,0,0.01,0c0.01,0,0.01,0,0.02,0c0.23,0,0.43-0.12,0.55-0.3l6.9-6.89c0.27-0.27,0.27-0.71,0-0.99
c-0.27-0.27-0.71-0.27-0.98,0l-5.77,5.77V9.11c0-0.39-0.31-0.7-0.69-0.7c-0.39,0-0.7,0.31-0.7,0.7v24.84L14.79,28.15z M14.79,28.15
"/>
</g>
<g>
<path style="fill:#fff;" d="M20.95,42.05c-11.3,0-20.5-9.2-20.5-20.5s9.2-20.5,20.5-20.5s20.5,9.2,20.5,20.5S32.25,42.05,20.95,42.05z
M20.95,4.05c-9.65,0-17.5,7.85-17.5,17.5s7.85,17.5,17.5,17.5s17.5-7.85,17.5-17.5S30.6,4.05,20.95,4.05z"/>
</g>
</svg>
<div class="date-of-svg">
02/02/19
</div>
</div>
</div>
</div>
</div>
body
background #333
padding-top 90px
.body-reference
background #333333
max-width 80vw
margin 0 auto
/* variables */
$blue-pickup = #208BCC
$orange-dropoff = #FF5E00
$plain-white = #fff
$textGray = #999999;
$font-size-x-small = 0.75rem
/* Utilities start */
.hide-element-timeline
display none !important
/* Utilities start */
.timeline-container
display flex
align-items center
&:hover
.car-timeline
-webkit-animation little-car 12s 2 /* Safari 4+ */
-moz-animation little-car 12s 2 /* Fx 5+ */
-o-animation little-car 12s 2 /* Opera 12+ */
animation little-car 12s 2 /* IE 10+, Fx 29+ */
transition all 0.3 linear
.arrow-pickup
fill $blue-pickup
max-width 80px
flex 1
flex-basis 150px
flex-shrink 0
position relative
.title-of-svg
position absolute
top -30px
left 0
right 0
margin auto
color $plain-white
text-align center
.date-of-svg
position absolute
bottom -30px
left 0
right 0
margin auto
color $plain-white
text-align center
.arrow-dropoff
fill $orange-dropoff
max-width 80px
flex 1
flex-basis 150px
flex-shrink 0
position relative
.title-of-svg
position absolute
top -30px
left 0
right 0
margin auto
color $plain-white
text-align center
.date-of-svg
position absolute
bottom -30px
left 0
right 0
margin auto
color $plain-white
text-align center
.line-of-time
background $plain-white
height 1px
flex 1
margin 0 7px
display flex
.there-is-no-space
display none
flex 1
justify-content center
text-align center
align-items center
p
border 1px solid $plain-white
max-width 20vw
padding 15px 10vw
color $plain-white
text-transform uppercase
background #333
.arrow-left-direction
width 0
height 0
border-top 10px solid transparent
border-bottom 10px solid transparent
border-left 10px solid $plain-white
position relative
top -9px
right -13px
.arrow-inner-left-direction
width 0
height 0
border-top 10px solid transparent
border-bottom 10px solid transparent
border-left 10px solid #333
position relative
top -10px
right 13px
.car-timeline
fill $plain-white
max-width 40px
flex 1
position relative
top -30px
opacity 0.3
transition all 0.3 linear
.components-timeline-start-loop
display flex
flex 1
.distance-between-stops
display flex
flex 0.1
color $plain-white
margin-top 10px
color $textGray
font-size 0.75rem
text-align center
text-transform uppercase
.one-stop-timeline
display flex
flex 1
flex-direction column
min-height 60px
position relative
top -41px
.title-of-this-stop
color $plain-white
flex 1
text-align center
margin-bottom 15px
.dot-of-this-stop
background $plain-white
width 20px
height 20px
border-radius 50%
flex 1
display block
margin 0 auto
/* when the stop is a pickup */
.dot-pickup
background $blue-pickup
position relative
width 50px
height 50px
&:before
content: '';
background: $blue-pickup
border: 1px solid $blue-pickup;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 8px;
bottom: 0;
left: -6px;
right: 0;
margin: auto;
/* when the stop is a dropoff */
.dot-dropoff
background $orange-dropoff
position relative
&:before
content: '';
background:$orange-dropoff;
border: 1px solid $orange-dropoff;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 8px;
bottom: 0;
left: -6px;
right: 0;
margin: auto;
.date-of-this-stop
color white
flex 1
text-align center
margin-top 15px
@media only screen and (max-width: 600px)
.there-is-no-space
p
padding 15px 2vw !important
transition all ease 0.3s
@media only screen and (max-width: 850px)
.car-timeline
display none !important
.there-is-no-space
display flex !important
.components-timeline-start-loop
display none !important
.car-timeline
animation none !important
-webkit-animation none !important /* Safari 4+ */
-moz-animation none !important/* Fx 5+ */
-o-animation none !important /* Opera 12+ */
animation none !important /* IE 10+, Fx 29+ */
transition all ease 0.3s
@keyframes little-car
0%
opacity 0
left 0%
transition 0.3s all linear
5%
opacity 0.3
85%
opacity 0.3
transition 0.3s all linear
90%
left 93%
transition 0.3s all linear
View Compiled
//console.log('css Rocks!!!') :D
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.