Bootstrap Snippet Event Schedule, Timeline, Chương trình 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="//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>
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
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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