Responsive Website Design: July 2015

Tuesday 28 July 2015

Responsive Newsletter Template

Create Index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Design</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,  .carousel-inner > .item > a > img {
 width: 100%;
 margin: auto;
 height:300PX;
}
</style>
</head>
<body>
<div class="header">
  <div class="header-logo"> <img src="img/newlogo.png"> </div>
  
  <div class="header-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>
  
</div>

<div class="main-slider">
  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    
    <div class="carousel-inner" role="listbox">
      <div class="item active"> <img src="http://3.bp.blogspot.com/-TT0SkE8co4M/VXqCHaHDxLI/AAAAAAAABO8/SWy4nbu0Mk8/s1600/background1.png" alt="PSD DESIGN">
        <div class="carousel-caption">
          <h3>New Design</h3>
          <p>New Design Collections</p>
        </div>
      </div>
      <div class="item"> <img src="http://3.bp.blogspot.com/-TT0SkE8co4M/VXqCHaHDxLI/AAAAAAAABO8/SWy4nbu0Mk8/s1600/background1.png" alt="PSD DESIGN">
        <div class="carousel-caption">
          <h3>New Design</h3>
          <p>New Design Collections</p>
        </div>
      </div>
      <div class="item"> <img src="http://3.bp.blogspot.com/-TT0SkE8co4M/VXqCHaHDxLI/AAAAAAAABO8/SWy4nbu0Mk8/s1600/background1.png" alt="PSD DESIGN">
        <div class="carousel-caption">
          <h3>New Design</h3>
          <p>New Design Collections</p>
        </div>
      </div>
    </div>
    
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  
</div>

<div class="top-container">
  <div class="top-container-block">
    <div class="top-container-block-heading">
      <div class="top-container-block-heading-icon"> <img src="img/lightbulb.png" alt="icon"> </div>
      
      <div class="top-container-block-heading-item">
        <p>Industry</p>
      </div>
      
    </div>
    
    <div class="top-container-block-desc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    
    <div class="top-container-block-heading-readmore">
      <p>Read More</p>
    </div>
    
  </div>
  
  
  <div class="top-container-block">
    <div class="top-container-block-heading">
      <div class="top-container-block-heading-icon"> <img src="img/locate.png" alt="icon"> </div>
      
      <div class="top-container-block-heading-item">
        <p>Printing</p>
      </div>
      
    </div>
    
    <div class="top-container-block-desc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    
    <div class="top-container-block-heading-readmore">
      <p>Read More</p>
    </div>
    
  </div>
  
  
  <div class="top-container-block">
    <div class="top-container-block-heading">
      <div class="top-container-block-heading-icon"> <img src="img/settings.png" alt="icon"> </div>
      
      <div class="top-container-block-heading-item">
        <p>Standard</p>
      </div>
      
    </div>
    
    <div class="top-container-block-desc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    
    <div class="top-container-block-heading-readmore">
      <p>Read More</p>
    </div>
    
  </div>
  
</div>

<div class="portfolio-me">
  <div class="portfolio-me-img"> <img src="http://3.bp.blogspot.com/-TT0SkE8co4M/VXqCHaHDxLI/AAAAAAAABO8/SWy4nbu0Mk8/s1600/background1.png" alt="banner">
    <div class="portfolio-me-text">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    
  </div>
  
</div>

</body>
</html>

Style.css

@charset "utf-8";
body {
 background:#333;
}
.header {
 background: #000;
 margin: auto;
 overflow: auto;
 padding: 10px;
}
.header-logo {
 float: left;
 height: 100px;
 padding: 10px;
 width: 100px;
}
.header-logo img {
 width:100%;
 height:100%;
 margin:auto;
}
.header-menu {
 /*background: #ddd;*/
    float: right;
 margin: 10px;
 padding: 10px;
}
.header-menu ul {
 padding:0px;
 margin:0px;
}
.header-menu ul li {
 float: left;
 list-style-type: none;
 margin: 12px;
}
.header-menu ul li a {
 background: #333;
 color: #ffffff;
 padding: 10px;
 text-decoration: none;
 box-shadow: 0 0 0 1px #8A8A8A;
}
.header-menu ul li a:hover {
 color:#FFFFFF;
 background: #0099FF;
 text-decoration:none;
 box-shadow: 0 0 0 1px #fff;
}
.main-slider {
 margin:auto;
}
.top-container {
 margin:auto;
 overflow:auto;
 padding:20px;
 background:#eee;
}
.top-container-block {
 background: #8a8a8a;
 border-radius: 10px;
 box-shadow: 10px 2px 1px;
 float: left;
 margin: 8px;
 padding: 10px;
 width: 32%;
}
.top-container-block-heading {
 padding:10px;
 margin:auto;
 overflow: auto;
}
.top-container-block-heading-icon {
 float:left;
 height:50px;
 width:50px;
 margin:10px;
}
.top-container-block-heading-icon img {
 margin:auto;
 width:100%;
 height:100%;
}
.top-container-block-heading-item {
 float:left;
}
.top-container-block-heading-item p {
 color: #eee;
 font-size: 47px;
 text-align: center;
}
.top-container-block-desc {
 margin:auto;
}
.top-container-block-desc p {
 text-align:center;
 color:#eee;
}
.top-container-block-heading-readmore {
 float:right;
 padding:10px;
 text-align:center;
 background:#000;
 color:#fff;
 cursor:pointer;
 border-radius: 10px;
}
.top-container-block-heading-readmore:hover {
 background:#0099FF;
}
.top-container-block-heading-readmore p {
 text-align:center;
 margin: 0;
}
.portfolio-me {
 margin:auto;
 padding:20px;
 background:#333;
}
.portfolio-me-text {
 background: #eee;
 margin: -82px auto;
 padding: 10px;
}
.portfolio-me-text p {
 color: #fff;
 font-size: 26px;
 text-align: center;
}
.portfolio-me-img {
 height:122px;
 width:100%;
 margin:auto;
}
.portfolio-me-img img {
 margin:auto;
 width:100%;
 height:100%;
}

/*--------------------------------------Responsive code here-----------------------------------*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .top-container-block {
 background: #8a8a8a;
 float: none;
 margin: 8px auto;
 overflow: auto;
 padding: 10px;
 width: 100%;
}
.header-logo {
 float: none;
 height: 100px;
 margin: auto;
 padding: 10px;
 width: 100px;
}
.header-menu {
 background: #ddd;
 float: none;
 overflow: auto;
 padding: 10px;
}
.header-menu ul li {
 background: #333 none repeat scroll 0 0;
 border-radius: 10px;
 display: inline-block;
 list-style-type: none;
 margin: 3px auto;
 padding: 10px;
 text-align: center;
 width: 100%;
}
.header-menu ul li a {
 color: #ffffff;
 text-decoration: none;
 width: 100%;
}
.header-menu ul li a:hover {
 background: #0099FF;
 display: inline-block;
 list-style-type: none;
 text-align: center;
 width: 100%;
}
.main-slider {
 background: #333;
 margin: auto;
 overflow: auto;
 padding: 10px;
}
.portfolio-me-img {
height:169px;
width:100%;
margin:auto;
}
.portfolio-me-text {
 background: #eee;
 margin: -147px auto;
 padding: 10px;
}
}

Sunday 19 July 2015

Responsive Restaurant Website Templates

Create index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Web Design</title>
<link rel="stylesheet" href="style.css" type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
   height:300px;
   opacity: 0.57;
 
  }
  </style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
   ( function( $ ) {
$( document ).ready(function() {
$('.cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
   element.removeClass('open');
   element.find('li').removeClass('open');
   element.find('ul').slideUp();
  }
  else {
   element.addClass('open');
   element.children('ul').slideDown();
   element.siblings('li').children('ul').slideUp();
   element.siblings('li').removeClass('open');
   element.siblings('li').find('li').removeClass('open');
   element.siblings('li').find('ul').slideUp();
  }
 });

$('.cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
  var r, g, b;
  var textColor = $('.cssmenu').css('color');
  textColor = textColor.slice(4);
  r = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  g = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  b = textColor.slice(0, textColor.indexOf(')'));
  var l = rgbToHsl(r, g, b);
  if (l > 0.7) {
   $('.cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
   $('.cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
  }
  else
  {
   $('.cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
   $('.cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
  }
 })();

function rgbToHsl(r, g, b) {
     r /= 255, g /= 255, b /= 255;
     var max = Math.max(r, g, b), min = Math.min(r, g, b);
     var h, s, l = (max + min) / 2;

if(max == min){
         h = s = 0;
     }
     else {
         var d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch(max){
             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
             case g: h = (b - r) / d + 2; break;
             case b: h = (r - g) / d + 4; break;
         }
         h /= 6;
     }
     return l;
 }
});
} )( jQuery );

</script>
</head>
<body>
<div class="header">
<div class="header-circle">
<img src="img/logo2.png">
<div class="header-logo">
<h5>Welcome To Restaurants House</h5>
</div>
</div> 
<div class="header-left">

<div class='cssmenu'>
  <ul>
    
    <li class='active has-sub'><a href='#'><span>Online Menu</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
   
  </ul>
</div> 
</div> 
<div class="header-right">

<div class='cssmenu'>
  <ul>
    
    <li class='active has-sub'><a href='#'><span>Menu</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
   
  </ul>
</div> 
</div> 
</div>

<div class="carousel-inner" role="listbox">

<div class="item active">
        <img src="img/1.jpg" alt="slider-img">
        <div class="carousel-caption">
          <h3>Welcome to Restaurants House</h3>
          <p>We are here for you</p>
        </div>
      </div>

<div class="item">
        <img src="img/2.jpg" alt="slider-img">
        <div class="carousel-caption">
          <h3>All Facility</h3>
          <p>We provide you All Facility and yummy food</p>
        </div>
      </div>
    
      <div class="item">
        <img src="img/3.jpg" alt="slider-img">
        <div class="carousel-caption">
          <h3>Awesome Place</h3>
          <p>You will feel Calm..</p>
        </div>
      </div>
  </div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/alarm.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Timing</h6>
</div> 
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/earth.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Online</h6>
</div> 
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/location.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Locations</h6>
</div> 
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/promotion.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Price-List</h6>
</div> 
</div> 
</div> 
<div class="topcontainer-block-readmore">
<div class="readmore-left">
<h6>Read More</h6>
</div> 
<div class="readmore-right">
<div class="readmore-img">
<img src="img/readmore.png" alt="readmore">
</div> 
</div> 
</div>

<div class="firststcontainer-block">

<img src="http://curdweb.com/navin/click.com/images/gallery8.png">
<div class="firststcontainer-block-icon">
<img src="img/ribbon.png" alt="icon">
</div> 
</div> 
<div class="firststcontainer-block-title">
<h6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</h6>

<div class="firststcontainer-block">

<img src="http://curdweb.com/navin/click.com/images/gallery7.png">
<div class="firststcontainer-block-icon">
<img src="img/ribbon.png" alt="icon">
</div> 
</div> 
<div class="firststcontainer-block-title">
<h6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</h6>

<div class="firststcontainer-block">

<img src="http://curdweb.com/navin/click.com/images/gallery6.png">
<div class="firststcontainer-block-icon">
<img src="img/ribbon.png" alt="icon">
</div> 
</div> 
<div class="firststcontainer-block-title">
<h6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</h6>

</div>

<div class="footer-new">
<div class="footer-mainblock">
<div class="footer-block">
<img src="img/fb.png">
</div>
<div class="footer-block">
<img src="img/tw.png">
</div>
<div class="footer-block">
<img src="img/v.png">
</div>
<div class="footer-block">
<img src="img/g.png">
</div>
</div>
</div>
</body>
</html>

Create style.css

@charset "utf-8";
body{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9de96+0,8ab66b+44,398235+100;Green+3D+%233 */
background: #c9de96; /* Old browsers */
background: -moz-linear-gradient(top,  #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */

}
.header{
padding:3px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

margin:auto;
height: 100px;
}
.header-circle{
 background:#fff;
    border-radius: 50%;
    height: 150px;
    margin: 8px auto auto;
    width: 150px;
 position: relative;
}
.header-circle img{
width:100%;
height:100%;
border-radius:50%;
margin:auto;
}
.header-left{
float:left;
padding:10px;
/*background:#999999;*/
margin-top: -142px;
border-radius:15px;
}
.header-right{
float:right;
padding:10px;
/*background:#666666;*/
margin-top: -142px;
border-radius:15px;
}
.header-logo{
margin-left: -198%;
    padding: 27px;
    width: 701px;
}
.header-logo h5{
background: #eee;
    box-shadow: 1px 3px 5px 3px #333;
    color: #FF0000;
 font-weight:bold;
    font-size: 23px;
    padding: 10px;
    text-align: center;
}
.slider-container-me{
margin:auto;
box-shadow: 9px 10px 6px 2px #333;
background:#A0A0A4;
}
/*----------------------------------top container containing circular block--------------------------------------*/
.topcontainer{
margin:auto;
padding:20px;
/*background:#808080;*/
overflow: auto;
}
.topcontainer-block{
/*background: #333;*/
    float: left;
    margin: 6px;
    padding: 10px;
    width: 24%;
}
.topcontainer-block-circle{
margin:auto;
border-radius:50%;
height:100px;
width:100px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ec1ea+0,2989d8+50,207cca+50,207cca+50,7db9e8+51 */
background: #2ec1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #2ec1ea 0%, #2989d8 50%, #207cca 50%, #207cca 50%, #7db9e8 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ec1ea), color-stop(50%,#2989d8), color-stop(50%,#207cca), color-stop(50%,#207cca), color-stop(51%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* IE10+ */
background: linear-gradient(to bottom,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ec1ea', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
text-align: center;
}
.topcontainer-block-circle:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ec1ea+0,7db9e8+0,7db9e8+0,2989d8+50,207cca+50,207cca+100 */
background: #2ec1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #2ec1ea 0%, #7db9e8 0%, #7db9e8 0%, #2989d8 50%, #207cca 50%, #207cca 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ec1ea), color-stop(0%,#7db9e8), color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(50%,#207cca), color-stop(100%,#207cca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ec1ea', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */

}
.topcontainer-block-circle img{
height: 50%;
    margin: 25px auto;
    text-align: center;
    width: 50%;
}
.topcontainer-block-circle img:hover{
margin:10px auto;

cursor:pointer;

}
.topcontainer-block-title{
padding:10px;
}
.topcontainer-block-title h6{

color: #000;
    font-size: 18px;
    text-align: center;
}
.topcontainer-block-readmore{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

margin:10px auto;
    overflow: auto;
    padding: 10px;
    width: 30%;
 border-radius: 11px;
}

.readmore-left{
float:left;
width:69%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */

cursor:pointer;
padding:10px;
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.readmore-left h6{
color: #FF0000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 2px 1px #ccc;
}
.readmore-right{
float:right;
width:30%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */

padding:10px;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.readmore-img{
height: 37px;
    margin: auto;
    width: 33px;
}
.readmore-img img{
height:100%;
width:100%;
margin:auto;
}
/*----------------------------------------------1st container containg box block------------------------------------*/
.firststcontainer{
margin:auto;
/*background:#ddd;*/
padding:20px;
overflow:auto;
}
.firststcontainer-block{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

float: left;
    margin: 8px;
    padding: 10px;
    width: 32%;
 border-radius:10px;
}
.firststcontainer-block-img{
background: #999999;
    height: 100px;
    margin: auto;
    width: 100%;
}
.firststcontainer-block-img img{
height:100%;
width:100%;
margin:auto;
}
.firststcontainer-block-icon{
float: left;
    height: 50px;
    margin-top: -99px;
    position: relative;
    width: 50px;
}
.firststcontainer-block-icon img{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */ 
    border-radius: 50%;
    height: 100%;
    margin: auto;
    width: 100%;
}
.firststcontainer-block-title{
background: #eee;
    float: left;
    padding: 10px;
    /*width: 80%;*/
}
.firststcontainer-block-title h6{
text-align:justify;
color:#333;
}
.firststcontainer-block-readmore{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */    border-radius: 10px;
    box-shadow: 2px 3px 2px 1px #333;
    cursor: pointer;
    float: right;
 width: 27%;
}
.firststcontainer-block-readmore p{
color:#FF0000;
text-align:center;
margin-top: 10px;
}
/*-----------------------------------------------------footer container ---------------------------------------*/
.footer-new{

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
margin:auto;
}
.footer-mainblock{
margin:auto;
padding:20px;
overflow:auto;
}
.footer-block{
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #a4b357 0%, #75890c 100%) repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 50px;
    margin: 10px;
    
    width: 50px;
}
.footer-block img{
height:100%;
width:100%;
margin:auto;
border-radius:50%;
padding: 10px;
cursor:pointer;
}
.footer-block img:hover{
background:#0066FF;
cursor:pointer;
}

/*--------------------------------------------header drop-down menu--------------------------------------------------*/
.cssmenu, .cssmenu ul, .cssmenu ul li, .cssmenu ul li a {
 margin: 0 auto;
 padding: 0;
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.cssmenu {
 width: 200px;
 font-family: Helvetica, Arial, sans-serif;
 color: #ffffff;
}
.cssmenu ul ul {
 display: none;
}
.align-right {
 float: right;
}
.cssmenu > ul > li > a {
 padding: 15px 20px;
 border-left: 1px solid #1682ba;
 border-right: 1px solid #1682ba;
 border-top: 1px solid #1682ba;
 cursor: pointer;
 z-index: 2;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
 color: #ffffff;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cssmenu > ul > li > a:hover, .cssmenu > ul > li.active > a, .cssmenu > ul > li.open > a {
 color: #eeeeee;
 /*background: #1fa0e4;
 background: -webkit-linear-gradient(#1fa0e4, #1992d1);
 background: -moz-linear-gradient(#1fa0e4, #1992d1);
 background: -o-linear-gradient(#1fa0e4, #1992d1);
 background: -ms-linear-gradient(#1fa0e4, #1992d1);
 background: linear-gradient(#1fa0e4, #1992d1);*/
}
.cssmenu > ul > li.open > a {
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
 border-bottom: 1px solid #1682ba;
}
.cssmenu > ul > li:last-child > a, .cssmenu > ul > li.last > a {
 border-bottom: 1px solid #1682ba;
}
.holder {
 width: 0;
 height: 0;
 position: absolute;
 top: 0;
 right: 0;
}
.holder::after, .holder::before {
 display: block;
 position: absolute;
 content: "";
 width: 6px;
 height: 6px;
 right: 20px;
 z-index: 10;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.holder::after {
 top: 17px;
 border-top: 2px solid #ffffff;
 border-left: 2px solid #ffffff;
}
.cssmenu > ul > li > a:hover > span::after, .cssmenu > ul > li.active > a > span::after, .cssmenu > ul > li.open > a > span::after {
 border-color: #eeeeee;
}
.holder::before {
 top: 18px;
 border-top: 2px solid;
 border-left: 2px solid;
 border-top-color: inherit;
 border-left-color: inherit;
}
.cssmenu ul ul li a {
 cursor: pointer;
 border-bottom: 1px solid #32373e;
 border-left: 1px solid #32373e;
 border-right: 1px solid #32373e;
 padding: 10px 20px;
 z-index: 1;
 text-decoration: none;
 font-size: 13px;
 color: #eeeeee;
 background: #49505a;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cssmenu ul ul li:hover > a, .cssmenu ul ul li.open > a, .cssmenu ul ul li.active > a {
 background: #424852;
 color: #ffffff;
}
.cssmenu ul ul li:first-child > a {
 box-shadow: none;
}
.cssmenu ul ul ul li:first-child > a {
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cssmenu ul ul ul li a {
 padding-left: 30px;
}
.cssmenu > ul > li > ul > li:last-child > a, .cssmenu > ul > li > ul > li.last > a {
 border-bottom: 0;
}
.cssmenu > ul > li > ul > li.open:last-child > a, .cssmenu > ul > li > ul > li.last.open > a {
 border-bottom: 1px solid #32373e;
}
.cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
 border-bottom: 0;
}
.cssmenu ul ul li.has-sub > a::after {
 display: block;
 position: absolute;
 content: "";
 width: 5px;
 height: 5px;
 right: 20px;
 z-index: 10;
 top: 11.5px;
 border-top: 2px solid #eeeeee;
 border-left: 2px solid #eeeeee;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.cssmenu ul ul li.active > a::after, .cssmenu ul ul li.open > a::after, .cssmenu ul ul li > a:hover::after {
 border-color: #ffffff;
}

/*----------------------------------Responsive code here-----------------------------------------------*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {  
 .topcontainer-block {
    float: none;
    margin: 6px auto;
    padding: 10px;
    width: 100%;
}
.topcontainer-block-readmore {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%) repeat scroll 0 0;
    border-radius: 19px;
    margin: 10px auto;
    overflow: auto;
    padding: 8px;
    width: 100%;
}
.firststcontainer-block {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%) repeat scroll 0 0;
    border-radius: 10px;
    float: none;
    margin: 8px auto;
    overflow: auto;
    padding: 10px;
    width: 100%;
}
.firststcontainer-block-readmore {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #a4b357 0%, #75890c 100%) repeat scroll 0 0;
    border-radius: 10px;
    box-shadow: 2px 3px 2px 1px #333;
    cursor: pointer;
    float: right;
    width: 100%;
}
.header {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%) repeat scroll 0 0;
    height: auto;
    margin: auto;
    padding: 3px;
}
.header-left {
    border-radius: 15px;
    float: none;
    margin: 88px auto;
    padding: 9px;
}
.header-right {
    border-radius: 15px;
    float: none;
    margin: 1px auto;
    padding: 10px;
}
.header-logo {
    margin: 1px auto;
    padding: 10px;
    position: relative;
    width: 100%;
}
.header-logo h5 {
    background: #eee none repeat scroll 0 0;
    box-shadow: 1px 3px 5px 3px #333;
    color: #ff0000;
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

}

Wednesday 15 July 2015

Responsive Website Design

Create index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Website Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
 width: 100%;
 margin: auto;
 height:280px;
}
</style>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.textscroller.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.textscroller-0.1.0-min.js"></script>
<style>
.jquery-textscroller-wrapper-outher.default {
 margin:0!important;
}
</style>
</head>
<body>
<div class="header">
  <h2><img src="img/newlogo.png"></h2>
  <h3>Web Design</h3>
</div>

<div class="main-wrapper">
  <div class="top-container">
    
    <div class="top-container-left">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        
        <div class="carousel-inner" role="listbox">
          <div class="item active"> <img src="http://1.bp.blogspot.com/-0p3iQMpWARU/VZPMM3vqJqI/AAAAAAAABR4/a1XDR8KmqCk/s320/desktop.png" alt="psd design">
            <div class="carousel-caption">
              <h3>Title</h3>
              <p>Descriptions</p>
            </div>
          </div>
          <div class="item"> <img src="
http://4.bp.blogspot.com/-zP05T9nUBlQ/VXGLJdpo2GI/AAAAAAAABLI/1_yB6Azfgds/s320/desktop.png" alt="psd design">
            <div class="carousel-caption">
              <h3>Title</h3>
              <p>Descriptions</p>
            </div>
          </div>
          <div class="item"> <img src="http://3.bp.blogspot.com/-ezdat3ibQhc/VZ85kyfFLJI/AAAAAAAABVQ/sXGJ1efAygg/s320/1.png" alt="psd design">
            <div class="carousel-caption">
              <h3>Title</h3>
              <p>Descriptions</p>
            </div>
          </div>
          <div class="item"> <img src="http://1.bp.blogspot.com/-hBuJWDfy4YE/VZ3t1KDHtnI/AAAAAAAABUY/Jus6jHC752Y/s320/1.png" alt="psd design">
            <div class="carousel-caption">
              <h3>Title</h3>
              <p>Descriptions</p>
            </div>
          </div>
        </div>
        
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
      
    </div>
    
    
    <div class="top-container-left">
      
      <div class="demo-1">
        <div class="myart">
          <h3>New Updates</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <h3>New Projects</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <h3>New Concepts</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <h3>New Apps</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="fst-container">
    
    <div class="fst-container-block">
      <div class="fst-container-circle"> <img src="http://2.bp.blogspot.com/-FtojAxCyepw/VZX_afxac8I/AAAAAAAABSU/onrqLHXzccA/s320/new-desktop.jpg" alt="psd design"> </div>
      
      <div class="fst-container-title">
        <h3> Title</h3>
      </div>
      
      <div class="fst-container-des">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>
      
      <div class="fst-container-readmore">
        <p>READ MORE</p>
      </div>
      
    </div>
    
    
    <div class="fst-container-block">
      <div class="fst-container-circle"> <img src="http://1.bp.blogspot.com/-0p3iQMpWARU/VZPMM3vqJqI/AAAAAAAABR4/a1XDR8KmqCk/s320/desktop.png" alt="psd design"> </div>
      
      <div class="fst-container-title">
        <h3> Title</h3>
      </div>
      
      <div class="fst-container-des">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>
      
      <div class="fst-container-readmore">
        <p>READ MORE</p>
      </div>
      
    </div>
    
    
    <div class="fst-container-block">
      <div class="fst-container-circle"> <img src="http://3.bp.blogspot.com/-KlHNbTVhndY/VYpzbvtEO7I/AAAAAAAABRI/73ZCR7JgKBQ/s320/redes.jpg" alt="psd design"> </div>
      
      <div class="fst-container-title">
        <h3> Title</h3>
      </div>
      
      <div class="fst-container-des">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>
      
      <div class="fst-container-readmore">
        <p>READ MORE</p>
      </div>
      
    </div>
    
  </div>
  
  
  
  <div class="scnd-container">
    <div class="scnd-container-block">
      <div class="scnd-container-block-img"> <img src="http://3.bp.blogspot.com/-ezdat3ibQhc/VZ85kyfFLJI/AAAAAAAABVQ/sXGJ1efAygg/s320/1.png" alt="psd design"> </div>
      
      <div class="scnd-container-title">
        <h3> Title</h3>
      </div>
      
      <div class="fst-container-des">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>
      
      <div class="scnd-container-readmore">
        <p>READ MORE</p>
      </div>
      
    </div>
    
    <div class="scnd-container-block">
      <div class="scnd-container-block-img"> <img src="http://1.bp.blogspot.com/-hBuJWDfy4YE/VZ3t1KDHtnI/AAAAAAAABUY/Jus6jHC752Y/s320/1.png" alt="psd design"> </div>
      
      <div class="scnd-container-title">
        <h3> Title</h3>
      </div>
      
      <div class="fst-container-des">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>
      
      <div class="scnd-container-readmore">
        <p>READ MORE</p>
      </div>
      
    </div>
    
    <div class="scnd-container-block">
      <div class="scnd-container-block-img"> <img src="http://4.bp.blogspot.com/-CdxnNek7_i8/VWLKvfxjkNI/AAAAAAAABJw/D1Qev0Tqmu8/s320/news-letter.png" alt="psd design"> </div>
      
      <div class="scnd-container-title">
        <h3> Title</h3>
      </div>
      
      <div class="fst-container-des">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>
      
      <div class="scnd-container-readmore">
        <p>READ MORE</p>
      </div>
      
    </div>
    
  </div>
  
  
  <div class="thrd-container">
    <div class="thrd-container-block">
      <div class="thrd-container-block-img"> <img src="http://3.bp.blogspot.com/-KlHNbTVhndY/VYpzbvtEO7I/AAAAAAAABRI/73ZCR7JgKBQ/s320/redes.jpg" alt="psd design"> </div>
      
    </div>
    
    <div class="thrd-container-block">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    
  </div>
  
  
  <div class="fourth-container focus">
    <h3>Our Clients</h3>
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://2.bp.blogspot.com/-J3ZG-LE77Yw/VaSFXILaP-I/AAAAAAAABV8/Ai90s7jQ27Q/s320/about.jpg" alt="psd design"> </div>
      
    </div>
    
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://3.bp.blogspot.com/-KlHNbTVhndY/VYpzbvtEO7I/AAAAAAAABRI/73ZCR7JgKBQ/s320/redes.jpg" alt="psd design"> </div>
      
    </div>
    
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://4.bp.blogspot.com/-AEsGe0FYmh4/VYf7YnA3RZI/AAAAAAAABQg/RbwTece3630/s320/desktop.png" alt="psd design"> </div>
      
    </div>
    
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://2.bp.blogspot.com/-RzhtT3Cnbko/VYFB2VO7TuI/AAAAAAAABQM/YVwhcImCPUQ/s320/desktop.png" alt="psd design"> </div>
      
    </div>
    
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://4.bp.blogspot.com/-zP05T9nUBlQ/VXGLJdpo2GI/AAAAAAAABLI/1_yB6Azfgds/s320/desktop.png" alt="psd design"> </div>
      
    </div>
    
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://2.bp.blogspot.com/-2tDIST7FHhU/VWfmORvEf6I/AAAAAAAABKU/HnNU1YaOxow/s320/light-box1.png" alt="psd design"> </div>
      
    </div>
    
    
    <div class="fourth-container-block">
      <div class="fourth-container-block-circle"> <img src="http://4.bp.blogspot.com/-CdxnNek7_i8/VWLKvfxjkNI/AAAAAAAABJw/D1Qev0Tqmu8/s320/news-letter.png" alt="psd design"> </div>
      
    </div>
    
  </div>
  
  
  <div class="footer-container">
    
    <div class="footer-container-block">
      <h3>Projects</h3>
      <ul>
        <li><a href="#">Online Marketing</a></li>
        <li><a href="#">Online Cab Booking</a></li>
        <li><a href="#">Marketing Expert</a></li>
        <li><a href="#">Freelancer Hub</a></li>
        <li><a href="#">Stock Exchange</a></li>
      </ul>
    </div>
    
    
    <div class="footer-container-block">
      <h3>Teams</h3>
      <ul>
        <li><a href="#">Web Designer</a></li>
        <li><a href="#">Web Developer</a></li>
        <li><a href="#">CMS Developer</a></li>
        <li><a href="#">Java Developer</a></li>
        <li><a href="#">Sales Team</a></li>
      </ul>
    </div>
    
    
    <div class="footer-container-block">
      <h3>Other Links</h3>
      <ul>
        <li><a href="#">Wireframes</a></li>
        <li><a href="#">Android</a></li>
        <li><a href="#">Shopping-Cart</a></li>
        <li><a href="#">Digital Marketing</a></li>
        <li><a href="#">Seo-Expert</a></li>
      </ul>
    </div>
    
  </div>
  
</div>

<script type="text/javascript">
   
    jQuery(document).ready(function(){
      
     jQuery(".demo-1").textscroller({
      width : "auto",
      height : 250,
      innerTextButtonPrev : ':',
      innerTextButtonNext : ';'
     });
     
     jQuery(".demo-2").textscroller({
      width : "auto",
            height : 200,
            innerTextButtonPrev : '<',
            innerTextButtonNext : '>',
            vertical : false,
   addCustomClass : 'default-centered-buttons'
     });
     
    });
    </script>
</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#333;
}
.main-wrapper {
 padding:20px;
 background:#ccc;
 margin:auto;
 overflow:auto;
}
.header {
 padding:10px;
 background:#000;
 margin:auto;
}
.header h2 {
 color:#ccc;
 padding:0px;
 margin:0px;
}
.header h3 {
 color:#ccc;
 padding:0px;
 margin-top: -89px;
 text-align:center;
}
.top-container {
 margin:auto;
 padding:10px;
 background:#eee;
 overflow:auto;
}
.top-container-left {
 float:left;
 width:50%;
 padding: 10px;
}
.fst-container {
 margin:auto;
 background:#fff;
 padding:10px;
 overflow:auto;
}
.fst-container-block {
 float: left;
 margin: 8px;
 padding: 10px;
 width: 32%;
}
.fst-container-circle {
 background: #000;
 border-radius: 50%;
 height: 150px;
 margin: auto;
 padding: 10px;
 width: 150px;
}
.fst-container-circle:hover {
 background: #0099FF;
}
.fst-container-circle img {
 margin:auto;
 width:100%;
 height:100%;
 border-radius:50%;
}
.fst-container-title {
 margin:10px auto;
}
.fst-container-title h3 {
 color:#0099FF;
 margin:0px;
 padding:0px;
 text-align:center;
}
.fst-container-des {
 margin:10px auto;
}
.fst-container-des p {
 color:#333;
 text-align:center;
}
.fst-container-readmore {
 margin:10px auto;
}
.fst-container-readmore p {
 background: #0099ff;
 border-radius: 13px;
 box-shadow: 1px 2px 1px #333;
 color: #000;
 cursor: pointer;
 margin: auto;
 padding: 10px;
 text-align: center;
 width: 50%;
}
.scnd-container {
 margin:auto;
 background:#eee;
 padding:10px;
 overflow:auto;
}
.scnd-container-block {
 background: #fff;
 box-shadow: 1px 2px 2px #333;
 float: left;
 margin: 8px;
 padding: 10px;
 width: 32%;
}
.scnd-container-block-img {
 height:150px;
 width:150px;
 margin:auto;
 padding:10px;
 background:#ddd;
}
.scnd-container-block-img img {
 height:100%;
 width:100%;
 margin:auto;
}
.scnd-container-block-img:hover img {
 -webkit-transform:scale(1.25); /* Safari and Chrome */
 -moz-transform:scale(1.25); /* Firefox */
 -ms-transform:scale(1.25); /* IE 9 */
 -o-transform:scale(1.25); /* Opera */
 transform:scale(2.25);
}
.scnd-container-title {
 margin:10px auto;
}
.scnd-container-title h3 {
 color:#0099FF;
 margin:0px;
 padding:0px;
 text-align:center;
}
.scnd-container-des {
 margin:10px auto;
}
.scnd-container-des p {
 color:#ccc;
 text-align:center;
}
.scnd-container-readmore {
 margin:10px auto;
}
.scnd-container-readmore p {
 background: #0099FF;
 border-radius: 13px;
 box-shadow: 1px 2px 1px #333;
 color: #000;
 cursor: pointer;
 padding: 10px;
 text-align: center;
}
.thrd-container {
 margin:auto;
 background:#ddd;
 padding:10px;
 overflow:auto;
}
.thrd-container-block {
 width:50%;
 padding:10px;
 float:left;
 background:#333;
}
.thrd-container-block p {
 color:#ccc;
}
.thrd-container-block-img {
 margin:auto;
 height:150px;
 width:150px;
 padding:10px;
 background:#ccc;
}
.thrd-container-block-img img {
 margin:auto;
 height:100%;
 width:100%;
}
.fourth-container {
 margin:auto;
 background:#eee;
 padding:10px;
 overflow:auto;
}
.fourth-container h3 {
 color: #000;
 font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
 font-weight: bold;
 text-align: center;
 text-shadow: 1px 2px 1px #333;
}
.fourth-container-block {
 /*background: #333;*/
    float: left;
 margin: 19px;
 padding: 10px;
 width: 11%;
}
.fourth-container-block-circle {
 height:100px;
 width:100px;
 border-radius:50%;
 background:#ddd;
 margin:auto;
}
.fourth-container-block-circle img {
 height:100%;
 width:100%;
 border-radius:50%;
 margin:auto;
 padding:10px;
 opacity: 0.51;
}
.fourth-container-block-circle img:hover {
 background:#0099FF;
 opacity:2.0;
}
.footer-container {
 margin:auto;
 background:#000;
 padding:10px;
 overflow: auto;
}
.footer-container-block {
 float: left;
 margin: 8px;
 padding: 10px;
 width: 32%;
}
.footer-container-block h3 {
 text-align:center;
 text-shadow: 1px 1px 1px #fff;
}
.footer-container-block ul {
 margin-left: 138px;
 padding: 1px;
}
.footer-container-block ul li {
 list-style-type:square;
 color:#0099FF;
 text-align: left;
}
.footer-container-block ul li a {
 color:#FFFFFF;
 text-decoration:none;
}
.footer-container-block ul li a:hover {
 color:#0066FF;
 text-decoration:none;
}
.myart {
}
.myart h3 {
 text-align:center;
 color:#0099FF;
}
.myart p {
 text-align:justify;
}

/*---------------------------------------for responsive code here-----------------------------------*/

@media screen and (min-device-width: 320px) and (max-device-width: 756px) {
.top-container-left {
 float: none;
 margin: auto;
 padding: 10px;
 width: 100%;
}
.fst-container-block {
 float: none;
 margin: auto;
 padding: 10px;
 width: 100%;
}
.scnd-container-block {
 float: none;
 margin: auto;
 padding: 10px;
 width: 100%;
}
.thrd-container-block {
 float: none;
 margin: auto;
 padding: 10px;
 width: 100%;
}
.fourth-container-block {
 float: none;
 margin: auto;
 padding: 10px;
 width: 100%;
}
.footer-container-block {
 float: none;
 margin: auto;
 padding: 10px;
 width: 100%;
}
.footer-container-block ul {
 margin-left: 0;
 padding: 1px;
}
}

Create jquery.textscroller.css

@font-face {/* SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 */
    font-family:'WebSymbolsRegular';
    src: url('../fonts/websymbols/WebSymbols-Regular-webfont.eot');
    src: url('../fonts/websymbols/WebSymbols-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/websymbols/WebSymbols-Regular-webfont.woff') format('woff'),
         url('../fonts/websymbols/WebSymbols-Regular-webfont.ttf') format('truetype'),
         url('../fonts/websymbols/WebSymbols-Regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* init animation settings for opacity */
.jquery-textscroller-wrapper-outher.prev-next-active,
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-next {
 -moz-transition:all 0.7s ease;
 -o-transition:all 0.7s ease;
 -webkit-transition:all 0.7s ease;
 -ms-transition:all 0.7s ease;
 transition:all 0.7s ease;
}

/* basic styles */
.jquery-textscroller-helper-container {
 position:fixed;
 width:100%;
 display:none;
 visibility:hidden;
 top:-9999px;
}
.jquery-textscroller-wrapper-outher:after,
.jquery-textscroller-wrapper-outher .jquery-textscroller-wrapper:after {
 content:'.';
 display:block;
 clear:both;
 height:0;
 line-height:0;
 visibility:hidden;
}
.jquery-textscroller-wrapper-outher {
 position:relative;
 z-index:0;
}
.jquery-textscroller-wrapper-outher .jquery-textscroller-wrapper {
 overflow:hidden;
 position:relative;
 z-index:0;
}
.jquery-textscroller-wrapper-outher .jquery-textscroller-wrapper .jquery-textscroller {
 position:absolute;
 left:0;
 top:0;
}
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-next {
 display:block;
 position:absolute;
 z-index:1;
 cursor:pointer;
}
.jquery-textscroller-wrapper-outher.vertical .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.vertical .jquery-textscroller-button-next {
 left:0;
}
.jquery-textscroller-wrapper-outher.horizontal .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.horizontal .jquery-textscroller-button-next {
 top:0;
}
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-prev.inactive,
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-next.inactive {
 /*filter:alpha(opacity='30');
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;*/
}
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-prev.disabled,
.jquery-textscroller-wrapper-outher .jquery-textscroller-button-next.disabled {
 display:none;
}
.jquery-textscroller-wrapper-outher.vertical .jquery-textscroller-button-prev {
 top:0;
}
.jquery-textscroller-wrapper-outher.vertical .jquery-textscroller-button-next {
 bottom:0;
}
.jquery-textscroller-wrapper-outher.horizontal .jquery-textscroller-button-prev {
 left:0;
}
.jquery-textscroller-wrapper-outher.horizontal .jquery-textscroller-button-next {
 right:0;
}
.jquery-textscroller-wrapper-outher.horizontal {
 text-align:justify;
}

.jquery-textscroller-wrapper-outher.default {
 border:1px solid #fff;
 background-color:#f2f2f2;
 
 margin:2em 0;
 padding:1em;
 
 -moz-box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 -webkit-box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 
 -moz-border-radius:0.25em;
 -webkit-border-radius:0.25em;
 -o-border-radius:0.25em;
 -ms-border-radius:0.25em;
 -khtml-border-radius:0.25em;
 border-radius:0.25em;
 
 -moz-background-clip:padding-box !important;
 -webkit-background-clip:padding-box !important;
 background-clip:padding-box !important;
}
.jquery-textscroller-wrapper-outher.default.vertical.prev-next-active {
 border-right-color:#576368;
}
.jquery-textscroller-wrapper-outher.default.horizontal.prev-next-active {
 border-top-color:#576368;
}
.jquery-textscroller-wrapper-outher.default .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default .jquery-textscroller-button-next {
 width:1.3em;
 height:37px;
 line-height:0;
 
 text-align:center;
 text-decoration:none;
 text-transform:none;
 text-shadow:0 0 0.030em rgba(0,0,0,0.9);
 
 font-family:'WebSymbolsRegular';
 font-size:2.2em;
 font-weight:normal;
    font-style:normal;
 
 color:#576368;
}
.jquery-textscroller-wrapper-outher.default .jquery-textscroller-button-prev.inactive,
.jquery-textscroller-wrapper-outher.default .jquery-textscroller-button-next.inactive {
 color:#c4c7c9;
 text-shadow:0 0 0.030em rgba(0,0,0,0.3);
}
.jquery-textscroller-wrapper-outher.default.vertical .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default.vertical .jquery-textscroller-button-next {
 left:auto;
 right:-0.7em;
}
.jquery-textscroller-wrapper-outher.default.vertical .jquery-textscroller-button-prev {
 top:-0.5em;
}
.jquery-textscroller-wrapper-outher.default.vertical .jquery-textscroller-button-next {
 bottom:-0.5em;
}
.jquery-textscroller-wrapper-outher.default.horizontal .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default.horizontal .jquery-textscroller-button-next {
 top:-0.55em;
}
.jquery-textscroller-wrapper-outher.default.horizontal .jquery-textscroller-button-prev {
 left:-0.6em;
}
.jquery-textscroller-wrapper-outher.default.horizontal .jquery-textscroller-button-next {
 right:-0.6em;
}

.jquery-textscroller-wrapper-outher.default-centered-buttons {
 border:1px solid #fff;
 
 background-color:#f2f2f2;
 
 -moz-box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 -webkit-box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 
 -moz-border-radius:0.25em;
 -webkit-border-radius:0.25em;
 -o-border-radius:0.25em;
 -ms-border-radius:0.25em;
 -khtml-border-radius:0.25em;
 border-radius:0.25em;

-moz-background-clip:padding-box !important;
 -webkit-background-clip:padding-box !important;
 background-clip:padding-box !important;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.vertical {
 margin:3.5em 0;
 padding:1em;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal {
 margin:1em 2.8em;
 padding:1em;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default-centered-buttons .jquery-textscroller-button-next {
 height:37px;
 line-height:0;
 
 text-align:center;
 text-decoration:none;
 text-transform:none;
 text-shadow:0 0 0.030em rgba(0,0,0,0.7);
 
 font-family:'WebSymbolsRegular';
 font-size:2.2em;
 font-weight:normal;
    font-style:normal;
 
 color:#576368;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.vertical .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default-centered-buttons.vertical .jquery-textscroller-button-next {
 width:100%;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal .jquery-textscroller-button-next {
 width:1.3em;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons .jquery-textscroller-button-prev.inactive,
.jquery-textscroller-wrapper-outher.default-centered-buttons .jquery-textscroller-button-next.inactive {
 filter:alpha(opacity='30');
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.vertical .jquery-textscroller-button-prev {
 top:-1.3em;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.vertical .jquery-textscroller-button-next {
 bottom:-1.3em;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal .jquery-textscroller-button-next {
 top:50%;
 margin-top:-19px;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal .jquery-textscroller-button-prev {
 left:-1.6em;
}
.jquery-textscroller-wrapper-outher.default-centered-buttons.horizontal .jquery-textscroller-button-next {
 right:-1.6em;
}

.jquery-textscroller-wrapper-outher.button-icon {
 border:1px solid #fff;
 
 background-color:#f2f2f2;
 
 -moz-box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 -webkit-box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 box-shadow:0 0 0.125em 0 rgba(0,0,0,0.5);
 
 -moz-border-radius:0.25em;
 -webkit-border-radius:0.25em;
 -o-border-radius:0.25em;
 -ms-border-radius:0.25em;
 -khtml-border-radius:0.25em;
 border-radius:0.25em;
 -moz-background-clip:padding-box !important;
 -webkit-background-clip:padding-box !important;
 background-clip:padding-box !important;
}
.jquery-textscroller-wrapper-outher.button-icon.vertical {
 margin:1em 0;
 padding:1em;
}
.jquery-textscroller-wrapper-outher.button-icon.horizontal {
 margin:1em 0.6em;
 padding:1em;
}
.jquery-textscroller-wrapper-outher.button-icon .jquery-textscroller-button-prev.inactive,
.jquery-textscroller-wrapper-outher.button-icon .jquery-textscroller-button-next.inactive {
 filter:alpha(opacity='30');
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;
}
.jquery-textscroller-wrapper-outher.button-icon .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.button-icon .jquery-textscroller-button-next {
 background:transparent url(../img/sprite-buttons.png) 0 0 no-repeat;
 width:22px;
 height:22px;
}
.jquery-textscroller-wrapper-outher.button-icon.vertical .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.button-icon.vertical .jquery-textscroller-button-next {
 left:50%;
 margin-left:-11px;
}
.jquery-textscroller-wrapper-outher.button-icon.vertical .jquery-textscroller-button-prev {
 top:-1em;
}
.jquery-textscroller-wrapper-outher.button-icon.vertical .jquery-textscroller-button-next {
 bottom:-1em;
 background-position:0 -22px;
}
.jquery-textscroller-wrapper-outher.button-icon.horizontal .jquery-textscroller-button-prev,
.jquery-textscroller-wrapper-outher.button-icon.horizontal .jquery-textscroller-button-next {
 top:50%;
 margin-top:-11px;
}
.jquery-textscroller-wrapper-outher.button-icon.horizontal .jquery-textscroller-button-prev {
 left:-1em;
 background-position:0 -44px;
}
.jquery-textscroller-wrapper-outher.button-icon.horizontal .jquery-textscroller-button-next {
 right:-1em;
 background-position:0 -66px;
}