Customer testimonial

This bootstrap snippet called "Customer testimonial " was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: customer,testimonial,list,user,panel

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection


                        
<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="https://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="https://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>                    

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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

Similar snippets

Bootstrap snippet bs4 user profile cover

bs4 user profile cover

View

Bootstrap snippet bs4 project list

bs4 project list

View

Bootstrap snippet bs4 edit profile page

bs4 edit profile page

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 12th 2014, 13:56

Views: 4.5K

Rated 5/5 based on 1 reviews