Blockquotes

CSS/JS files (add code to <HEAD> section):


<!-- DC Blockquotes CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/quotes/css/tsc_blockquotes_and_pullquotes.css" />

Rotating Quotes / Testimonials

View code:


<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Quotes Rotator JS -->
<script src="dreamcodes/quotes/js/jquery.quovolver.js"></script>

<!-- DC Quotes Rotator Settings -->
<script>
	$(document).ready(function() {
		
		// Example One
		$('#tsc_quotes-rotator-container1 .tsc_quotes-rotator1').quovolver({
			transitionSpeed : 300, // transition speed
			autoPlaySpeed : 2300, // duration before each transition (default 2300 = 2.3 seconds)
			autoPlay : true, // auto play quotes rotator
			equalHeight : false // disable auto resizing of panels
		});
		
	});
	</script>

<!-- DC Quotes Rotator Start -->
<div id="tsc_quotes-rotator-container1" style="width: 90%;">
  <div class="tsc_quotes-rotator1">
    <blockquote class="tsc_silver_blockquotes">
      <p>“I've been with you for almost a year. So far I am very pleased with your service!”</p>
      <p>— Tom S.</p>
    </blockquote>
    <blockquote class="tsc_silver_blockquotes">
      <p>“I've been with a few different companies in my time and I must say you have exceeded my expectations.”</p>
      <p>— John F.</p>
    </blockquote>
    <blockquote class="tsc_silver_blockquotes">
      <p>“Great prices, awesome customer service and solid features. Highly recommended! A+”</p>
      <p>— George D.</p>
    </blockquote>
    <blockquote class="tsc_silver_blockquotes">
      <p>“I'm very impressed with the knowledge of the staff and your fast response times!”</p>
      <p>— William B.</p>
    </blockquote>
  </div>
</div>
<!-- DC Quotes Rotator End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_red_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_orange_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_yellow_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_green_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_olive_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_teal_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_blue_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_deepblue_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_purple_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_hotpink_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_slategrey_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_mauve_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_pearl_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_steelblue_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_mossgreen_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_wheat_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_coffee_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_copper_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_silver_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->

View code:


<!-- DC Blockquotes Start -->
  <blockquote class="tsc_black_blockquotes">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nulla non nulla sapien.</p>
    <p> <cite>– Joe Blogs, <a href="http://www.templateaccess.com">TemplateAccess.com</a></cite> </p>
  </blockquote>
<!-- DC Blockquotes End -->