Timeline First V2

Take off the left section

by Bunlong Heng

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.min.js"></script>
<!-- Black bar on top of Course Benmark Navigation Menu -->
<div class="container" style="background-color:black; height:15px;"></div>

<!-- Course Benmark Navigation Menu -->
<div class="container nav-benchmark" style="background-color:white;">

	<div class="row">

		<b> Monitor Progress</b>: Algebra 1 <br>		

		<div class="col-lg-1">
			<img src="http://www.bigideaslearning.com/for-reviewers/tx/hstx_alg1.png" width="70"> <br>
			<a id="change-course" href="#"> change course</a> 
		</div>


		<div class="col-lg-2">

			<div class="tl-box">
				<div class="tl-top"> <i class="fa fa-pencil-square-o"></i></div>
				<div class="tl-bot"> <i class="fa fa-circle-o"></i></div>
				<div class="tl-right"><span class="tl-text">Progression </br> Benchmark </span></div>
			</div>

		</div> 


		<div class="border-center">
			<div class="slide" >
			
				
				<div class="col-lg-2">

					<div class="tl-box">
						<div class="tl-top"> <i class="fa fa-pencil-square-o"></i></div>
						<div class="tl-bot"> <i class="fa fa-circle-o"></i></div>
						<div class="tl-right"><span class="tl-text">Course <br> Benchmark <br> Pre-Test </span></div>
					</div>

				</div> 

				<div class="col-lg-2">

					<div class="tl-box">
						<div class="tl-top"> <i class="fa fa-pencil-square-o"></i></div>
						<div class="tl-bot"> <i class="fa fa-circle-o"></i></div>
						<div class="tl-right"><span class="tl-text">Solving <br> Linear <br> Equations </span></div>
					</div>

				</div> 

				<div class="col-lg-2">

					<div class="tl-box">
						<div class="tl-top"> <i class="fa fa-pencil-square-o"></i></div>
						<div...

CSS

<style type="text/css">

/*Background Border*/
.border-center {
  width: 100%;
  position: relative;
}


.slide:before {
  content: '';
  position: absolute;
  border-bottom: 3px #3498db dashed;
  z-index: 1;
  top: 50%;
  margin-top:-2px;
  right: 10%;
  left: 40%;
  width: 25%; 
    
}



/*Timeline*/
.tl-box {
    border:1px solid black;
    width:179px;
    height:80px;
    position: relative;
}
.tl-box .tl-top {
    width:45px;
    height:39px;
    border-right:1px solid black;
    border-bottom:1px solid black;
    text-align:center;
    font-size:15px;
    color:#4e90cb;
    line-height: 39px;
}
.tl-box .tl-bot {
    width:45px;
    height:40px;
    border-right:1px solid black;
    text-align:center;
    font-size:15px;
    color:#4e90cb;
    line-height: 40px;
}
.tl-box .tl-right {
    width:194px;
    text-align:left;
    position: absolute;
    top: 50%;
    left: calc(50% + 60px);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tl-box .tl-text{
    text-align:left;
}


#change-course{
  color: black;
  text-decoration: none;
  border-bottom: 0px solid black;
  padding: 5px;
  font-size: 8px;
}


.vertical-line{

  border-left:2px solid #000;
  height:101px;
  text-align: center;
    width:2px;


}





</style>

JavaScript

// Benchmark nav-menu settings 
$('.slide').slick({

    slidesToShow: 4,
    slidesToScroll: 3,
    arrows: true,
    dots: true,

});