477 lines
21 KiB
HTML
477 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Business Template</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Styles -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
|
|
<link href="css/bootstrap-overrides.css" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="css/theme.css">
|
|
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
|
|
|
|
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body class="pull_top">
|
|
<div class="navbar transparent navbar-inverse navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</a>
|
|
<a class="brand" href="index.html">
|
|
<strong>CLEAN CANVAS</strong>
|
|
</a>
|
|
<div class="nav-collapse collapse">
|
|
<ul class="nav pull-right">
|
|
<li><a href="index.html" class="active">HOME</a></li>
|
|
<li><a href="about-us.html">ABOUT US</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
PAGES
|
|
<b class="caret"></b>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="features.html">Features</a></li>
|
|
<li><a href="services.html">Services</a></li>
|
|
<li><a href="portfolio.html">Portfolio</a></li>
|
|
<li><a href="portfolio-item.html">Portfolio Item</a></li>
|
|
<li><a href="coming-soon.html">Coming Soon</a></li>
|
|
<li><a href="sign-in.html">Sign in</a></li>
|
|
<li><a href="sign-up.html">Sign up</a></li>
|
|
<li><a href="backgrounds.html">Backgrounds</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="pricing.html">PRICING</a></li>
|
|
<li><a href="contact.html">CONTACT US</a></li>
|
|
<li><a href="blog.html">BLOG</a></li>
|
|
<li><a class="btn-header" href="sign-up.html">Sign up</a></li>
|
|
<li><a class="btn-header" href="sign-in.html">Sign in</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="feature_slider" class="">
|
|
<!--
|
|
Each slide is composed by <img> and .info
|
|
- .info's position is customized with css in index.css
|
|
- each <img> parallax effect is declared by the following params inside its class:
|
|
|
|
example: class="asset left-472 sp600 t120 z3"
|
|
left-472 means left: -472px from the center
|
|
sp600 is speed transition
|
|
t120 is top to 120px
|
|
z3 is z-index to 3
|
|
Note: Maintain this order of params
|
|
|
|
For the backgrounds, you can combine from the bgs folder :D
|
|
-->
|
|
<article class="slide" id="showcasing" style="background: url('img/backgrounds/landscape.png') repeat-x top center;">
|
|
<img class="asset left-30 sp600 t120 z1" src="img/slides/scene1/macbook.png" />
|
|
<div class="info">
|
|
<h2>Beautiful theme for showcasing your works.</h2>
|
|
</div>
|
|
</article>
|
|
<article class="slide" id="ideas" style="background: url('img/backgrounds/aqua.jpg') repeat-x top center;">
|
|
<div class="info">
|
|
<h2>We love to turn ideas into beautiful things.</h2>
|
|
</div>
|
|
<img class="asset left-480 sp600 t260 z1" src="img/slides/scene2/left.png" />
|
|
<img class="asset left-210 sp600 t213 z2" src="img/slides/scene2/middle.png" />
|
|
<img class="asset left60 sp600 t260 z1" src="img/slides/scene2/right.png" />
|
|
</article>
|
|
<article class="slide" id="tour" style="background: url('img/backgrounds/color-splash.jpg') repeat-x top center;">
|
|
<img class="asset left-472 sp650 t210 z3" src="img/slides/scene3/ipad.png" />
|
|
<img class="asset left-365 sp600 t270 z4" src="img/slides/scene3/iphone.png" />
|
|
<img class="asset left-350 sp450 t135 z2" src="img/slides/scene3/desktop.png" />
|
|
<img class="asset left-185 sp550 t220 z1" src="img/slides/scene3/macbook.png" />
|
|
<div class="info">
|
|
<h2>Fully Responsive theme</h2>
|
|
<a href="features.html">TOUR THE PRODUCT</a>
|
|
</div>
|
|
</article>
|
|
<article class="slide" id="responsive" style="background: url('img/backgrounds/indigo.jpg') repeat-x top center;">
|
|
<img class="asset left-472 sp600 t120 z3" src="img/slides/scene4/html5.png" />
|
|
<img class="asset left-190 sp500 t120 z2" src="img/slides/scene4/css3.png" />
|
|
<div class="info">
|
|
<h2>
|
|
Responsive <strong>HTML5 & CSS3</strong>
|
|
Theme
|
|
</h2>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<div id="showcase">
|
|
<div class="container">
|
|
<div class="section_header">
|
|
<h3>Our Services</h3>
|
|
</div>
|
|
<div class="row feature_wrapper">
|
|
<!-- Features Row -->
|
|
<div class="features_op1_row">
|
|
<!-- Feature -->
|
|
<div class="span4 feature first">
|
|
<div class="img_box">
|
|
<a href="services.html">
|
|
<img src="img/service1.png">
|
|
<span class="circle">
|
|
<span class="plus">+</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="text">
|
|
<h6>Responsive theme</h6>
|
|
<p>
|
|
There are many variations of passages of generators on the embarrassing hidden in content here making it look like.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Feature -->
|
|
<div class="span4 feature">
|
|
<div class="img_box">
|
|
<a href="services.html">
|
|
<img src="img/service2.png">
|
|
<span class="circle">
|
|
<span class="plus">+</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="text">
|
|
<h6>Easy customization</h6>
|
|
<p>
|
|
There are many variations of passages of generators on the embarrassing hidden in content here making it look like.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Feature -->
|
|
<div class="span4 feature last">
|
|
<div class="img_box">
|
|
<a href="services.html">
|
|
<img src="img/service3.png">
|
|
<span class="circle">
|
|
<span class="plus">+</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="text">
|
|
<h6>Made with love</h6>
|
|
<p>
|
|
There are many variations of passages of generators on the embarrassing hidden in content here making it look like.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="features">
|
|
<div class="container">
|
|
<div class="section_header">
|
|
<h3>Features</h3>
|
|
</div>
|
|
<div class="row feature">
|
|
<div class="span6">
|
|
<img src="img/showcase1.png" />
|
|
</div>
|
|
<div class="span6 info">
|
|
<h3>
|
|
<img src="img/features-ico1.png" />
|
|
Beautiful on all devices
|
|
</h3>
|
|
<p>
|
|
There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row feature ss">
|
|
<div class="span6 info">
|
|
<h3>
|
|
<img src="img/features-ico2.png" />
|
|
Blog page included
|
|
</h3>
|
|
<p>
|
|
There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
|
|
</p>
|
|
</div>
|
|
<div class="span6">
|
|
<img src="img/showcase2.png" class="pull-right" />
|
|
</div>
|
|
</div>
|
|
<div class="row feature ss">
|
|
<div class="span6">
|
|
<img src="img/showcase3.png" />
|
|
</div>
|
|
<div class="span6 info">
|
|
<h3>
|
|
<img src="img/features-ico3.png" />
|
|
Simple and clean coming soon page
|
|
</h3>
|
|
<p>
|
|
There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Pricing Option -->
|
|
<div id="in_pricing">
|
|
<div class="container">
|
|
<div class="section_header">
|
|
<h3>Pricing</h3>
|
|
</div>
|
|
|
|
<div class="row charts_wrapp">
|
|
<!-- Plan Box -->
|
|
<div class="span4">
|
|
<div class="plan">
|
|
<div class="wrapper">
|
|
<h3>Lite</h3>
|
|
<div class="price">
|
|
<span class="dollar">$</span>
|
|
<span class="qty">35</span>
|
|
<span class="month">/month</span>
|
|
</div>
|
|
<div class="features">
|
|
<p>
|
|
<strong>10</strong>
|
|
Shared Projects
|
|
</p>
|
|
<p>
|
|
<strong>4</strong>
|
|
Team Members
|
|
</p>
|
|
<p>
|
|
<strong>10</strong>
|
|
Storage
|
|
</p>
|
|
</div>
|
|
<a class="order" href="pricing.html">ORDER NOW</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Plan Box -->
|
|
<div class="span4 pro">
|
|
<div class="plan">
|
|
<div class="wrapper">
|
|
<img class="ribbon" src="img/badge.png">
|
|
<h3>Pro</h3>
|
|
<div class="price">
|
|
<span class="dollar">$</span>
|
|
<span class="qty">99</span>
|
|
<span class="month">/month</span>
|
|
</div>
|
|
<div class="features">
|
|
<p>
|
|
<strong>10</strong>
|
|
Shared Projects
|
|
</p>
|
|
<p>
|
|
<strong>25</strong>
|
|
Team Members
|
|
</p>
|
|
<p>
|
|
<strong>Unlimited</strong>
|
|
Storage
|
|
</p>
|
|
<p>
|
|
<strong>Plus </strong>
|
|
Phone Support
|
|
</p>
|
|
</div>
|
|
<a class="order" href="pricing.html">ORDER NOW</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Plan Box -->
|
|
<div class="span4 standar">
|
|
<div class="plan">
|
|
<div class="wrapper">
|
|
<h3>Standard</h3>
|
|
<div class="price">
|
|
<span class="dollar">$</span>
|
|
<span class="qty">65</span>
|
|
<span class="month">/month</span>
|
|
</div>
|
|
<div class="features">
|
|
<p>
|
|
<strong>10</strong>
|
|
Shared Projects
|
|
</p>
|
|
<p>
|
|
<strong>4</strong>
|
|
Team Members
|
|
</p>
|
|
<p>
|
|
<strong>10</strong>
|
|
Storage
|
|
</p>
|
|
</div>
|
|
<a class="order" href="pricing.html">ORDER NOW</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="start">
|
|
<p>Start your free, no-risk, 14 day trial! </p>
|
|
<a href="pricing.html">Start Now!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="clients">
|
|
<div class="container">
|
|
<div class="section_header">
|
|
<h3>Clients</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span2 client">
|
|
<div class="img client1"></div>
|
|
</div>
|
|
<div class="span2 client">
|
|
<div class="img client2"></div>
|
|
</div>
|
|
<div class="span2 client">
|
|
<div class="img client3"></div>
|
|
</div>
|
|
<div class="span2 client">
|
|
<div class="img client1"></div>
|
|
</div>
|
|
<div class="span2 client">
|
|
<div class="img client2"></div>
|
|
</div>
|
|
<div class="span2 client">
|
|
<div class="img client3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- starts footer -->
|
|
<footer id="footer">
|
|
<div class="container">
|
|
<div class="row sections">
|
|
<div class="span4 recent_posts">
|
|
<h3 class="footer_header">
|
|
Recent Posts
|
|
</h3>
|
|
<div class="post">
|
|
<a href="blogpost.html">
|
|
<img src="img/recent_post1.png" class="img-circle" />
|
|
</a>
|
|
<div class="date">
|
|
Wed, 12 Dec
|
|
</div>
|
|
<a href="blogpost.html" class="title">
|
|
Randomised words which don't look embarrasing hidden.
|
|
</a>
|
|
</div>
|
|
<div class="post">
|
|
<a href="blogpost.html">
|
|
<img src="img/recent_post2.png" class="img-circle" />
|
|
</a>
|
|
<div class="date">
|
|
Mon, 12 Dec
|
|
</div>
|
|
<a href="blogpost.html" class="title">
|
|
Randomised words which don't look embarrasing hidden.
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="span4 testimonials">
|
|
<h3 class="footer_header">
|
|
Testimonials
|
|
</h3>
|
|
<div class="wrapper">
|
|
<div class="quote">
|
|
<span>“</span>
|
|
There are many variations of passages of randomised words which don't look even slightly believable. You need to be sure there isn't anything embarrassing of text.
|
|
<span></span>
|
|
</div>
|
|
<div class="author">
|
|
<img src="img/user-display.png" />
|
|
<div class="name">Alejandra Galvan Castillo</div>
|
|
<div class="info">
|
|
Details Canvas
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="span4 contact">
|
|
<h3 class="footer_header">
|
|
Contact
|
|
</h3>
|
|
<form action="#" method="post">
|
|
<input type="text" placeholder="Your name" />
|
|
<input type="text" placeholder="Your email" />
|
|
<textarea rows="3" placeholder="Message"></textarea>
|
|
<input type="submit" value="Send" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row credits">
|
|
<div class="span12">
|
|
<div class="row social">
|
|
<div class="span12">
|
|
<a href="#" class="facebook">
|
|
<span class="socialicons ico1"></span>
|
|
<span class="socialicons_h ico1h"></span>
|
|
</a>
|
|
<a href="#" class="twitter">
|
|
<span class="socialicons ico2"></span>
|
|
<span class="socialicons_h ico2h"></span>
|
|
</a>
|
|
<a href="#" class="gplus">
|
|
<span class="socialicons ico3"></span>
|
|
<span class="socialicons_h ico3h"></span>
|
|
</a>
|
|
<a href="#" class="flickr">
|
|
<span class="socialicons ico4"></span>
|
|
<span class="socialicons_h ico4h"></span>
|
|
</a>
|
|
<a href="#" class="pinterest">
|
|
<span class="socialicons ico5"></span>
|
|
<span class="socialicons_h ico5h"></span>
|
|
</a>
|
|
<a href="#" class="dribble">
|
|
<span class="socialicons ico6"></span>
|
|
<span class="socialicons_h ico6h"></span>
|
|
</a>
|
|
<a href="#" class="behance">
|
|
<span class="socialicons ico7"></span>
|
|
<span class="socialicons_h ico7h"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row copyright">
|
|
<div class="span12">
|
|
© 2013 Clean Canvas. All rights reserved. Theme by Detail Canvas.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/theme.js"></script>
|
|
|
|
<script type="text/javascript" src="js/index-slider.js"></script>
|
|
</body>
|
|
</html> |