"Event Schedule "
Bootstrap 4.1.1 Snippet by sumi9xm

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="schedule-warp"> <div class="day-one">DAY 1: September 21 (Friday)</div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">8:00 AM</span> <span class="schedule-start">Check-In</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">8:30 AM</span> <span class="schedule-start">Opening Ceremony, Running Brunch</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">9:00 AM</span> <span class="schedule-start">On-Site Hacking Starts</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">1:00 PM</span> <span class="schedule-start"> Lunch</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">6:00 PM</span> <span class="schedule-start">On-Site Hacking Ends, Short Closing Message, Everyone Out*</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">6:30 PM</span> <span class="schedule-start">Friday Night Mixer (Off-campus, details TBD)</span> </div> </div> </div> </div> <div class="col-md-6"> <div class="schedule-warp"> <div class="day-one">DAY 2: September 22 (Saturday)</div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">8:00 AM</span> <span class="schedule-start">Check-In, On-Site Hacking Starts</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">8:30 AM</span> <span class="schedule-start">Running Brunch</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">1:00 PM</span> <span class="schedule-start"> Lunch</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">5:00 PM</span> <span class="schedule-start"> Project Presentations, Judging, Awards, Closing Ceremony</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">5:30 PM</span> <span class="schedule-start">On-Site Hacking Ends</span> </div> </div> <div class="schedule-card"> <div class="insidebox"> <span class="schedule-tag">6:00 PM</span> <span class="schedule-start">Go home and rest!</span> </div> </div> </div> </div> </div> </div>
.schedule-warp{ padding-right:20px; padding-left:20px; 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); } .schedule{ background-color:#fff; } .schedule-warp:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07); border: solid 1px rgba(100,40,145,.97); } .schedule{ padding:100px 0px; background-color: #ecedf0; font-family: 'Titillium Web'; } .schedule-tag{ color:#fff; background-color: #6164b2; padding:3px 8px; margin-right: 15px; width: 90px; font-family: 'Titillium Web'; text-align: center; } .schedule-header span{ display: inline-block; margin-right:25px; } .schedule-header{ margin-bottom:80px; } .schedule-card{ position: relative; margin-bottom: 0.7em; } .schedule-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); } .schedule-card:hover:after { background: #8a56d1; width: 25px; } .schedule-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-one{ margin-bottom:50px; font-weight: bold; font-size: 20px; color: #6164B2; }

Related: See More

Questions / Comments: