"events list"
Bootstrap 4.0.0 Snippet by tibidascal

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 events-features">
<div class="row">
<ul>
<li class="highlighted">Events</li>
<li>Define event<span class="pull-right bullet green"></span></li>
<li>Event management (past / present / future)<span class="pull-right bullet green"></span></li>
<li>Define room / entries to check<span class="pull-right bullet green"></span></li>
</ul>
<ul>
<li class="highlighted">Participants</li>
<li>Add participants manually<span class="pull-right bullet green"></span></li>
<li>Import participants<span class="pull-right bullet green"></span></li>
<li>Static roles<span class="pull-right bullet green"></span></li>
<li>Add roles dynamically<span class="pull-right bullet green"></span></li>
</ul>
<ul>
<li class="highlighted">Access badge</li>
<li>Generate barcode on demand<span class="pull-right bullet green"></span></li>
<li>Generate QR code<span class="pull-right bullet green"></span></li>
<li>Generate codes on the fly<span class="pull-right bullet green"></span></li>
<li>Generate badges based on predefined template<span class="pull-right bullet green"></span></li>
<li>Generate badges based on own design<span class="pull-right bullet green"></span></li>
<li>Send badge / invitation to owner<span class="pull-right bullet green"></span></li>
<li>Send badge / invitation to participants (individually)<span class="pull-right bullet green"></span></li>
</ul>
<ul>
<li class="highlighted">Hosts</li>
<li>Add hosts (hostess)<span class="pull-right bullet green"></span></li>
<li>Host can download the app<span class="pull-right bullet green"></span></li>
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
.events-features {
max-width: 500px;
}
.events-features ul {
background: #f5f5f5;
width: 100%;
list-style-type: none;
margin: 0 auto 20px auto;
padding: 0;
}
.events-features ul li {
padding: 15px 10px;
font-size: 12px;
border-bottom: 1px solid #ccc;
}
.events-features ul li:last-child {
border: none;
}
.events-features ul li.highlighted {
background: #212529;
display: block;
color: #fff;
border-bottom: 0;
font-weight: bold;
}
.pull-right {
display: inline-block;
float: right;
font-weight: bold;
text-transform: uppercase;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: