<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="timeline-warp">
<div class="day-timeline">DAY 1: September 21 (Friday)</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">8:00 AM</span>
<span class="timeline-start">Check-In</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">8:30 AM</span>
<span class="timeline-start">Opening Ceremony, Running Brunch</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">9:00 AM</span>
<span class="timeline-start">On-Site Hacking Starts</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">1:00 PM</span>
<span class="timeline-start"> Lunch</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">6:00 PM</span>
<span class="timeline-start">On-Site Hacking Ends, Short Closing Message, Everyone Out*</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">6:30 PM</span>
<span class="timeline-start">Friday Night Mixer (Off-campus, details TBD)</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="timeline-warp">
<div class="day-timeline">DAY 2: September 22 (Saturday)</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">8:00 AM</span>
<span class="timeline-start">Check-In, On-Site Hacking Starts</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">8:30 AM</span>
<span class="timeline-start">Running Brunch</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">1:00 PM</span>
<span class="timeline-start"> Lunch</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">5:00 PM</span>
<span class="timeline-start"> Project Presentations, Judging, Awards, Closing Ceremony</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">5:30 PM</span>
<span class="timeline-start">On-Site Hacking Ends</span>
</div>
</div>
<div class="timeline-card">
<div class="insidebox">
<span class="timeline-tag">6:00 PM</span>
<span class="timeline-start">Go home and rest!</span>
</div>
</div>
</div>
</div>
</div>
</div>
.timeline-warp{
margin: 15px 0 0;
padding: 20px 30px;
border: solid 1px #ddd;
background-color: #f5f5f5;
-webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
}
.timeline{
background-color:#fff;
}
.timeline-warp:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.07);
border: solid 1px rgba(100,40,145,.97);
}
.timeline{
padding:100px 0px;
background-color: #ecedf0;
font-family: 'Titillium Web';
}
.timeline-tag{
color:#fff;
background-color: #6164b2;
padding:3px 8px;
margin-right: 15px;
width: 90px;
font-family: 'Titillium Web';
text-align: center;
}
.timeline-header span{
display: inline-block;
margin-right:25px;
}
.timeline-header{
margin-bottom:80px;
}
.timeline-card{
position: relative;
margin-bottom: 0.7em;
}
.timeline-card:hover .insidebox {
transform: scale(1.033);
/* box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1); */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.timeline-card:hover:after {
background: #8a56d1;
width: 25px;
}
.timeline-card:after {
height: 2px;
width: 22px;
background: #ddd;
content: '';
position: absolute;
top: 50%;
left: -22px;
transition: all 0.3s ease-in;
}
.insidebox {
box-shadow: 0 0px 5px rgba(0,0,0,.07);
background: #ffffff;
width: 100%;
height: auto;
display: flex;
display: -moz-flex;
display: -ms-flex;
display: -webkit-flex;
display: -o-flex;
-webkit-align-items: center;
align-items: center;
padding: 10px 20px;
color: #6164B2;
transition: all 0.2s ease-in;
/* justify-content: center;*/
}
.day-timeline{
margin-bottom:50px;
font-weight: bold;
font-size: 20px;
color: #6164B2;
}
