"card"
Bootstrap 3.3.0 Snippet by evarevirus

<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; } }

Related: See More


Questions / Comments: