<!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">
<title>Smiley</title>
<!-- ALL CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!-- ALL PLUGINS CSS -->
</head>
<body>
<div class="wrapper">
<!-- NAVIGATIONS -->
<section id="home" class="navigations">
<!-- SEARCH -->
<div class="search-bar collapse p-y-0" id="search">
<div class="container">
<div class="input-group text-center">
<input type="text" class="form-control search-text p-x-0" placeholder="Search Your Stuffs..." />
<span class="input-group-btn"><button class="btn btn-primary btn-md p-x-0 search-btn" type="button"><i class="fa fa-arrow-right"></i></button>
</span>
</div>
</div>
</div> <!-- //SEARCH -->
<!-- TOP NAVIGATION -->
<div class="top-menu collapse in" id="top-menu">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="pull-left">
<u class="user-menu menu-left">
<li><a href="#"><i class="fa fa-user hidden-md-up"></i><span class="hidden-sm-down"> My Account</span></a></li>
<li><a href="#"><i class="fa fa-users hidden-md-up"></i><span class="hidden-sm-down"> Create Account</span></a></li>
<li><a href="#"><i class="fa fa-lock hidden-md-up"></i><span class="hidden-sm-down"> Log In </span></a></li>
</u>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<u class="user-menu menu-right">
<li><a href="#"><i class="fa fa-phone hidden-md-up"></i><span class="hidden-sm-down"> +(5920) 6324 9345</span></a></li>
<li><a href="#"><i class="fa fa-headphones hidden-md-up"></i><span class="hidden-sm-down"> Help </span></a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="collapse" data-target="#search"><i class="fa fa-search hidden-md-up"></i><span class="hidden-sm-down"> Search </span></a></li>
</u>
</div>
</div>
</div>
</div>
</div> <!-- //TOP NAVIGATION -->
<!-- BOTTOM NAVIGATION -->
<div class="bottom-menu">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="navbar bg-faded bottom-nav p-x-0">
<button class="navbar-toggler pull-right top-toggle-btn" title="Top Menu" type="button" data-toggle="collapse" data-target="#top-menu"></button>
<a class="navbar-brand" href="#"><i class="fa fa-cubes"></i><span class="hidden-xs-down"> Smiley</span></a>
<button class="navbar-toggler hidden-md-up bottom-toggle-btn center-block" title="Bottom Menu" type="button" data-toggle="collapse" data-target="#bottom-menu">☰</button>
<div class="collapse navbar-toggleable-sm" id="bottom-menu">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#home" class="nav-link scrollto">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link scrollto" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link scrollto" href="#work">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#team" >Team</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html" >Blog</a></li>
</ul>
</div>
</nav> <!-- Navbar -->
</div>
</div>
</div>
</div> <!-- //BOTTOM NAVIGATION -->
</section>
<!-- HOME -->
<section class="home" data-stellar-background-ratio="0.1">
<div class="intro">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1 col-sm-6 col-xs-12">
<div class="intro-iphone hidden-xs-down">
<img class="img-responsive center-block" src="images/iphone-1.png" alt="" />
</div>
</div>
<div class="col-md-5 col-sm-6 col-xs-12">
<div class="intro-content">
<div class="intro-item">
<div class="intro-logo"> S </div>
<h1>Get Smily</h1>
<h2 class="hidden-md-down">Manage You Day Life</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum ratione quisquam, nisi nulla hic omnis eveniet</p>
<div class="app-wrap">
<a class="app-btn play-store" href="#"><i class="fa fa-play"></i> Play Store</a>
<a class="app-btn app-sotre" href="#"><i class="fa fa-apple"></i> Apps Store</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" title="模板之家">模板之家</a></div>
<!-- COLOR -->
<section class="color-area">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12 p-r-0">
<div class="card card-inverse color-box-1">
<div class="color-box">
<div class="card-block">
<h3 class="card-title">For Ecommerce Website</h3>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Dolore rerum ratione quisquam, nisi nulla hic
omnis eveniet expedita, debitis, porro deserunt est
illo eaque, ipsum qui. Explicabo perspiciatis, labore voluptatibus</p>
<a href="#" class="btn btn-primary color-box-btn btn-rectangle-out">Ecommerce</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 p-x-0">
<div class="card card-inverse color-box-2">
<div class="color-box">
<div class="card-block">
<h3 class="card-title">With Bootstrap v4 Alpha</h3>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Dolore rerum ratione quisquam, nisi nulla hic
omnis eveniet expedita, debitis, porro deserunt est
illo eaque, ipsum qui. Explicabo perspiciatis, labore voluptatibus</p>
<a href="#" class="btn btn-primary color-box-btn btn-rectangle-out">Bootstrap</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 p-l-0">
<div class="card card-inverse color-box-3">
<div class="color-box">
<div class="card-block">
<h3 class="card-title">Fully Responsive Theme</h3>
<p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Dolore rerum ratione quisquam, nisi nulla hic
omnis eveniet expedita, debitis, porro deserunt est
illo eaque, ipsum qui. Explicabo perspiciatis, labore voluptatibus</p>
<a href="#" class="btn btn-primary color-box-btn btn-rectangle-out">Responsive</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURE -->
<section id="features" class="feature">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="text-center">
<h2 class="feature-title">Let's see the latest Features</h2>
<img class="max-para" src="images/img-border.jpg" />
<p class="max-para">Get the latest feature of the year, Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi</p>
<div class="feature-img"><img src="images/iphone-land.pn