AlexSidorov
/
it_kbsu_ru


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
							<!DOCTYPE html>
<html>
    <head>

        <!-- /.website title -->
        <title>Backyard App Landing Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <!-- CSS Files -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="fonts/icon-7-stroke/css/pe-icon-7-stroke.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet" media="screen">
        <link href="css/owl.theme.css" rel="stylesheet">
        <link href="css/owl.carousel.css" rel="stylesheet">

        <!-- Colors -->
        <link href="css/css-app.css" rel="stylesheet" media="screen">
        <!-- <link href="css/css-app-green.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-app-purple.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-app-red.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-app-orange.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-app-yellow.css" rel="stylesheet" media="screen"> -->

        <!-- Google Fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" />
    </head>

    <body data-spy="scroll" data-target="#navbar-scroll">

        <!-- /.preloader -->
        <div id="preloader"></div>
        <div id="top"></div>

        <!-- /.parallax full screen background image -->
        <div class="fullscreen landing parallax" style="background-image:url('images/bg.jpg');" data-img-width="2000" data-img-height="1325" data-diff="100">

            <div class="overlay">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7">

                            <!-- /.logo -->
                            <div class="logo wow fadeInDown"> <a href=""><img src="images/logo.png" alt="logo"></a></div>
                            <!-- /.main title -->
                            <h1 class="wow fadeInLeft">
                                Mobile Strategy App
                            </h1>

                            <!-- /.header paragraph -->
                            <div class="landing-text wow fadeInLeft">
                                <p>Backyard is a modern and customizable landing page template designed to increase conversion of your product. Backyard is flexible to suit any kind of your business. Try now and join with our happy customers!</p>
                            </div>				  

                            <!-- /.header button -->
                            <div class="head-btn wow fadeInLeft">
                                <a href="#feature" class="btn-primary">Features</a>
                                <a href="#subscribe" class="btn-default">Subscribe</a>
                            </div>

                            <!-- /.phone option -->
                            <div class="more wow fadeInLeft">
                                <p>Available for:
                                    <a href="#download" class="btn option"><i class="fa fa-apple"></i>iOS</a>
                                    <a href="#download" class="btn option"><i class="fa fa-android"></i>Android</a>
                                </p>
                            </div>			  

                        </div> 

                        <!-- /.phone image -->
                        <div class="col-md-5">
                            <img src="images/mobile.png" alt="phone" class="header-phone img-responsive wow fadeInRight">
                        </div>
                    </div>
                </div> 
            </div> 
        </div>

        <!-- NAVIGATION -->
        <div id="menu">
            <nav class="navbar-wrapper navbar-default" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-backyard">
                            <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 site-name" href="#top"><img src="images/logo2.png" alt="logo"></a>
                    </div>

                    <div id="navbar-scroll" class="collapse navbar-collapse navbar-backyard navbar-right">
                        <ul class="nav navbar-nav">
                            <li><a href="#intro">About</a></li>
                            <li><a href="#feature">Features</a></li>
                            <li><a href="#subscribe">Subscribe</a></li>
                            <li><a href="#screenshot">Screenshots</a></li>
                            <li><a href="#testi">Reviews</a></li>
                            <li><a href="#download">Download</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>

        <!-- /.intro section -->
        <div id="intro">
            <div class="container">
                <div class="row">
                    <!-- /.intro image -->
                    <div class="col-md-6 intro-pic wow slideInLeft">
                        <img src="images/intro-image.jpg" alt="image" class="img-responsive">
                    </div>	

                    <!-- /.intro content -->
                    <div class="col-md-6 wow slideInRight">
                        <h2>Optimize performance through advanced targeting solutions</h2>
                        <p>Good marketing makes the company look smart. <a href="#">Great marketing</a> makes the customer feel smart, - Joe Chernov. Never doubt a small group of thoughtful, committed people can change the world. Indeed, it is the only thing that ever has, - Margaret Mead. The best way to predict the future is to create it, - Peter Drucker.
                        </p>

                        <div class="btn-section"><a href="#feature" class="btn-default">Learn More</a></div>

                    </div>
                </div>			  
            </div>
        </div>

        <!-- /.feature section -->
        <div id="feature">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

                        <!-- /.feature title -->
                        <h2>Recreate your ideas and gain more success</h2>
                        <p>Increase your user loyalty by maintaining mutual communication and nurturing your online community.</p>
                    </div>
                </div>
                <div class="row row-feat">
                    <div class="col-md-4 text-center">

                        <!-- /.feature image -->
                        <div class="feature-img">
                            <img src="images/feature-image.jpg" alt="image" class="img-responsive wow fadeInLeft">
                        </div>
                    </div>

                    <div class="col-md-8">

                        <!-- /.feature 1 -->
                        <div class="col-sm-6 feat-list">
                            <i class="pe-7s-notebook pe-5x pe-va wow fadeInUp"></i>
                            <div class="inner">
                                <h4>Marketing Strategy</h4>
                                <p>Good marketing makes the company look smart. Great marketing makes the customer feel smart.
                                </p>
                            </div>
                        </div>

                        <!-- /.feature 2 -->
                        <div class="col-sm-6 feat-list">
                            <i class="pe-7s-cash pe-5x pe-va wow fadeInUp" data-wow-delay="0.2s"></i>
                            <div class="inner">
                                <h4>App Monetization</h4>
                                <p>Content builds relationships. Relationships are built on trust. Trust drives revenue. - Andrew Davis</p>
                            </div>
                        </div>

                        <!-- /.feature 3 -->
                        <div class="col-sm-6 feat-list">
                            <i class="pe-7s-cart pe-5x pe-va wow fadeInUp" data-wow-delay="0.4s"></i>
                            <div class="inner">
                                <h4>Store Optimization</h4>
                                <p>Never doubt a small group of thoughtful, committed people can change the world. Indeed, it is the only thing that ever has.</p>
                            </div>
                        </div>

                        <!-- /.feature 4 -->
                        <div class="col-sm-6 feat-list">
                            <i class="pe-7s-users pe-5x pe-va wow fadeInUp" data-wow-delay="0.6s"></i>
                            <div class="inner">
                                <h4>User Management</h4>
                                <p>Instead of using technology to automate processes, think about using technology to enhance human interaction.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- /.feature 2 section -->
        <div id="feature-2">
            <div class="container">
                <div class="row">

                    <!-- /.feature content -->
                    <div class="col-md-6 wow fadeInLeft">
                        <h2>Learn how to make your app marketing efficient</h2>
                        <p>Good marketing makes the company look smart. <span class="highlight">Great marketing</span> makes the customer feel smart, - Joe Chernov. Never doubt a small group of thoughtful, committed people can change the world. Indeed, it is the only thing that ever has, - Margaret Mead. The best way to predict the future is to create it, - Peter Drucker.
                        </p>

                        <div class="btn-section"><a href="#download" class="btn-default">Download Now</a></div>

                    </div>

                    <!-- /.feature image -->
                    <div class="col-md-6 feature-2-pic wow fadeInRight">
                        <img src="images/feature2-image.jpg" alt="image" class="img-responsive">
                    </div>				  
                </div>			  

            </div>
        </div>


        <!-- /.subscribe section -->
        <div id="subscribe">
            <div class="subscribe fullscreen parallax" style="background-image:url('images/bg.jpg');" data-img-width="1920" data-img-height="1281" data-diff="100">
                <div class="overlay">
                    <div class="container">

                        <!-- /.mail icon -->
                        <div class="col-md-4 col-md-offset-4 text-center">
                            <i class="pe-7s-mail pe-va letter wow fadeInUp"></i>
                        </div>
                        <div class="col-md-8 col-md-offset-2 text-center">
                            <p>We'll research the market, identify the right target audience, analyze competitors and avoid users churn to increase retention. Enter your email address and we will do the rest.</p>

                            <!-- /.subscribe form -->
                            <div class="subscribe-form wow fadeInUp">
                                <form class="news-letter mailchimp" action="http://moxdesign.us10.list-manage.com/subscribe/post" role="form" method="POST">
                                    <input type="hidden" name="u" value="503bdae81fde8612ff4944435">
                                    <input type="hidden" name="id" value="bfdba52708">
                                    <input class="form-control" type="email" name="MERGE0" placeholder="Your email..." required="">
                                    <button type="submit" class="subscribe-btn btn">SUBSCRIBE</button>
                                </form>
                            </div>					
                        </div>

                    </div>	
                </div>
            </div>
        </div>

        <!-- /.screenshot section -->
        <div id="screenshot">
            <div class="container">
                <div class="text-center">
                    <h2 class="wow fadeInLeft">SCREENSHOTS</h2>
                    <div class="title-line wow fadeInRight"></div>
                </div>
                <div class="row screenshots">

                    <div id="screenshots" class="owl-carousel">

                        <!-- /.screenshot images -->
                        <div class="screen wow fadeInUp">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot1.jpg" alt="Screenshot"></a>
                        </div>

                        <div class="screen wow fadeInUp" data-wow-delay="0.1s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot2.jpg" alt="Screenshot"></a>
                        </div>

                        <div class="screen wow fadeInUp" data-wow-delay="0.2s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot3.jpg" alt="Screenshot"></a>
                        </div>

                        <div class="screen wow fadeInUp" data-wow-delay="0.3s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot4.jpg" alt="Screenshot"></a>
                        </div>

                        <div class="screen wow fadeInUp" data-wow-delay="0.4s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot1.jpg" alt="Screenshot"></a>
                        </div>

                        <div class="screen wow fadeInUp" data-wow-delay="0.5s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot2.jpg" alt="Screenshot"></a>
                        </div>			

                        <div class="screen wow fadeInUp" data-wow-delay="0.6s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot3.jpg" alt="Screenshot"></a>
                        </div>

                        <div class="screen wow fadeInUp" data-wow-delay="0.7s">
                            <a href="images/screenshot.jpg" data-toggle="lightbox"><img src="images/screenshot4.jpg" alt="Screenshot"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- /.client section -->
        <div id="client"> 
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <img alt="client" src="images/client1.png" class="wow fadeInUp">
                        <img alt="client" src="images/client2.png" class="wow fadeInUp" data-wow-delay="0.2s">
                        <img alt="client" src="images/client3.png" class="wow fadeInUp" data-wow-delay="0.4s">
                        <img alt="client" src="images/client4.png" class="wow fadeInUp" data-wow-delay="0.6s">
                    </div>
                </div>
            </div>	
        </div>

        <!-- /.testimonial section -->
        <div id="testi">
            <div class="container">
                <div class="text-center">
                    <h2 class="wow fadeInLeft">TESTIMONIALS</h2>
                    <div class="title-line wow fadeInRight"></div>
                </div>
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">	
                        <div id="owl-testi" class="owl-carousel owl-theme wow fadeInUp">

                            <!-- /.testimonial 1 -->
                            <div class="testi-item">
                                <div class="client-pic text-center">

                                    <!-- /.client photo -->
                                    <img src="images/testi1.jpg" alt="client">
                                </div>
                                <div class="box">

                                    <!-- /.testimonial content -->
                                    <p class="message text-center">"We are very happy and satisfied with Backyard service. Our account manager is efficient and very knowledgeable. It was able to create a vast fan base within very short period of time. We would highly recommend Backyard App to anyone."</p>
                                </div>
                                <div class="client-info text-center">

                                    <!-- /.client name -->
                                    Jennifer Lopez, <span class="company">Microsoft</span>	
                                </div>
                            </div>		

                            <!-- /.testimonial 2 -->
                            <div class="testi-item">
                                <div class="client-pic text-center">

                                    <!-- /.client photo -->
                                    <img src="images/testi2.jpg" alt="client">
                                </div>
                                <div class="box">

                                    <!-- /.testimonial content -->
                                    <p class="message text-center">"Everything looks great... Thanks for the quick revision turn around. We were lucky to find you guys and will definitely be using some of your other services in the near future."</p>
                                </div>
                                <div class="client-info text-center">

                                    <!-- /.client name -->
                                    Mike Portnoy, <span class="company">Dream Theater</span>	
                                </div>
                            </div>				

                            <!-- /.testimonial 3 -->
                            <div class="testi-item">
                                <div class="client-pic text-center">

                                    <!-- /.client photo -->
                                    <img src="images/testi3.jpg" alt="client">
                                </div>
                                <div class="box">

                                    <!-- /.testimonial content -->
                                    <p class="message text-center">"Overall, the two reports were very clear and helpful so thank you for the suggestion to do the focus group. We are currently working with our developer to implement some of these suggestions."</p>
                                </div>
                                <div class="client-info text-center">

                                    <!-- /.client name -->
                                    Jennifer Love Hewitt, <span class="company">Lead Vocal</span>	
                                </div>
                            </div>			

                        </div>
                    </div>	
                </div>	
            </div>
        </div>

        <!-- /.download section -->
        <div id="download">
            <div class="action fullscreen parallax" style="background-image:url('images/bg.jpg');" data-img-width="2000" data-img-height="1334" data-diff="100">
                <div class="overlay">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                                <h2 class="wow fadeInLeft">Would like to know more?</h2>
                                <p class="download-text wow fadeInRight">We'll research the market, identify the right target audience, analyze competitors and avoid users churn to increase retention. Download now for free and join with thousands happy clients.</p>

                                <!-- /.download buttons -->
                                <ul class="download-store">
                                    <li class="appstorebutton iphone wow fadeInUp">
                                        <a href="#"><i class="fa fa-apple"></i><p><small>Available on the</small></br>App Store</p></a>
                                    </li>
                                    <li class="appstorebutton android wow fadeInUp" data-wow-delay="0.2s">
                                        <a href="#"><i class="fa fa-android"></i><p><small>Available on the</small></br>Play Store</p></a>
                                    </li>	
                                </ul>
                            </div>					
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- /.footer -->
        <footer id="footer">
            <div class="container">
                <div class="col-sm-4 col-sm-offset-4">
                    <!-- /.social links -->
                    <div class="social text-center">
                        <ul>
                            <li><a class="wow fadeInUp" href="https://twitter.com/"><i class="fa fa-twitter"></i></a></li>
                            <li><a class="wow fadeInUp" href="https://www.facebook.com/" data-wow-delay="0.2s"><i class="fa fa-facebook"></i></a></li>
                            <li><a class="wow fadeInUp" href="https://plus.google.com/" data-wow-delay="0.4s"><i class="fa fa-google-plus"></i></a></li>
                            <li><a class="wow fadeInUp" href="https://instagram.com/" data-wow-delay="0.6s"><i class="fa fa-instagram"></i></a></li>
                        </ul>
                    </div>	
                    <div class="text-center wow fadeInUp" style="font-size: 14px;">Copyright Backyard 2015 - Template by  <a href="http://bootstrapthemes.co/" target="_blank">BootstrapThemes</a></div>
                    <a href="#" class="scrollToTop"><i class="pe-7s-up-arrow pe-va"></i></a>
                </div>	
            </div>	
        </footer>

        <!-- /.javascript files -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/custom.js"></script>
        <script src="js/jquery.sticky.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/ekko-lightbox-min.js"></script>
        <script type="text/javascript">
            $( document ).delegate( '*[data-toggle="lightbox"]', 'click', function ( event ) {
                event.preventDefault();
                $( this ).ekkoLightbox();
            } );
        </script>
        <script>
            new WOW().init();
        </script>
    </body>
</html>