<!DOCTYPE HTML>
<html>
<head>
<title>The Parallel Website Template | Home</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/magnific-popup1.css">
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<!-- jquery plguin -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--start slider -->
<link rel="stylesheet" href="css/fwslider.css" media="all">
<script src="js/jquery-ui.min.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<script src="js/fwslider.js"></script>
<!--end slider -->
<script type="text/javascript">
$(document).ready(function() {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- Add fancyBox light-box -->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
<!-- //End fancyBox light-box -->
</head>
<body>
<!-- start header -->
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<h1><a href="index.html"><img src="images/logo.png" alt=""/></a></h1>
</div>
<div class="h_right">
<ul class="menu">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#portfolio" class="scroll">Portfolio</a></li>
<li><a href="#pricing" class="scroll">Pricing</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li class="last"><a href="#contact" class="scroll">Contact</a></li>
</ul>
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<!-- start smart_nav * -->
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#services" class="scroll">Services</a></li>
<li class="nav-item"><a href="#portfolio" class="scroll">Portfolio</a></li>
<li class="nav-item"><a href="#pricing" class="scroll">Pricing</a></li>
<li class="nav-item"><a href="#about" class="scroll">About</a></li>
<li class="nav-item"><a href="#contact" class="scroll">Contact</a></li>
<div class="clear"></div>
</ul>
</nav>
<script type="text/javascript" src="js/responsive.menu.js"></script>
<!-- end smart_nav * -->
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!----start-images-slider---->
<div class="images-slider">
<!-- start slider -->
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<img src="images/slider-bg.jpg" alt=""/>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title">Welcome To Parallels</h4>
<!-- /Text title -->
<!-- Text description -->
<p class="description">Clean Responsive Parallax Theme</p>
<!-- /Text description -->
<div class="slide-btns description">
</div>
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img src="images/slider-bg.jpg" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title">To Parallel is to live</h4>
<!-- /Text title -->
<!-- Text description -->
<p class="description">You Don't Need Magic to Disappear</p>
<!-- /Text description -->
<div class="slide-btns description">
</div>
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"> </div>
<div class="slidePrev"><span> </span></div>
<div class="slideNext"><span> </span></div>
</div>
<!--/slider -->
</div>
<!-----------service------------>
<div class="sevice" id="services">
<div class="wrap">
<div class="service-grids">
<h2>our Services</h2>
<div class="images_1_of_4">
<img src="images/cal.png">
<h3><a href=#>WebDesign</a></h3>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has been </p>
</div>
<div class="images_1_of_4">
<img src="images/port.png">
<h3><a href=#>UIDesign</a></h3>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has been</p>
</div>
<div class="images_1_of_4">
<img src="images/recyle.png">
<h3><a href=#>Prototype</a></h3>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has been </p>
</div>
<div class="images_1_of_4">
<img src="images/camera.png">
<h3><a href=#>Photography</a></h3>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has been</p>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!-----------//service//------------>
<!----------- message ------------>
<div class="message">
<div class="wrap">
<h3>Do You Like This Clean Theme?</h3>
<div class="buttons">
<div class="span1">
<a href="#">
<i>Purchase</i>
<div class="clear"></div>
</a>
</div>
<div class="span2">
<a href="#">
<i>Follow</i>
<div class="clear"></div>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="cbp-so-scroller" class="cbp-so-scroller">
<!--Portfolio-->
<div id="portfolio" class="clearfix">
<div class="portfolio-bg"> </div>
<div class="typo1">
<div class="wrapper clearfix">
<div class="section-title">
<h3 class="heading">Portfolio</h3>
<h6> </h6>
</div><!--end:section-title-->
<div id="options" class="clearfix">