Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Display testimonials with CSS Example

Jul 14, 2013
Introduction

Here I will explain how to display testimonials with jQuery, CSS or best CSS Testimonial example. 

Description:


Generally some of the sites will display testimonials regarding their sites with different styles. To implement those kind of styles we need to write code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Best CSS Testimonial Example</title>
<style type="text/css">
.testimonial
{
margin: 0;
background: #B7EDFF;
padding: 10px 50px;
position: relative;
font-family: Georgia, serif;
color: #666;
border-radius: 5px;
font-style: italic;
text-shadow: 0 1px 0 #ECFBFF;
background-image: linear-gradient(#CEF3FF, #B7EDFF);
}
.testimonial:before, .testimonial:after
{
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #999;
font-style: normal;
}
.testimonial:before
{
top: 0;
left: 10px;
}
.testimonial:after
{
content: "\201D";
right: 10px;
bottom: -0.5em;
}
.arrow-down
{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #B7EDFF;
margin: 0 0 0 25px;
}
.testimonial-author
{
margin: 0 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-align:left;
}
.testimonial-author span
{
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div style="width:50%">
<blockquote class="testimonial">
<p>This site is very nice and helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Ram Says:</b>
<blockquote class="testimonial">
<p>I really enojyed reading this site and it's very nice and helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Rohit Says:</b>
<blockquote class="testimonial">
<p>This site is very nice and helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Kumar Says:</b>
</div>
</body>
</html>
Demo

 


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.