<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- PAGE TITLE -->
<title>CLEAN - SLIDER RESPONSIVE HTML TEMPLATE</title>
<!-- ===================================
FAVICON ICON
==================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- ===================================
NORMALIZE CSS
==================================== -->
<link rel="stylesheet" href="css/normalize.css">
<!-- ===================================
BOOTSTRAP
==================================== -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- ===================================
GOOGLE FONTS
==================================== -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:600,700,400,300' rel='stylesheet' type='text/css'>
<!-- ===================================
FONTS ICON
==================================== -->
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
<!-- ===================================
PLUGIN
==================================== -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/slider-pro.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/owl.transitions.css">
<link rel="stylesheet" href="css/animate.css">
<!-- ===================================
MAIN STYLESHEET
==================================== -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/color-green.css" id="colors" />
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================================
PRELOADER
==================================== -->
<div class="preloader">
<div class="status"></div>
</div>
<!-- ===================================
HEADER
==================================== -->
<header>
<!-- Navigation Menu start-->
<nav class="navbar clean-main-menu" role="navigation">
<div class="container">
<!-- Navbar Toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="navbar-brand" href="index.html"><img class="logo" id="logo" src="images/logo.png" alt="Page"></a>
</div>
<!-- Navbar Toggle End -->
<!-- navbar-collapse start-->
<div id="nav-menu" class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav clean-menu-wrapper">
<li class="active">
<a href="#clean-slider">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#featured-works">Featured Works</a>
</li>
<li>
<a href="#offer">Features</a>
</li>
<li>
<a href="#pricing">Pricing</a>
</li>
<li>
<a href="#testimonial">Testimonial</a>
</li>
<li>
<a href="#contact">Contact Us</a>
</li>
</ul>
</div>
<!-- navbar-collapse end-->
</div>
</nav>
<!-- Navigation Menu end-->
</header>
<!-- ===================================
MAIN SLIDER
==================================== -->
<section class="slider-pro clean-slider" id="clean-slider">
<div class="sp-slides">
<!-- Slides -->
<div class="sp-slide clean-main-slides">
<div class="clean-img-overlay"></div>
<img class="sp-image" src="images/slider/1.jpg" alt="Slider 1"/>
<h1 class="sp-layer clean-slider-text-big"
data-position="center" data-show-transition="right" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
<span class="clean-color-contras">CLEAN</span> - Slider Responsive HTML Template
</h1>
<p class="sp-layer"
data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="down">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Slides End -->
<!-- Slides -->
<div class="sp-slide clean-main-slides">
<div class="clean-img-overlay"></div>
<img class="sp-image" src="images/slider/2.jpg" alt="Slider 2"/>
<h1 class="sp-layer clean-slider-text-big"
data-position="center" data-show-transition="right" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
<span class="clean-color-contras">CLEAN</span> - Slider Responsive HTML Template
</h1>
<p class="sp-layer"
data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="down">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</p>
</div>
<!-- Slides End -->
<!-- Slides -->
<div class="sp-slide clean-main-slides">
<div class="clean-img-overlay"></div>
<img class="sp-image" src="images/slider/3.jpg" alt="Slider 3"/>
<h1 class="sp-layer clean-slider-text-big"
data-position="center" data-show-transition="right" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
<span class="clean-color-contras">CLEAN</span> - Slider Responsive HTML Template
</h1>
<p class="sp-layer"
data-position="center" data-vertical="15%" data-show-delay="1000" data-hide-delay="200" data-show-transition="left" data-hide-transition="down">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</p>
</div>
<!-- Slides End -->
</div>
</section>
<!-- ===================================
ABOUT SECTION