<!DOCTYPE html>
<html>
<head>
    <title>Light Blue - Admin Template</title>
    <link href="css/application.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
</head>
<body class="background landing">
<div class="container">
    <header class="page-header">
        <div class="navbar">
            <div class="logo pull-left">
                <h4><a href="index.html">Light <strong>Blue</strong></a> <small>bootstrap 3 template</small></h4>
            </div>
            <ul class="nav navbar-nav pull-right navbar-menu hidden-xs">
                <li class="active">
                    <a href="#">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#about">
                        About
                    </a>
                </li>
            </ul>
            <ul class="navbar-buttons pull-right">
                <li>
                    <a href="index.html" class="btn btn-sm btn-transparent">
                        Preview&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                <li>
                    <a href="https://wrapbootstrap.com/theme/light-blue-responsive-admin-template-WB0T41TX4"
                       class="btn btn-sm btn-transparent">
                        Download&nbsp;
                        <i class="fa fa-download"></i>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <div class="content">
        <div id="carousel-landing" class="carousel slide carousel-landing carousel-fade">
            <ol class="carousel-indicators">
                <li data-target="#carousel-landing" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-landing" data-slide-to="1" class=""></li>
                <li data-target="#carousel-landing" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="animated fadeInLeftBig">
                                <h1 class="slide-one-header"><strong>Light Blue</strong> <br>Dashboard Template</h1>
                                <p class="lead hidden-xs">
                                    World <strong>First</strong> Transparent Dashboard
                                </p>
                                <p>
                                    <a href="index.html" class="btn btn-lg btn-white">
                                        Preview &nbsp; <i class="fa fa-angle-right"></i>
                                    </a>
                                    <a href="https://wrapbootstrap.com/theme/light-blue-responsive-admin-template-WB0T41TX4"
                                       class="btn btn-lg btn-transparent">
                                        Purchase &nbsp; <i class="fa fa-shopping-cart"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="text-align-center animated fadeInRightBig">
                                <img src="img/jpeg/light-blue-preview-1.png" alt="Second slide">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <h1 class="slide-two-header text-align-center animated fadeInDown">
                        <strong>Transparent</strong> & <strong>White</strong>
                        Versions
                    </h1>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="animated fadeInLeftBig">
                                <p>
                                    <a href="index.html">
                                        <img src="img/jpeg/light-blue-laptop-transparent.png" alt=""/>
                                    </a>
                                </p>
                                <p class="text-align-center">
                                    <a href="index.html" class="btn btn-transparent btn-lg btn-version-preview">
                                        Preview &nbsp; <i class="fa fa-angle-right"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="animated fadeInRightBig">
                                <p>
                                    <a href="white/index.html">
                                        <img src="img/jpeg/light-blue-laptop-white.png" alt=""/>
                                    </a>
                                </p>
                                <p class="text-align-center">
                                    <a href="white/index.html" class="btn btn-white btn-lg btn-version-preview">
                                        Preview &nbsp; <i class="fa fa-angle-right"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="animated fadeInLeft">
                                <h1 class="slide-three-header">
                                    <strong>Fully</strong>
                                    <br>
                                    Responsive
                                </h1>
                                <p>
                                    <a href="http://responsinator.com/?url=http%3A%2F%2Fdemo.okendoken.com" class="btn btn-white btn-lg" target="_blank">
                                        Test It
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <p class="animated fadeInUp" style="margin-top: 20px">
                                <img src="img/jpeg/light-blue-phone.png" alt=""/>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="left carousel-control carousel-control-landing" href="#carousel-landing" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control carousel-control-landing" href="#carousel-landing" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div>
    </div>
</div>
<div id="about" class="widget widget-white widget-about">
    <div class="container">
        <div class="row">
            <div class="col-sm-offset-1 col-sm-10">
                <h2><strong>About Light Blue</strong></h2>
                <p>
                    <strong>Light Blue</strong> - is a next generation dashboard template. Flat design and transparency - the
                    design that the world haven't seen before Light Blue.
                </p>
                <div class="row features">
                    <div class="col-sm-4">
                        <section class="feature">
                            <div class="row">
                                <div class="col-xs-4">
                                    <p>
                                        <span class="icon background-danger">
                                            <i class="fa fa-bold"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="col-xs-8">
                                    <h4>Bootstrap 3</h4>
                                    <p>
                                        Light Blue comes with built-in Twitter Bootstrap 3 support.
                                        Easy to design your next web app.
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-sm-4">
                        <section class="feature">
                            <div class="row">
                                <div class="col-xs-4">
                                    <p>
                                        <span class="icon background-warning">
                                            <i class="fa fa-magic"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="col-xs-8">
                                    <h4>Unique design</h4>
                                    <p>
                                        Transparent widgets and gradient background - have you seen something like this
                                        before?
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-sm-4">
                        <section class="feature">
                            <div class="row">
                                <div class="col-xs-4">
                                    <p>
                                        <span class="icon background-success">
                                            <i class="fa fa-wrench"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="col-xs-8">
                                    <h4>Developer-friendly</h4>
                                    <p>
                                        Simple, intuitive and easily maintainable code.
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="row features">
                    <div class="col-sm-4">
                        <section class="feature">
                            <div class="row">
                                <div class="col-xs-4">
                                    <p>
                                        <span class="icon background-primary">
                                            <i class="fa fa-superscript"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="col-xs-8">
                                    <h4>White & Transparent</h4>
                                    <p>
                                        Two styles each having two background options.
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-sm-4">
                        <section class="feature">
                            <div class="row">
                                <div class="col-xs-4">
                                    <p>
                                        <span class="icon background-lime">
                                            <i class="fa fa-check"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="col-xs-8">
                                    <h4>Web applications</h4>
                                    <p>
                                        LB itself is a web app. Plus there is an Email -
                                        ready-to-use Backbone application.
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-sm-4">
                        <section class="feature">
                            <div class="row">
                                <div class="col-xs-4">
                                    <p>
                                        <span class="icon background-info">
                                            <i class="fa fa-css3"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="col-xs-8">
                                    <h4>Sass-powered</h4>
                                    <p>
                                        Variables, mixins, includes - things that
                                        make Light Blue really easy to customize.
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <p class="preview text-align-center">
            <a href="white/index.html" class="btn btn-lg btn-danger">
                &nbsp; Preview the White Version &nbsp;
            </a>
        </p>
    </div>
</div>
<h2 class="thanks text-align-center">Thanks for watching!</h2>
<p class="lead text-align-center"><a class="back-to-top" href="#"> back to top <i class="fa fa-angle-up"></i></a></p>

<!-- jquery and friends -->
<script src="lib/jquery/jquery-2.0.3.min.js"> </script>

<!-- bootstrap default plugins -->
<script src="lib/bootstrap/transition.js"></script>
<script src="lib/bootstrap/carousel.js"></script>

<!-- page specific -->
<script src="js/landing.js"></script>


</body>