themes/default/grey/index-2.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="software app site template" />
<meta name="keywords" content="corporate, software, app, business, marketing, site template, web marketing, internate marketing"/>
<meta name="author" content="Tansh" />
<title>Softone by Tansh</title>
<link rel="icon" type="image/png" href="images/favicon.png"/>
<!--style sheet-->
<link rel="stylesheet" media="screen" href="css/style.css"/>
<link rel="stylesheet" media="screen" href="css/navigation.css"/>
<link rel="stylesheet" media="screen" href="css/jquery-ui-1.8.17.custom.css"/>
<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css">
<![endif]-->

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

<!--nivo slider scripts starts-->
<link rel="stylesheet" media="screen" href="css/nivo-slider.css"/>
<script src="js/jquery.nivoslider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
	effect: 'fold',
	slices:15,
	boxCols:7,
	boxRows:4,
	animSpeed:600,
	pauseTime:5000,
	captionOpacity:1,
	directionNav:true,
	directionNavHide:true,
	controlNav:false,
	afterLoad: function(){
	jQuery(".nivo-caption").animate({right:"50"}, {easing:"easeOutBack", duration: 500})
	},
	beforeChange: function(){
	jQuery(".nivo-caption").animate({right:"-350"}, {easing:"easeInBack", duration: 500})
	},
	afterChange: function(){
	jQuery(".nivo-caption").animate({right:"50"}, {easing:"easeOutBack", duration: 500})
	}
	});
});
</script>
<!--nivo slider scripts ends-->

<!--jcarousel scripts starts-->
<link rel="stylesheet" media="screen" href="css/jcarousel.css"/>
<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
//Image slider for gallery	
$(document).ready(function() {	
$('#mycarousel').jcarousel({
         easing: 'easeInOutQuint',
         animation: 600
});
});
</script>
<!--jcarousel scripts ends-->

<!--prettyphoto scripts starts-->
<link rel="stylesheet" media="screen" href="css/prettyPhoto.css"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {	
$('a[data-rel]').each(function() {
		$(this).attr('rel', $(this).data('rel'));
});
$("a[rel^='prettyPhoto[mixed]']").prettyPhoto({
		animation_speed: 'fast',
		slideshow: 5000,
		autoplay_slideshow: false,
		opacity: 0.80,
		show_title: false,
		theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
		overlay_gallery: false,
		social_tools: false
});
});
</script>
<!--prettyphoto scripts ends-->

<!--subscribe scripts starts-->
<script src="js/jquery.validate.js"  type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {	
$(function() {
		var v = $("#subform").validate({
		submitHandler: function(form) {
		$(form).ajaxSubmit({
		target: "#result_sub",
		clearForm: true
		});
		}
		});
});	
//To clear form field on page refresh
$('#subform #email').val('');
});
</script>
<!--subscribe scripts ends-->

</head>
<body>

<!--top starts-->
<div id="top">
  <div class="container clearfix">
    <div class="grid_12">
      <p>Hello! it's me... softone</p>
      <p class="call">Call for support <span class="color">+ 12 345 678</span></p>
    </div>
  </div>
</div>
<!--top ends--> 

<!--header starts-->
<div id="header">
  <div class="container  header_inner clearfix">
    <div class="grid_12"> 
      
      <!--logo here--> 
      <a href="#"> <img src="images/logo.png" width="125" height="35" alt="logo" class="logo"> </a> 
      
      <!--menu / navigation starts-->
      <ul class="sf-menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Pages</a>
          <ul>
            <li><a href="index.html">Home - Style 1 + Anything slider</a></li>
            <li><a href="index-2.html">Home - Style 2 + Nivo slider</a></li>
            <li><a href="index-3.html">Home - Style 3 + Video</a></li>
              <li><a href="portfolio4col.html">Portfolio - 4 column</a></li>
            <li><a href="features.html">Product features page</a></li>
            <li><a href="#">Pricing pages</a>
              <ul>
                <li><a href="pricing-3column.html">Three columns</a></li>
                <li><a href="pricing-4column.html">Four columns</a></li>
                <li><a href="pricing-5column.html">Five columns</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact page</a></li>
            <li><a href="help.html">Help page</a></li>
            <li><a href="features.html">Full width page</a></li>
            <li><a href="left-sidebar.html">Left sidebar page</a></li>
          </ul>
        </li>
        <li><a href="theme-features.html">Features</a> </li>
        <li><a href="#">Pricing</a>
          <ul>
            <li><a href="pricing-3column.html">Three columns</a></li>
            <li><a href="pricing-4column.html">Four columns</a></li>
            <li><a href="pricing-5column.html">Five columns</a></li>
          </ul>
        </li>
        <li><a href="#">Color Styles</a>
          <ul>
            <li><a href="../index.html">Softone Indigo</a></li>
            <li><a href="../red/index.html">Softone Red</a></li>
            <li><a href="index.html">Softone  Grey</a></li>
            <li><a href="../cyan/index.html">Softone Cyan</a></li>
          </ul>
        </li>
        <li><a href="contact.html">Support</a></li>
        <li class="login_link"> 
          
          <!--login_wrapper starts-->
          <div class="login_wrapper"> <a href="#" class="login"><span>login</span></a>
            <form method="post" id="login_form" action="#">
              <fieldset>
                <p>
                  <label>Username or email</label>
                  <input id="username" name="username" type="text"/>
                </p>
                <p>
                  <label>Password</label>
                  <input id="password" name="password" type="password"/>
                </p>
                <p>
                  <input class="login_submit" value="Login" type="submit"/>
                </p>
                <div class="clear"></div>
                <p class="remember">
                  <input id="remember" name="remember" type="checkbox"/>
                  <label  class="remember">Remember me</label>
                </p>
                <p class="forgot"> Forgot <a href="#">Password</a> or <a href="#">Username</a>...?</p>
              </fieldset>
            </form>
          </div>
          <!--login_wrapper ends--> 
          
        </li>
      </ul>
      <!--menu ends-->
      
      <div class="clear"></div>
    </div>
  </div>
</div>
<!--header ends--> 

<!--header_bottom starts-->
<div id="header_bottom">
  <div class="container clearfix">
    <div class="grid_12"> 
      
      <!--slideshow starts-->
      <div id="slideshow"> 
        
        <!--images for slider here-->
        <div id="slider" class="nivoSlider"> <img src="images/preview/slide-1.jpg" width="912" height="350" alt="image" title='#caption1' /> <img src='images/preview/slide-2.jpg' width="912" height="350" alt="image" title='#caption2' /> <img src='images/preview/slide-3.jpg' width="912" height="350" alt="image"  title='#caption3' /> </div>
        
        <!--caption for slide one starts-->
        <div id="caption1" class="caption-hide">
          <p>Claritas est etiam processus dynamicus</p>
          <span class="heading1">Softone advantage.</span> <span class="heading3">Make your app visible to plethora of <span class="color">accumsan etiusto</span> odio.</span> <a href="#" class="button_appstore"></a>
          <div class="clear"></div>
        </div>
        <!--caption for slide one ends--> 
        
        <!--caption for slide two starts-->
        <div id="caption2" class="caption-hide"> <span class="heading2">Claritas est etiam processus </span>
          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat <span class="color">nulla facilisis</span> at vero eros et accumsan duis dolore te feugait nulla facilisi.</p>
          <a href="#" class="top_padding">Learn more &raquo;</a> </div>
        <!--caption for slide two ends--> 
        
        <!--caption for slide three starts-->
        <div id="caption3" class="caption-hide"> <span class="heading2">Autem vel eum iriure hendrerit velit.</span>
          <ul class="list3 clearfix">
            <li>Legentis in iis qui facit eorum.</li>
            <li>Luptatum zzril delenit augue.</li>
            <li>Claritas est etiam processus </li>
            <li>Duis autem vel eum iriure </li>
          </ul>
        </div>
        <!--caption for slide three ends--> 
        
      </div>
      <!--slideshow ends--> 
      
      <!--action starts-->
      <div class="action1 clearfix">
        <h1><span>Introducing softone HTML lorem ipsum dolor template</span></h1>
        <p>Mac OS X 10.6 or later required </p>
        <span class="spacer_20px"></span> 
        
        <!--button wrapper here-->
        <div class="button_wrapper">
          <ul>
            <li><a href="#" class="button button-orange"> <span><img src="images/icons/button/button-icon1-orange.png" width="17" height="16" alt="icon">Buy now</span> </a></li>
            <li><span class="or">or</span></li>
            <li class="last"><a href="#" class="button button-orange"> <span><img src="images/icons/button/button-icon2-orange.png" width="17" height="16" alt="icon">Download</span> </a></li>
          </ul>
        </div>
      </div>
      <!--action ends-->
      
      <div class="clear"></div>
    </div>
  </div>
</div>
<!--header_bottom ends--> 

<!--section for features and testimonial starts-->
<div class="section colored">
  <div class="container clearfix"> 
    
    <!--features starts-->
    <div class="grid_9 features_style1">
      <h2>Few reasons why you'll love softone </h2>
      <div class="grid_3 first"> <img src="images/icons/features/feature-icon-1.png" width="32" height="32" alt="icon">
        <h4>Clean design</h4>
        <p>Lorem ipsum dolor sit amet elit, sed diam nonummy nibh zzril laoreet dolore magna aliquam erat volutpat.</p>
      </div>
      <div class="grid_3"> <img src="images/icons/features/feature-icon-2.png" width="32" height="32" alt="icon">
        <h4>Easy to customize</h4>
        <p>Duis autem vel eum iriure dolor in vulputate velit molestie consequat, vel illum feugiat nulla facilisis</p>
      </div>
      <div class="grid_3 last"> <img src="images/icons/features/feature-icon-3.png" width="32" height="32" alt="icon">
        <h4>Cost effective</h4>
        <p>Nam liber tempor cum soluta nobis eleifend option doming quod mazim placerat facer possim assum.</p>
      </div>
      
      <!--spacer here-->
      <div class="spacer_30px"></div>
      <!--spacer ends-->
      
      <div class="grid_3 first"> <img src="images/icons/features/feature-icon-4.png" width="32" height="32" alt="icon">
        <h4>W3C valid </h4>
        <p>Nam liber tempor cum soluta eum nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
      </div>
      <div class="grid_3"> <img src="images/icons/features/feature-icon-5.png" width="32" height="32" alt="icon">
        <h4>Feature goes here</h4>
        <p>Lorem ipsum dolor sit amet elit, sed diam tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
      <div class="grid_3 last"> <img src="images/icons/features/feature-icon-6.png" width="32" height="32" alt="icon">
        <h4>24 X 7 support</h4>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit, vel illum dolore eu feugiat nulla facilisis</p>
      </div>
    </div>
    <!--features ends--> 
    
    <!--testimonial starts-->
    <div class="grid_3 clearfix nav_position">
      <h2>What they say...</h2>
      
      <!--testimonial nav starts-->
      <div class="nav">
        <div class="prev2"></div>
        <div class="next2"></div>
      </div>
      <!--testimonial nav ends-->
      
      <div class="testimonial_style1"> 
        
        <!--first testimonial starts-->
        <div>
          <p>" Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim "</p>
          <span>John Doe <br/>
          http://companyname.com</span> </div>
        <!--first testimonial ends--> 
        
        <!--second testimonial starts-->
        <div>
          <p>" Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram decima. "</p>
          <span>Jenny<br/>
          http://companyname.com</span> </div>
        <!--second testimonial ends--> 
        
      </div>
    </div>
    <!--testimonial ends--> 
    
  </div>
</div>
<!--section for features and testimonial ends--> 

<!--section for subscribe starts-->
<div class="section">
  <div class="container clearfix">
    <div class="grid_12"> 
      
      <!--box starts-->
      <div class="box">
        <div class="box_inner clearfix"> 
          
          <!--subscribe text starts-->
          <div class="subscribe_text">
            <h3>Subscribe for product updates and promotions!</h3>
            <p>Nam liber tempor duis soluta imperdiet doming mazim placerat facer assum.</p>
          </div>
          <!--subscribe text ends--> 
          
          <!--subscribe form here-->
          <form id="subform" method="post" action="http://tanshcreative.com/stdemo/softone-st-preview/php/subscribe-form.php">
            <fieldset>
              <p>
                <input name="email" id="email" onfocus="if (this.value == 'Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email';}" value="Email"  class="required email" />
              </p>
              <div class="button button-orange"> <span class="form_button clearfix">
                <input type="submit" class="sub_submit" name="submit" value="subscribe" />
                </span> </div>
              <div id="result_sub"></div>
            </fieldset>
          </form>
          <!--subscribe form ends-->
          
          <div class="clear"></div>
        </div>
      </div>
      <!--box ends-->
      
      <div class="clear"></div>
    </div>
  </div>
</div>
<!--section for subscribe ends--> 

<!--section for requirements and gallery starts-->
<div class="section colored">
  <div class="container clearfix"> 
    
    <!--requirements starts-->
    <div class="grid_3">
      <h2>Basic requirements</h2>
      <ul class="list3">
        <li>Active internet connection for online activation.</li>
        <li>Macintosh computer with Mac OS X 10.5.8 or later.</li>
        <li>Intel computer with at least 1GB of RAM. </li>
      </ul>
    </div>
    <!--requirements ends--> 
    
    <!--gallery starts-->
    <div class="grid_9">
      <h2>Take a look at softone screencast</h2>
      <ul id="mycarousel" class="jcarousel-skin-tango">
        <li>
          <div class="thumb"><a href="#"><img src="images/preview/thumb-4.jpg" width="200" height="125" alt="Image"/></a><a href="http://vimeo.com/7449107" data-rel="prettyPhoto[mixed]" title="This is title of vimeo video" class="play first_icon"></a> <a href="http://tanshcreative.com" target="_blank" class="link second_icon"></a></div>
        </li>
        <li>
          <div class="thumb"><a href="#"><img src="images/preview/thumb-2.jpg" width="200" height="125" alt="Image"/></a><a href="images/preview/large-2.jpg" data-rel="prettyPhoto[mixed]" title="This is title of image" class="zoom first_icon"></a> <a href="http://tanshcreative.com" target="_blank" class="link second_icon"></a></div>
        </li>
        <li>
          <div class="thumb"><a href="#"><img src="images/preview/thumb-3.jpg" width="200" height="125" alt="Image"/></a><a href="images/preview/large-3.jpg" data-rel="prettyPhoto[mixed]" title="This is title of image" class="zoom first_icon"></a> <a href="http://tanshcreative.com" target="_blank" class="link second_icon"></a></div>
        </li>
        <li>
          <div class="thumb"><a href="#"><img src="images/preview/thumb-1.jpg" width="200" height="125" alt="Image"/></a><a href="http://www.youtube.com/watch?v=GgR6dyzkKHI" data-rel="prettyPhoto[mixed]" title="This is title of youtube video" class="play first_icon"></a> <a href="http://tanshcreative.com" target="_blank" class="link second_icon"></a></div>
        </li>
      </ul>
    </div>
    <!--gallery ends--> 
    
  </div>
</div>
<!--section for requirements and gallery ends--> 

<!--footer starts-->
<div id="footer">
  <div class="container footer_inner clearfix"> 
    
    <!--about starts-->
    <div class="grid_3">
      <h4>About softone</h4>
      <p>SOFTONE is a  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. </p>
      <a href="#"><img src="images/logo.png" width="125" height="35" alt="logo" class="logo"></a> </div>
    <!--about ends--> 
    
    <!--payment starts-->
    <div class="grid_3">
      <h4>Payment method</h4>
      <p>We accept  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
      <ul class="payment">
        <li><img src="images/icons/payment/mastercard.png" width="32" height="32" alt="icon"></li>
        <li><img src="images/icons/payment/paypal.png" width="32" height="32" alt="icon"></li>
        <li><img src="images/icons/payment/visa.png" width="32" height="32" alt="icon"></li>
      </ul>
    </div>
    <!--payment ends--> 
    
    <!--list starts-->
    <div class="grid_3">
      <h4>Some links here</h4>
      <ul class="list1">
        <li> Nam liber tempor cum nobis eleind.</li>
        <li>Praesent zzril delenit augue.</li>
        <li>Claritas est processus dynamicus.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Suscipit lobortis aliquip excomm</li>
        <li>Duis autem vel eum iriure dolor</li>
      </ul>
    </div>
    <!--list ends--> 
    
    <!--social starts-->
    <div class="grid_3">
      <h4>Socialise with us</h4>
      <div id="twitter"></div>
    </div>
    <!--social ends-->
    
    <div class="clear"></div>
  </div>
</div>
<!--footer ends--> 

<!--copyright starts-->
<div id="copyright">
  <div class="container clearfix"> 
    
    <!--copyright text and general links-->
    <div class="grid_6">
      <p>Copyright © 2011 . All the respective rights reserved</p>
      <ul class="copyright">
        <li><a href="#">Terms</a></li>
        <li><a href="#">Privacy policy</a></li>
      </ul>
    </div>
    
    <!--social links-->
    <div class="grid_6">
      <ul class="social">
        <li><a href="#"><img src="images/icons/social/twitter.png" width="16" height="16" alt="icon"></a></li>
        <li><a href="#"><img src="images/icons/social/facebook.png" width="16" height="16" alt="icon"></a></li>
        <li><a href="#"><img src="images/icons/social/google-plus.png" width="16" height="16" alt="icon"></a></li>
        <li><a href="#"><img src="images/icons/social/flickr.png" width="16" height="16" alt="icon"></a></li>
        <li><a href="#"><img src="images/icons/social/delicious.png" width="16" height="16" alt="icon"></a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</div>
<!--copyright ends--> 

<!--jqueries required--> 
<script type="text/javascript"> Cufon.now(); </script> 
<script src="js/jquery.cycle.all.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script> 
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
<script src="js/jquery.supersubs.js" type="text/javascript"></script> 
<script src="js/jquery.superfish.js" type="text/javascript"></script> 
<script src="js/twitter.js" type="text/javascript"></script> 
<script src="js/cufon-yui.js" type="text/javascript"></script> 
<script src="js/Arimo_400.font.js" type="text/javascript"></script> 
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>