<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='widget'>
<div class='cycle-slideshow' data-cycle-allow-wrap='true' data-cycle-fx='carousel' data-cycle-next='#next' data-cycle-pager-template="<a href='#' class='thumb'><img src='{{children.0.src}}'></a>" data-cycle-pager='#thumbnails' data-cycle-prev='#prev' data-cycle-slides='figure' data-cycle-timeout='0'>
<figure>
<img alt='A Taste of the Kitchen' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/first-course.jpg'>
<figcaption>
<h3>A Taste of the Kitchen</h3>
<span class='tag'>Served Family Style</span>
<p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio.</p>
<div class='rating'>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
</div>
</figcaption>
</figure>
<figure>
<img alt='Rustic Reds' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/second-course.jpg'>
<figcaption>
<h3>Rustic Reds</h3>
<span class='tag'>From the land of Italy</span>
<p>Totam at eius excepturi deleniti sed, error repellat itaque omnis maiores tempora ratione dolor velit minus porro aspernatur repudiandae.</p>
<div class='rating'>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star-o'></span>
<span class='fa fa-star-o'></span>
</div>
</figcaption>
</figure>
<figure>
<img alt='Delicious Desserts' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/third-course.jpg'>
<figcaption>
<h3>Delicious Desserts</h3>
<span class='tag'>Seasonal Ingredients</span>
<p>Vel nam odio dolorem, voluptas sequi minus quo tempore, animi est quia earum maxime. Reiciendis quae repellat, modi non, veniam.</p>
<div class='rating'>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star'></span>
<span class='fa fa-star-o'></span>
</div>
</figcaption>
</figure>
</div>
<div class='slideshow-nav'>
<div id='prev'>
<span class='fa fa-lg fa-chevron-left'></span>
</div>
<div id='next'>
<span class='fa fa-lg fa-chevron-right'></span>
</div>
<div id='thumbnails'></div>
</div>
</div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/wine-bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Open Sans", serif;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.container {
margin: 2em auto;
width: 90%;
max-width: 1100px;
}
@media only screen and (min-width: 815px) {
.container {
margin: 7em auto;
}
}
.widget {
position: relative;
margin: 0 auto;
max-width: 320px;
height: 875px;
background: #fff;
}
@media only screen and (min-width: 815px) {
.widget {
margin: 0;
max-width: 800px;
height: auto;
}
}
figure {
margin: 0;
}
figure::after {
clear: both;
content: "";
display: table;
}
@media only screen and (min-width: 815px) {
figure img {
float: left;
width: 45%;
}
}
figure figcaption {
padding: 2.25em 2.5em 0;
}
@media only screen and (min-width: 815px) {
figure figcaption {
float: left;
width: 55%;
}
}
figure figcaption h3, figure figcaption .tag {
font-family: 'Playfair Display', serif;
}
figure figcaption h3 {
margin: 0;
font-size: 2em;
font-weight: 700;
color: #3b3b3b;
}
figure figcaption .tag {
display: block;
margin-top: 0.5em;
font-size: 0.9375em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #b26943;
}
figure figcaption p {
margin: 2em 0;
font-size: 0.875em;
line-height: 1.375em;
}
figure figcaption .rating {
color: #d08946;
}
figure figcaption .rating .fa {
margin-right: 5px;
}
figure figcaption .rating .fa:last-child {
margin-right: 0;
}
.slideshow-nav {
position: absolute;
bottom: 0;
right: 0;
z-index: 100;
width: 100%;
height: 125px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/ricepaper2.png") repeat;
-webkit-box-shadow: inset 0px 10px 5px -6px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 10px 5px -6px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 10px 5px -6px rgba(0, 0, 0, 0.08);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media only screen and (min-width: 815px) {
.slideshow-nav {
width: 55%;
}
}
.slideshow-nav #prev, .slideshow-nav #next {
width: 50%;
height: 100%;
line-height: 125px;
text-align: center;
cursor: pointer;
color: #beaea0;
}
.slideshow-nav #prev:hover, .slideshow-nav #prev:focus, .slideshow-nav #next:hover, .slideshow-nav #next:focus {
color: #a08872;
}
.slideshow-nav #prev:active, .slideshow-nav #next:active {
color: #856e5a;
}
@media only screen and (min-width: 815px) {
.slideshow-nav #prev, .slideshow-nav #next {
width: auto;
height: 0;
}
.slideshow-nav #prev span, .slideshow-nav #next span {
display: inline-block;
padding: 10px;
border: 2px solid #d3c8be;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
font-size: 0.5em;
color: #d3c8be;
}
.slideshow-nav #prev span:hover, .slideshow-nav #prev span:focus, .slideshow-nav #next span:hover, .slideshow-nav #next span:focus {
border: 2px solid #beaea0;
color: #beaea0;
}
.slideshow-nav #prev span:active, .slideshow-nav #next span:active {
border: 2px solid #aa9581;
color: #aa9581;
}
}
.slideshow-nav #prev {
float: left;
border-right: 1px solid #beaea0;
}
@media only screen and (min-width: 815px) {
.slideshow-nav #prev {
border-right: 0;
margin-left: 2em;
}
}
.slideshow-nav #next {
float: right;
}
@media only screen and (min-width: 815px) {
.slideshow-nav #next {
margin-right: 2em;
}
}
.slideshow-nav #thumbnails {
display: none;
}
@media only screen and (min-width: 815px) {
.slideshow-nav #thumbnails {
display: block;
text-align: center;
}
.slideshow-nav #thumbnails .thumb {
margin: 0 0.5em;
line-height: 100px;
}
.slideshow-nav #thumbnails .thumb img {
width: 75px;
height: 75px;
border: 3px solid #fff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.slideshow-nav #thumbnails .cycle-pager-active img {
border: 3px solid #d3c8be;
}
}
