{% extends "tpl/layout.tpl" %}

{% block content %}
    <div class="bg-white-only">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2 text-center">
            <div class="m-t-xxl m-b-xxl padder-v">
              <h1 class="font-bold l-h-1x m-t-xxl text-black padder-v animated fadeInDown">
                AngularJS App, Html/jQuery, Music SPA, Google Material Design, and App Landing,
                <br><span class="b-b b-black b-3x">5 in 1</span> ui kits package.
              </h1>
              <h3 class="text-muted m-t-xl l-h-1x">Angulr is a <span class="b-b b-2x">Bootstrap</span> based web ui kits package, Using grunt and bower with Bootstrap and Angular, features <span class="b-b b-2x">nested views &amp; routing</span> and <span class="b-b b-2x">lazy load</span> for large project.</h3>
            </div>
            <p class="text-center m-b-xxl wrapper">
              <a href="http://themeforest.net/item/angulr-bootstrap-admin-web-app-with-angularjs/8437259?ref=flatfull" target="_blank" class="btn b-2x btn-lg b-black btn-default btn-rounded text-lg font-bold m-b-xxl animated fadeInUpBig">Have it only $21</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div id="what" class="padder-v bg-white-only">
      <div class="container m-b-xxl">
        <div class="row no-gutter">
          <div class="col-md-3 col-sm-6">
            <div class="bg-light m-r-n-md no-m-xs no-m-sm">
              <a href="../angular" class="wrapper-xl block">
                <span class="h3 m-t-sm text-black">Angular Version</span>
                <span class="block m-b-md m-t">Using AngularJS with angular ui. including angular bootstrap directives and other modules.</span>
                <i class="icon-arrow-right text-lg"></i>
              </a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="bg-black dker m-t-xl m-l-n-md m-r-n-md text-white no-m-xs no-m-sm">
              <a href="../html" class="wrapper-xl block">
                <span class="h3 m-t-sm text-white">Html Version</span>
                <span class="block m-b-md m-t">Angulr also provide html version for app does not use angular. using jQuery and html5 to build user freindly app.</span>
                <i class="icon-arrow-right text-lg"></i>
              </a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="bg-light dker m-t-n m-l-n-md m-r-n-md no-m-xs no-m-sm">
              <a href="../angular/#music/home" class="wrapper-xl block">
                <span class="h3 m-t-sm text-black">Music SPA</span>
                <span class="block m-b-md m-t">With angulr layout options, you can build many other apps, we give a music single page application for example.</span>
                <i class="icon-arrow-right text-lg"></i>
              </a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="bg-white dker m-t m-l-n-md m-r-n-md no-m-xs no-m-sm">
              <a href="../angular/material.html" class="wrapper-xl block">
                <span class="h3 m-t-sm text-black">Google Material Design</span>
                <span class="block m-b-md m-t">The Angular Material project is an implementation of Material Design in Angular. js. This project provides a set of reusable, well-tested, and accessible UI.</span>
                <i class="icon-arrow-right text-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="why" class="bg-light">
      <div class="container">
        <div class="m-t-xxl m-b-xl text-center wrapper">
          <h2 class="text-black font-bold">Why use <span class="b-b b-dark">AngularJS</span> for your next application?</h2>
          <p class="text-muted h4 m-b-xl">Build the Single-Page Applications -- SPAs</p>
        </div>
        <div class="row m-t-xl m-b-xl text-center">
          <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
            <p class="h3 m-b-xl inline b b-dark rounded wrapper-lg">
              <i class="fa w-1x fa-google"></i>
            </p>
            <div class="m-b-xl">
              <h4 class="m-t-none">Developed by Google</h4>
              <p class="text-muted m-t-lg">AngularJS is the most popular JavaScript framework created by Google!  If you're looking for a framework with a solid foundation, Angular is your choice!</p>
            </div>
          </div>
          <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="600">
            <p class="h3 m-b-xl inline b b-dark rounded wrapper-lg">
              <i class="fa w-1x fa-gears"></i>
            </p>
            <div class="m-b-xl">
              <h4 class="m-t-none">It's Comprehensive</h4>
              <p class="text-muted m-t-lg">A complete solution for rapid front-end development. No other plugins or frameworks are necessary to build a data-driven web application</p>
            </div>
          </div>
          <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="900">
            <p class="h3 m-b-xl inline b b-dark rounded wrapper-lg">
              <i class="fa w-1x fa-clock-o"></i>
            </p>
            <div class="m-b-xl">
              <h4 class="m-t-none">Get Started in Minutes</h4>
              <p class="text-muted m-t-lg">Getting started with AngularJS is incredibly easy. ou can have a simple Angular app up in minutes!</p>
            </div>
          </div>
        </div>
        <div class="m-t-xl m-b-xl text-center wrapper">
          <p class="h4">You can use it to build your 
            <span class="text-primary">Content manage system</span>, 
            <span class="text-primary">Travel app</span>, 
            <span class="text-primary">Medical app</span>...
          </p>
          <p class="m-t-xl"><a href="#testimonial" data-ride="scroll" class="btn btn-lg btn-white b-2x b-dark btn-rounded bg-empty m-sm">What Clients Said</a></p>
        </div>
      </div>
    </div>
    <div id="features" class="bg-white-only">
      <div class="container">
        <div class="row m-t-xl m-b-xxl">
          <div class="col-sm-6" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
              <div class="m-t-xxl">
                <div class="m-b">
                  <a href class="pull-left thumb-sm avatar"><img src="../html/img/a2.jpg" alt="..."></a>
                  <div class="m-l-sm inline">
                    <div class="pos-rlt wrapper b b-light r r-2x">
                      <span class="arrow left pull-up"></span>
                      <p class="m-b-none">Hey!</p>
                    </div>
                    <small class="text-muted"><i class="fa fa-ok text-success"></i> 1 hour ago</small>
                  </div>
                </div>
                <div class="m-b text-right">
                  <a href class="pull-right thumb-sm avatar"><img src="../html/img/a3.jpg" class="img-circle" alt="..."></a>
                  <div class="m-r-sm inline text-left">
                    <div class="pos-rlt wrapper bg-primary r r-2x">
                      <span class="arrow right pull-up arrow-primary"></span>
                      <p class="m-b-none">Hi John, What's up...</p>
                    </div>
                    <small class="text-muted">31 minutes ago</small>
                  </div>
                </div>
                <div class="m-b">
                  <a href class="pull-left thumb-sm avatar"><img src="../html/img/a1.jpg" alt="..."></a>
                  <div class="m-l-sm inline">
                    <div class="pos-rlt wrapper b b-light r r-2x">
                      <span class="arrow left pull-up"></span>
                      <p class="m-b-none">Have been working on the updates for many hours...</p>
                    </div>
                    <small class="text-muted"><i class="fa fa-ok text-success"></i> 2 minutes ago</small>
                  </div>
                </div>
                <div class="m-b text-right">
                  <a href class="pull-right thumb-sm avatar"><img src="../html/img/a3.jpg" class="img-circle" alt="..."></a>
                  <div class="m-r-sm inline text-left">
                    <div class="pos-rlt wrapper bg-info r r-2x">
                      <span class="arrow right pull-up arrow-info"></span>
                      <p class="m-b-none">Can not wait to see it:)</p>
                    </div>
                    <small class="text-muted">1 minutes ago</small>
                  </div>
                </div>                          
              </div>
          </div>
          <div class="col-sm-6 wrapper-xl">
            <h3 class="text-dark font-bold m-b-lg">Save your time with the great tools</h3>
            <ul class="list-unstyled  m-t-xl">
              <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                <i class="icon-check pull-left text-lg m-r m-t-sm"></i>
                <p class="clear m-b-lg"><strong>Using Less</strong>, Angulr's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. </p>
              </li>
              <li data-ride="animated" data-animation="fadeInUp" data-delay="900">
                <i class="icon-check pull-left text-lg m-r m-t-sm"></i>
                <p class="clear m-b-lg"><strong>Grunt Task</strong>, Angulr using Grunt to automate development tasks, like compiling less to css, concatenating and minifying js files...</p>
              </li>
              <li data-ride="animated" data-animation="fadeInUp" data-delay="1100">
                <i class="icon-check pull-left text-lg m-r m-t-sm"></i>
                <p class="clear m-b-lg"><strong>Bower Package</strong>, fetching and installing packages from all over, finding, downloading, and saving the stuff you’re looking for.</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div> 
    <div class="bg-light">
      <div class="container">
        <div class="row m-t-xl m-b-xxl">
          <div class="col-sm-6 wrapper-xl">
            <h3 class="text-black font-bold m-b-lg">Responsive on all screen</h3>
            <p class="h4 l-h-1x">Angulr responsive CSS layout is built on Bootstrap Grid System, includes a responsive, mobile first fluid grid system to target a wide range of devices like desktop, tablets, smart phones etc</p>
          </div>
          <div class="col-sm-6" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
            <div class="m-t-xxl text-center">
              <span class="text-2x text-muted"><i class="icon-screen-smartphone text-2x"></i></span>
              <span class="text-3x text-muted"><span class="text-2x"><i class="icon-screen-desktop text-2x"></i></span></span>
              <span class="text-3x text-muted"><i class="icon-screen-tablet text-2x"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white-only">
      <div class="container">
        <div class="row m-t-xl m-b-xxl">
          <div class="col-sm-6" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
            <div class="m-t-xxl text-center">
              <p>
              <a href="http://themeforest.net/user/Flatfull/portfolio?ref=flatfull" target="_blank" class="text-sm btn btn-lg btn-rounded btn-default m-sm">
                <i class="fa fa-apple fa-3x pull-left m-l-sm"></i>
                <span class="block clear m-t-xs text-left m-r m-l">Available on the <b class="text-lg block font-bold">App Store</b>
                </span>
              </a>
              </p>
              <p>
              <a href="index.html" target="_blank" class="text-sm btn btn-lg btn-rounded btn-default m-sm">
                <i class="fa fa-android fa-3x pull-left m-l-sm"></i>
                <span class="block clear m-t-xs text-left m-r m-l">Get it on <b class="text-lg block font-bold">Google Play</b>
                </span>
              </a>
              </p>
            </div>
          </div>
          <div class="col-sm-6 wrapper-xl">
            <h3 class="text-black font-bold m-b-lg">Build cross-platform apps with HTML5</h3>
            <p class="h4 l-h-1x">You can build cross-platform apps for iOS, Android, and Windows devices by using  standard web technologies such as HTML, CSS, and JavaScript.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="testimonial" class="bg-black dker clearfix">
      <div class="container m-t-xxl m-b-xxl padder-v">
        <div class="carousel auto slide clearfix" id="b-slide" data-interval="6000">
        <ol class="carousel-indicators">
          <li data-target="#b-slide" data-slide-to="0" class=""></li>
          <li data-target="#b-slide" data-slide-to="1" class="active"></li>
          <li data-target="#b-slide" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner text-center m-t-xl m-b-xl">
          <div class="item">
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3 m-b-xl">
                <h4 class="font-thin l-h-2x text-white m-b-lg"><em>“Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat. Phasellus at dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibul ultricies neque, quis malesuada augue. Donec eleifend condimentum.”</em></h4>
                <p class="text-muted">- Suzanne Oliver, Chief Learning Officer</p>
              </div>
            </div>
          </div>
          <div class="item active">
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3  m-b-xl">
                <h4 class="font-thin l-h-2x text-white m-b-lg"><em>"Integer eleifend, nisl venenatis consequat iaculis Duis non malesuada est, quis congue nibh. Pellentesque et netus et malesuada fames ac turpis malesuada est, quis congue nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.”</em></h4>
                <p class="text-muted">- Leah Tate, PM</p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3  m-b-xl">
                <h4 class="font-thin l-h-2x text-white m-b-lg"><em>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat. Phasellus at ultricies neque, quis malesuada augue.”</em></h4>
                <p class="text-muted">- Chapman, Employee Development Manager</p>
              </div>
            </div>            
          </div>
        </div>
        <a class="left carousel-control" href="#b-slide" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#b-slide" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
      </div>
    </div>
{% endblock %}