<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 ---------->
<!-- hello -->
<div class="container">
<div class="row">
<div class="col-md-12 transp top-banner">
<p><img src="http://marlowcarnival.co.uk/i/pub/common/img/logo68h.png" class="img-responsive"/></p>
</div>
</div>
<div class="row toprow shadow">
<div class="col-md-12" style="padding:0">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active ">
<img src="https://placeimg.com/1024/400/any" alt="..." class="img-responsive">
<div class="carousel-caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sagittis felis, blandit fermentum diam molestie nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sagittis felis, blandit diam molestie nec.
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1024/401/any" alt="..." class="img-responsive">
<div class="carousel-caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sagittis felis, blandit fermentum diam molestie nec.
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1024/402/any" alt="..." class="img-responsive">
<div class="carousel-caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sagittis felis, blandit fermentum diam molestie nec.
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row bg-white rounded shadow" style="margin-top:20px;">
<div class="col-md-8">
<h3>Marlow Carnival - 17th September 2016 <img src="http://placekitten.com/120/120" alt="..." class="img-circle pull-right"></h3>
<p style="font-family:'Roboto Slab', serif; font-size:14px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus lacinia enim ullamcorper tempor.
Proin vitae tellus gravida, pretium metus auctor, tincidunt arcu. </p>
<p><a style="font-family:'Roboto Slab', serif; font-size:14px;" class="btn btn-sm btn-success shadow" href="#">Catch up with all the news from the Carnival organisers.</a></p>
<hr/>
<div class="row" style="margin-top:20px;">
<div class="col-md-6"><h4>Volunteers</h4>
<img src="http://lorempixel.com/64/64" alt="..." class="img-circle pull-left">
<p>Can you offer a few hours of your time to help out on the day? We're always on the lookout for volunteers and we need all kinds of helpers in all kinds of roles.
<a style="font-family:'Roboto Slab', serif;" class="btn btn-xs btn-warning" href="#">Learn more...</a>
</div>
<div class="col-md-6"><h4>Stall Holders</h4>
<img src="http://lorempixel.com/65/65" alt="..." class="img-circle pull-left">
You can now book online safely and efficiently. After having reserved your stall we will send you details of what happens on the day.
<a style="font-family:'Roboto Slab', serif;" class="btn btn-xs btn-warning" href="#">Learn more...</a>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-md-4"><h4>Volunteers</h4>
<img src="http://lorempixel.com/61/61" alt="..." class="img-circle pull-left">
<p>Can you offer a few hours of your time to help out on the day? We're always on the lookout for volunteers and we need all kinds of helpers in all kinds of roles.
<a style="font-family:'Roboto Slab', serif;" class="btn btn-xs btn-warning" href="#">Learn more...</a>
</div>
<div class="col-md-4"><h4>Stall Holders</h4>
<img src="http://lorempixel.com/62/62" alt="..." class="img-circle pull-left">
You can now book online safely and efficiently. After having reserved your stall we will send you details of what happens on the day.
<a style="font-family:'Roboto Slab', serif;" class="btn btn-xs btn-warning" href="#">Learn more...</a>
</div>
</div>
<br/>
</div>
<div class="col-md-4">
<p><img style="margin-top:20px;" src="http://lorempixel.com/800/400" alt="..." class="img-responsive img-rounded"></p>
<p><img style="margin-top:20px;" src="http://placekitten.com/800/201" alt="..." class="img-responsive img-rounded"></p>
<p><img style="margin-top:20px;" src="http://placekitten.com/800/202" alt="..." class="img-responsive img-rounded"></p>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.container {
max-width:970px;
}
h1, h2, h3, h4, h5, h6 {
font-family:'Roboto Slab', serif;
font-weight:600;
color:#336699;
}
body {
background: url("http://marlowcarnival.co.uk/i/pub/common/img/bg1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-banner {padding:20px}
.transp {
background-color: rgba(245, 245, 245, 0);
}
.toprow {
background: #ffc578; /* Old browsers */
background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}
.bg-white {background-color: rgba(245, 245, 245, 0.9);}
.rounded { border-radius: 8px; }
.shadow {
-webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 15px 2px rgba(0, 0, 0, .5);
}
#quickmenu {
padding:10px 10px 0 10px ;
}
hr, hr.pad {
background:none;
height:3px;
line-height:3px;
border-bottom:4px dotted #CCC;
margin:8px 0 18px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.media:hover, media-body:hover, media-left:hover {
background-color:#fcc;
}
.carousel-control.left
{
background: none;
}
.carousel-control.right
{
background: none;
}
.carousel-control
{
position: absolute;
top: 5%;
bottom: 0;
left: 0;
width: 15%;
font-size: inherit;
color: #fff;
text-align: center;
opacity: 1;
text-shadow: none;
}
.carousel-control:hover
{
color: #ccc;
}
.carousel-indicators
{
bottom: -50px;
}
.carousel-indicators li
{
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000\9;
background-color: rgba(0,0,0,0);
border: 1px solid #16a085;
border-radius: 50%;
}
.carousel-indicators .active
{
width: 12px;
height: 12px;
margin: 0;
background-color: #16a085;
}
.carousel-caption
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.4);
}
/*
*/
