<div class="placeholderdiv">
<div class="timeline">
	
	<div class="activity-main circle-base">
		
		<div class="date-time">
			
			<span class="date">02/02/2018</span>
			<span class="time">04:25pm</span>
			
		</div>
		
		<div class="circle-big"></div>
		
		<div class="info">
			
			<div class="status">
				En route to Pick Up
			</div>
	
			<div class="address">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status">
				This a simple comment about how this specific status
			</div>
			
			<div class="reportedby">
				Reported by Luis Vargas  at 2:23pm <span>(source: Someone Else)</span>
			</div>
			
		</div><!-- end of info -->
		

	</div> <!-- end of activity-main -->
	
	
	<div class="activity-secondary circle-base">
		
		<div class="date-time">
			
			<span class="date">02/02/2018</span>
			<span class="time">04:25 pm</span>
			
		</div>
		
		<div class="circle-small"></div>
		
		<div class="info">
			
			<div class="address">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status">
				This a simple comment about how this specific status
			</div>
			
		</div><!-- end of info -->
		

	</div> <!-- end of activity-main -->
	
	<div class="activity-main circle-base">
		
		<div class="date-time">
			
			<span class="date">02/02/2018</span>
			<span class="time">04:25pm</span>
			
		</div>
		
		<div class="circle-big"></div>
		
		<div class="info">
			
			<div class="status">
				En route to Pick Up
			</div>
	
			<div class="address">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status">
				This a simple comment about how this specific status
			</div>
			
			<div class="reportedby">
				Reported by Luis Vargas  at 2:23pm <span>(source: Someone Else)</span>
			</div>
			
		</div><!-- end of info -->
		

	</div> <!-- end of activity-main -->
	
	
	<div class="activity-secondary circle-base">
		
		<div class="date-time">
			
			<span class="date">02/02/2018</span>
			<span class="time">04:25 pm</span>
			
		</div>
		
		<div class="circle-small"></div>
		
		<div class="info">
			
			<div class="address">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status">
				This a simple comment about how this specific status
			</div>
						<div class="reportedby">
				Reported by Luis Vargas  at 2:23pm <span>(source: Someone Else)</span>
			</div>
			
		</div><!-- end of info -->
		
</div>
	<div class="activity-secondary circle-base">
		
		<div class="date-time">
			
			<span class="date">02/02/2018</span>
			<span class="time">04:25 pm</span>
			
		</div>
		
		<div class="circle-small"></div>
		
		<div class="info">
			
<!-- 			<div class="address">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div> -->
				
			<div class="comment-status">
				This a simple comment about how this specific status
			</div>
			
		</div><!-- end of info -->
		
	</div> <!-- end of activity-secondary -->
	
	</div>
	
	
		
</div><!-- end of timeline -->
	
</div> <!-- end of placehholder div -->
.placeholderdiv
	margin 0 auto
	width 516px
	margin-top 15px
	margin-left: 42%
 
.timeline
	border-left 3px solid #cacaca
	margin 0 10px
	padding 0 10px
	position relative
	height auto
	margin 0 auto
	
	
	.activity-main
		// background red
		margin-left 25px
		margin-bottom 30px
		margin-top 50px
		
		&.circle-base
			&:hover
				.circle-big	
					background: #ddf8ff
					transition: background ease 0.3s
					
				.date-time
					opacity: 0.8
					transition: opacity ease 0.3s
		
		.date-time
			position absolute
			left -170px
			opacity: 0.4
			transition: opacity ease 0.3s
			
			.date
				display block
				font-size 1.6rem
				
			.time
				display block
				font-size 2rem
				margin 0 auto
				font-weight bold
				
		.circle-big		
			border 4px solid #cacaca
			border-radius 50%
			width 50px
			height 50px
			position absolute
			left -31px
			background-color white
				
		.info
			.status
				font-size 1.5rem
				font-weight bold
				
			.address
				color #333
				
			.comment-status
				color #6b6b6b
				font-style italic
				margin-top 5px
				
	.reportedby
		color #464646
		font-style light
		font-weight 100
		font-size 0.8rem
		margin-top 5px
		margin-left 0px

	.activity-secondary			
		margin-left 25px
		margin-bottom 30px
		position relative
		&.circle-base
			&:hover
				.circle-small
					background: #ddf8ff
					transition: background ease 0.3s
					
				.date-time
					opacity: 0.8
					transition: opacity ease 0.3s
		
		.date-time
			position absolute
			left -160px
			opacity: 0.4
			transition: opacity ease 0.3s
			
			.date
				display block
				font-size 1.05rem
			.time
				display block
				font-size 1.2rem
				margin 0 auto
				font-weight bold
				
		.circle-small		
			border 1px solid #cacaca
			border-radius 50%
			width 30px
			height 30px
			position absolute
			left -53px
			background-color white
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.