<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.