Bootstrap snippet: Customer testimonial

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: customer,testimonial,list,user,panel



<div class="container bootstrap snippet"> <section id="testimonials" class="content-first"> <div class="container bootstrap snippet"> <h1 class="text-center">Testimonials</h1> <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in turpis quam. Nulla quis eleifend lectus.</p> <hr> <div class="row"> <!-- TESTIMONIAL 1 - START --> <div class="col-sm-6"> <div class="media"> <a class="pull-left" href="#"><img class="media-object img-circle" src="http://bootdey.com/img/Content/HexGames349.jpg" alt=""></a> <div class="media-body"> <h4 class="media-heading">El Grone's</h4> <span>Webdesigner</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat est. Donec lobortis interdum volutpat. Maecenas bibendum dui quis pharetra tincidunt. Praesent posuere eu velit at scelerisque.</p> </div> </div> </div> <!-- TESTIMONIAL 1 - END --> <!-- TESTIMONIAL 2 - START --> <div class="col-sm-6"> <div class="media"> <a class="pull-left" href="#"><img class="media-object img-circle" src="http://bootdey.com/img/Content/poof_by_fairlyoddanticosmo-d48epgu.png" alt=""></a> <div class="media-body"> <h4 class="media-heading">Egg form</h4> <span>Webdesigner</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat est. Donec lobortis interdum volutpat. Maecenas bibendum dui quis pharetra tincidunt. Praesent posuere eu velit at scelerisque.</p> </div> </div> </div> </div> </div> </section> </div>
body { background: #2E95EF; background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF)); padding-top: 15%; } .content-first { padding: 5px 0; color: #FFFFFF; border-top: 8px inset #333; border-top: 8px solid rgba(0,0,0,0.1); box-shadow: 0px 1px 0px rgba(255,255,255,0.2); } .media, .media-body { overflow: hidden; zoom: 1; } #testimonials .media a.pull-left img { max-width: 100px; } #testimonials .media .media-body { background-color: rgba(0, 0, 0, 0.1); padding: 15px 20px; border-radius: 12px; } #testimonials .media .media-body h4 { margin: 0; font-weight: bold; font-size: 22px; } #testimonials .media .media-body span { margin: 5px 0 15px; display: block; font-weight: bold; font-style: italic; font-size: 14px; color: #333; } #testimonials .media .media-body p { margin: 0; padding: 5px 0 0; border-top: 1px dashed rgba(0, 0, 0, 0.2); text-align: left; line-height: 25px; font-size: 14px; }
Dey-Dey

Customer testimonial

Dey-Dey
  Jul 11th 2014, 15:38
3.0K Views