<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<html class="no-js">
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boxify: Free HTML5/CSS3 Template</title>
<meta name="description" content="A free HTML5/CSS3 template made exclusively for Codrops"/>
<meta name="keywords" content="html5 template, css3, one page, animations, agency, portfolio, web design"/>
<meta name="author" content=""/>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/flickity.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel="stylesheet">
<link href="css/queries.css" rel="stylesheet">
<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
</head>
<body>
<header>
<section class="hero">
<div class="texture-overlay">
</div>
<div class="container">
	<div class="row nav-wrapper">
		<div class="col-md-6 col-sm-6 col-xs-6 text-left">
			<a href="#"><img src="img/logo-white.png" alt="Boxify Logo"></a>
		</div>
		<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
			<p>
				MENU
			</p>
			<a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
		</div>
	</div>
	<div class="row hero-content">
		<div class="col-md-12">
			<h1 class="animated fadeInDown">An Exclusive, Premium HTML5 &amp; CSS3 Template created exlusively for Codrops.</h1>
			Use it for free
		</div>
	</div>
</div>
</section>
</header>
<section class="video" id="about">
<div class="container">
	<div class="row">
		<div class="col-md-12 text-center">
			<h1><a href="http://www.youtube.com/embed/9No-FiEInLA?autoplay=1&wmode=opaque&fs=1" class="youtube-media"><i class="fa fa-play-circle-o"></i> Watch the Video</a></h1>
		</div>
	</div>
</div>
</section>
<section class="features-intro">
<div class="container-fluid">
	<div class="row">
		<div class="col-md-6 nopadding features-intro-img">
			<div class="features-bg">
				<div class="texture-overlay">
				</div>
				<div class="features-img wp1">
					<img src="img/html5-logo.png" alt="HTML5 Logo">
				</div>
			</div>
		</div>
		<div class="col-md-6 nopadding">
			<div class="features-slider">
				<ul class="slides" id="featuresSlider">
					<li>
					<h1>The Fore-front of Design &amp; Technology</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
					</p>
					<p>
						<a href="#features" class="arrow-btn">Find out why this freebie rocks! <i class="fa fa-long-arrow-right"></i></a>
					</p>
					</li>
					<li>
					<h1>Multi-Purpose User Centric Design</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
					</p>
					<p>
						Find out why this freebie rocks! <i class="fa fa-long-arrow-right"></i>
					</p>
					</li>
					<li>
					<h1>Made with Love, Released for Free</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
					</p>
					<p>
						Find out why this freebie rocks! <i class="fa fa-long-arrow-right"></i>
					</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
</section>
<section class="features-list" id="features">
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="col-md-4 feature-1 wp2">
				<div class="feature-icon">
					<i class="fa fa-desktop"></i>
				</div>
				<div class="feature-content">
					<h1>Responsive</h1>
					<p>
						Built using HTML5/CSS3 and jQuery, and built using one of the world's most powerful CSS frameworks available, Bootstrap.
					</p>
				</div>
			</div>
			<div class="col-md-4 feature-2 wp2 delay-05s">
				<div class="feature-icon">
					<i class="fa fa-flash"></i>
				</div>
				<div class="feature-content">
					<h1>Multi-Purpose</h1>
					<p>
						Perfect if you run your own start-up, product or service. Boxify can showcase your business converting your visits to income.
					</p>
				</div>
			</div>
			<div class="col-md-4 feature-3 wp2 delay-1s">
				<div class="feature-icon">
					<i class="fa fa-heart"></i>
				</div>
				<div class="feature-content">
					<h1>Absolutely Free</h1>
					<p>
						As aways, download Boxify for free exclusively from Codrops. If you love Boxify and want to thank me, simply <a href="#">buy me a beer</a>.
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<section class="showcase">
<div class="showcase-wrap">
	<div class="texture-overlay">
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<div class="device wp3">
					<div class="device-content">
						<div class="showcase-slider">
							<ul class="slides" id="showcaseSlider">
								<li>
								<img src="img/screen1.jpg" alt="Device Content Image">
								</li>
								<li>
								<img src="img/screen2.jpg" alt="Device Content Image">
								</li>
								<li>
								<img src="img/screen3.jpg" alt="Device Content Image">
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<h1>Showcase your Product or Service</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
				</p>
				<blockquote class="team-quote">
					<div class="avatar">
						<img src="img/avatar.png" alt="User Avatar">
					</div>
					<p>
						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc." - Steve Jobs
					</p>
					<div class="logo-quote">
						<a href="/"><img src="img/codrops-logo.png" alt="Codrops Logo"></a>
					</div>
				</blockquote>
			</div>
		</div>
	</div>
</div>
</section>
<section class="screenshots-intro">
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h1>Packed Full of Powerful Features</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
			</p>
			<p>
				<a href="#screenshots" class="arrow-btn">See the screenshots! <i class="fa fa-long-arrow-right"></i></a>
			</p>
		</div>
	</div>
</div>
</section>
<section class="screenshots" id="screenshots">
<div class="container-fluid">
	<div class="row">
		<ul class="grid">
			<li>
			<figure>
			<img src="img/01-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/01.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					Optimised For Design
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
			<li>
			<figure>
			<img src="img/02-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/02.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					User Centric Design
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
			<li>
			<figure>
			<img src="img/03-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/03.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					Responsive and Adaptive
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
			<li>
			<figure>
			<img src="img/04-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/04.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					Absolutely Free
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
		</ul>
	</div>
	<div class="row">
		<ul class="grid">
			<li>
			<figure>
			<img src="img/05-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/05.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					Multi-Purpose Design
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
			<li>
			<figure>
			<img src="img/06-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/06.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					Exclusive to Codrops
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
			<li>
			<figure>
			<img src="img/07-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/07.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					Made with Love
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
			<li>
			<figure>
			<img src="img/08-screenshot.jpg" alt="Screenshot 01">
			<figcaption>
			<div class="caption-content">
				<a href="img/large/08.jpg" class="single_image">
				<i class="fa fa-search"></i><br>
				<p>
					In Sydney, Australia
				</p>
				</a>
			</div>
			</figcaption>
			</figure>
			</li>
		</ul>
	</div>
</div>
</section>
<section class="download" id="download">
<div class="container">
	<div class="row">
		<div class="col-md-12 text-center wp4">
			<h1>Seen Enough?</h1>
		</div>
	</div>
</div>
</section>
<footer>
<div class="container">
	<div class="row">
		<div class="col-md-5">
			<h1 class="footer-logo">
			<img src="img/logo-blue.png" alt="Footer Logo Blue">
			</h1>
			<p>
				<a href="/contact.html" rel="nofollow">Contact Us</a>
			</p>
		</div>
		<div class="col-md-7">
			<ul class="footer-nav">
				<li><a href="/">Home</a></li>
                <li><a href="/privacy.html" rel="nofollow">Privacy Policy</a></li>
                <li><a href="/dmca.html" rel="nofollow">DMCA</a></li>
                <li><a href="/contact.html" rel="nofollow">Contact Us</a></li>
			</ul>
		</div>
	</div>
</div>
</footer>
<div class="overlay overlay-boxify">
	<nav>
	<ul>
		<li><a href="#about"><i class="fa fa-heart"></i>About</a></li>
		<li><a href="#features"><i class="fa fa-flash"></i>Features</a></li>
	</ul>
	<ul>
		<li><a href="#screenshots"><i class="fa fa-desktop"></i>Screenshots</a></li>
		<li><a href="#download"><i class="fa fa-download"></i>Download</a></li>
	</ul>
	</nav>
</div>
<script src="js/min/toucheffects-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/flickity.pkgd.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/retina.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>