<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> <li>Host can scan based on access code<span class="pull-right bullet green"></span></li> <li>Host can report abuse<span class="pull-right bullet green"></span></li> </ul> <ul> <li class="highlighted">Scan</li> <li>Android app (scan entries)<span class="pull-right bullet green"></span></li> <li>iOS app (scan entries)<span class="pull-right bullet green"></span></li> <li>Scan point (~ price checker)<span class="pull-right bullet green"></span></li> </ul> <ul> <li class="highlighted">Reports</li> <li>Admin can see reports (in-out times)<span class="pull-right bullet green"></span></li> <li>Admin can see individual reports / participant<span class="pull-right bullet green"></span></li> <li>Admin can download reports (.xls)<span class="pull-right bullet green"></span></li> </ul> <ul> <li class="highlighted">Accessibility</li> <li>Online mode<span class="pull-right bullet green"></span></li> <li>Offline mode (with background synchronization)<span class="pull-right bullet green"></span></li> </ul> <ul> <li class="highlighted">Extras</li> <li>Roles based access to web app (expo participants)<span class="pull-right bullet green"></span></li> <li>Roles based access to scan app (expo participants)<span class="pull-right bullet green"></span></li> <li>Self check-in system<span class="pull-right bullet green"></span></li> <li>Automatic badge printing<span class="pull-right bullet green"></span></li> </ul> </div> </div>

.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; } .bullet { width: 15px; height: 15px; border-radius: 50%; display: inline-block; margin-top: 2px; } .green { background: #61ab31; } .yellow { background: #e8c621; } .red { background: #e62c4e; }