"Event Schedule, Timeline, Chương trình"
Bootstrap 4.1.1 Snippet by tieusuquay79

<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; }

Related: See More


Questions / Comments: