<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="page-header">
<img src="http://i.imgur.com/XNCISuz.png"</p>
<center><h3>Presidential Elections 2015 Schedule</h3></center>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Presidential Speeches</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> September 5, 2015</small></p>
</div>
<div class="timeline-body">
<p>The first presidential speech of the 2015 elections will be heald on Spetember 5, 2015. The first presidential candidates will express their views on presidency, talk about their campaign, and try to influence more voters. The speeches will be heald in the <a href="https://www.habbo.com/room/69828874">[EPF] Confrence Room</a>. This speeche will kick off our event of the 3rd Presidential Elections of the Elite Police Force. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Presidential Debates</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> September 6, 2015</small></p>
</div>
<div class="timeline-body">
<p>The second presidential speech of the 2015 elections will be heald on Spetember 6, 2015. The second presidential candidates will express their views on presidency, talk about their campaign, and try to influence more voters. The speeches will be heald in the <a href="https://www.habbo.com/room/69828874">[EPF] Confrence Room</a>. </p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Presidential Debates</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> September 12, 2015</small></p>
</div>
<div class="timeline-body">
<p>The first ever debates in the Elite Police Force will be heald on September 12, 2015 in the <a href="https://www.habbo.com/room/69828874">[EPF] Confrence Room</a> .
Each presidential candidates will answer questions on everyday problems and their role as the President of the [EPF]. These questions will be generated by you, the
workers and there will be a few per drafted questions. To submit a question please click <a herf="http://goo.gl/forms/pxLuuwa8Kl">here!</a></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Voting Begins</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> September 13, 2015</small></p>
</div>
<div class="timeline-body">
<p>Voting for the 2015 [EPF] Presidential Elections will be open and be avaliable to all Elite Police Force staff. To vote please add "EPF-Election" on
Habbo. Then PRIVATE MESSAGE your vote. Either jpn7k in all lowercase or ideos in all lowercase.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">President of the [EPF] Announced</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> September 25, 2015</small></p>
</div>
<div class="timeline-body">
<p>Votes will be counted and the new President of the [EPF] will be announced in the <a href="https://www.habbo.com/room/69828874">[EPF] Confrence Room</a>
the President of the [EPF] will be sworn in. This will officially remark the newest President of the [EPF].</p>
<hr>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Coming Soon</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">Coming Soon</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Presidential Acceptance Speech</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> September 26, 2015</small></p>
</div>
<div class="timeline-body">
<p>The newest President finishs off the Presidential Elections of 2015 through an acceptance speech, accepting the role of the president of the [EPF]
what the future is to be. This will be hosted in the <a href="https://www.habbo.com/room/69828874">[EPF] Confrence Room</a>.
</p>
</div>
</div>
</li>
</ul>
</div>
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
