<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Wonal - App Landing Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="css/owl.theme.css" type="text/css">
<link rel="stylesheet" href="css/owl.transitions.css" type="text/css">
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="css/wonal.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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 id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Wonal App Landing</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#about">about</a>
</li>
<li>
<a class="page-scroll" href="#screens">screenshots</a>
</li>
<li>
<a class="page-scroll" href="#pricing">pricing</a>
</li>
<li>
<a class="page-scroll" href="#subscribe-section">subscribe</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>
Wonal Care About<span> Your App </span>
</h1>
<p>
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
</div>
<div class="col-md-5 ">
<img src="img/hero-mockup.png" alt="" class="img-responsive hidden-xs hidden-sm" />
</div>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-2x fa-heart text-primary" data-wow-delay=".3s"></i>
<h3>Built with Love</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-2x fa-flask text-primary" data-wow-delay=".1s"></i>
<h3>Creative Design</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-2x fa-paint-brush text-primary" data-wow-delay=".2s"></i>
<h3>Digital Painting</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-2x fa-mobile text-primary" data-wow-delay=".3s"></i>
<h3>Mobile Friendly</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div>
</div>
</div>
</section>
<section id="features">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="title-section">
<h2>Features of Wonal</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="benefits text-right">
<h3>Beautiful & modern design</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
<div class="benefits text-right">
<h3>Easy to set up</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
<div class="benefits text-right">
<h3>Reliable and Secure Platform</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div>
<div class="col-md-4 text-center;">
<div class="benefits-image">
<img src="img/about-img.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-4">
<div class="benefits">
<h3>Stunning flexibility</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
<div class="benefits">
<h3>Beautiful & modern design</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
<div class="benefits">
<h3>Reliable and Secure Platform</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>All you want from an app</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<div class="buttons">
<a href="#"><img src="img/app-store.png" alt="" /></a>
<a href="#"><img src="img/google-play.png" alt="" /></a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 hidden-xs">
<div class="details-image">
<img src="img/about-phone.png" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</section>
<section id="screens">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="title-section">
<h2>Wonal Screens Gallery</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="screenshots-carousel">
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/1.png"><img src="img/screens/1.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/2.png"><img src="img/screens/2.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/1.png"><img src="img/screens/1.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/2.png"><img src="img/screens/2.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/1.png"><img src="img/screens/1.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/2.png"><img src="img/screens/2.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/1.png"><img src="img/screens/1.png" alt="screenshot"></a>
</div>
</div>
<div class="shot">
<div class="screen">
<a class="zoom" href="img/screens/2.png"><img src="img/screens/2.png" alt="screenshot"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="pricing">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="title-section">
<h2>Our Pricing</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="pricing text-uppercase">
<div class="pricing-title">
<h4>Basic Plan</h4>
<p>$10</p>
<small class="text-lowercase">monthly</small>
</div>
<ul>
<li>2 GB Space</li>
<li>200 GB Bandwidth</li>
<li>20 More Themes</li>
<li>Lifetime Support</li>
</ul>
<button class="btn btn-primary btn-xl">Purchase Now</button>
</div>
</div>
<div class="col-md-4">
<div class="pricing active text-uppercase">
<div class="pricing-title">
<h4>Business Plan</h4>
<p>$20</p>
<small class="text-lowercase">monthly</small>
</div>
<ul>
<li>5 GB space</li>
<li>500 GB Bandwidth</li>
<li>50 More Themes</li>
<li>Lifetime Support</li>
</ul>
<button class="btn btn-primary btn-xl">Purchase Now</button>
</div>
</div>
<div class="col-md-4">
<div class="pricing text-uppercase">
<div class="pricing-title">
<h4>Pro Plan</h4>
<p>$30</p>
<small class="text-lowercase">monthly</small>
</div>
<ul>
<li>10 GB space</li>
<li>1,000 GB bandwidth</li>
<li>100 more themes</li>
<li>Lifetime Support</li>
</ul>
<button class="btn btn-primary btn-xl">Purchase Now</button>
</div>
</div>
</div>
</div>
</section>
<section>
<div id="subscribe-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="title-section">
<h2>Subscribe us</h2>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="subscription-form" id="subscribeform">
<div class="input-group">
<input type="email" class="form-control" name="email" id="subscriber-email" placeholder="Email adress...">
<span class="input-group-btn">
<button class="btn btn-md btn-primary subscribe-btn" id="subscribe-button" type="submit">Go!</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<ul class="social-icons-list">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="rss" href="#"><i class="fa fa-rss"></i></a></li>
<li><a class="google" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<p>Copyright © 2015 Your Company Name | Design By wamastudio</p>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/wonal.js"></script>
</body>
</html>