Bootstrap Snippet Event Schedule using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Event Schedule "
Bootstrap 4.1.1 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Event Schedule " Bootstrap 4.1.1 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Event Schedule "
Bootstrap 4.1.1 Snippet by sumi9xm