<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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-sm-12">
<h2 class="hd1">Upcoming Events</h2>
<div id="carousel-event" class="carousel carousel-event slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="event-box">
<figure><img src="http://placehold.it/350x150" class="img-responsive" alt=""></figure>
<div class="event-dtil">
<div class="event-date">
<span class="pull-right"><i class="fa fa-comments"></i> 136 Comments</span>
<span><i class="fa fa-calendar"></i> February 20, 2014</span>
</div>
<h3> Nam lacinia massa nunc vel.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum euismod turpis, id auctor sapien sagittis eget. </p>
<div>
<a href="#" class="btn btn-gray text-uppercase">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-navbox">
<!-- Controls -->
<a class="right carousel-control" href="#carousel-event" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
<a class="left carousel-control" href="#carousel-event" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css);
.carousel-event{
position:relative;
padding-bottom:46px;
margin-bottom:30px;
}
.carousel-event .carousel-navbox{
position:absolute;
right:0;
bottom:0;
height:44px;
z-index:1;
left:0;
}
.carousel-event .carousel-control {
bottom:auto;
color: #fff;
font-size: 20px;
left:auto;
opacity: 1;
position: relative;
text-align: center;
text-shadow: none;
top: auto;
background:#000;
z-index:99;
width:35px;
height:44px;
display:block;
float:right;
}
.carousel-event .carousel-control:hover {
background-color:#cc0001;
}
.carousel-event .carousel-control .glyphicon-chevron-left,
.carousel-event .carousel-control .glyphicon-chevron-right,
.carousel-event .carousel-control .icon-prev,
.carousel-event .carousel-control .icon-next {
font-size: 18px;
height: 30px;
margin-top:-10px;
width: 30px;
}
.hd1{
font-weight:400;
font-size:40px;
text-align:center;
color:rgab(20,20,20,0.8);
margin:0 0 30px;
font-family: "Fanwood Text",serif;
}
.event-box{
margin:20px 0;
}
.event-box figure{
float:left;
width:242px;
max-height:242px;
overflow:hidden;
margin-right:20px;
}
.event-box figure img{
max-width:242px;
}
.event-box .event-dtil{
margin-left:262px;
color:#6b6b6b;
font-family: 'Fanwood Text', serif;
}
.event-box .event-dtil p{
font-size:14px;
line-height:21px;
color:#6b6b6b;
margin-bottom:15px;
}
.event-box .event-dtil .event-date{
margin-bottom:10px;
color:#494848;
font-weight:400;
}
.event-box .event-dtil .event-date i{
margin-right:5px;
}
.event-box .event-dtil h3{
margin:0 0 10px;
font-size:18px;
color:#262626;
font-family: 'Fanwood Text', serif;
font-weight:400;
}
.btn-gray{
color: #fff;
background-color: #494848;
border-color: #494848;
font-size:14px;
padding:10px 24px;
box-shadow:0 5px 0 #000;
font-family: 'Fanwood Text', serif;
}
.btn-gray:focus,
.btn-gray.focus {
color: #fff;
background-color: #7d7d7d;
border-color: #7d7d7d;
}
.btn-gray:hover {
color: #fff;
background-color: #5e5d5d;
border-color: #5e5d5d;
}
.btn-gray:active,
.btn-gray.active,
.open > .dropdown-toggle.btn-gray {
color: #fff;
background-color: #7d7d7d;
border-color: #7d7d7d;
}
