AlexSidorov
/
it_kbsu_ru


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!DOCTYPE html>
<html>
    <head>

        <!-- /.website title -->
        <title>Backyard 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-index.css" rel="stylesheet" media="screen">
        <!-- <link href="css/css-index-green.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-index-purple.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-index-red.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-index-orange.css" rel="stylesheet" media="screen"> -->
        <!-- <link href="css/css-index-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/HNCK3991.jpg');" data-img-width="2000" data-img-height="1333" data-diff="100">

            <div class="overlay">
                <div class="container">
                    <div class="col-md-10 col-md-offset-1 text-center">

                        <!-- /.logo -->
                        <div class="logo wow fadeInDown" style="margin-top: 50px"> <a href=""><img src="images/logo.png" alt="logo"></a></div>

                        <!-- /.main title -->
                        <h2 class="wow fadeInUp" style="margin-bottom: 50px">
                            Shortcodes / Typography
                        </h2>

                    </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="#shortcode-basic">Basic</a></li>
                            <li><a href="#shortcode-button">Button</a></li>
                            <li><a href="#shortcode-icon">Icon</a></li>
                            <li><a href="#shortcode-alert">Alert</a></li>
                            <li><a href="#shortcode-table">Table</a></li>
                            <li><a href="#shortcode-column">Column</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>


        <div id="shortcode-basic">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <p>Lorem ipsum dolor sit amet, consectetur <a href="#">text link</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim <em>ad minim veniam, quis nostrud exercitatio ullamcon</em> laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <h1>H1 Heading</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        <h2>H2 Heading</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        <h3>H3 Heading</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                    <div class="col-sm-6">
                        <p>Lorem ipsum dolor sit amet, consectetur <span class="highlight">highlighted</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <strong>bold text</strong> laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <h4>H4 Heading</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <h5>H5 Heading</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <h6>H6 Small Paragraph</h6>
                        <p><small>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></p>
                    </div>
                </div>
            </div>
        </div>		


        <div id="shortcode-button">				
            <div class="container">
                <div class="row">

                    <div class="col-sm-7">
                        <h3>BUTTON</h3>
                        <div class="button-demo text-center">
                            <ul class="list-inline" style="margin-top: 25px">
                                <li><a href="#" class="btn-default">Default</a></li>
                                <li><a href="#" class="btn-primary">Primary</a></li>
                                <li><a href="#" class="btn-secondary">Secondary</a></li>
                            </ul>
                        </div>	
                        <h3 style="margin-top: 45px">SOCIAL ICONS</h3>
                        <div class="social text-center">
                            <ul>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-github"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                <li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
                                <li><a href="#"><i class="fa fa-vine"></i></a></li>
                                <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                            </ul>
                        </div>				
                    </div>

                    <div class="col-sm-5">
                        <h3>CONTACT FORM</h3>
                        <form method="POST" id="contact-form" class="form-horizontal" action="contactengine.php" onSubmit="alert( 'Thank you for your feedback!' );">
                            <div class="form-group">
                                <input type="text" name="Name" id="Name" class="form-control" placeholder="Name" required/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="Email" id="Email" class="form-control" placeholder="Email" required/>
                            </div>					
                            <div class="form-group">
                                <textarea name="Message" rows="20" cols="20" id="Message" class="form-control input-message"  placeholder="Message" required></textarea>
                            </div>
                            <div class="form-group">
                                <input type="submit" name="submit" value="Submit" class="btn btn-success" />
                            </div>
                        </form>			
                    </div>			

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

        <div id="shortcode-icon">				
            <div class="container">
                <ul class="icon-demo list-inline text-center">
                    <li><i class="pe-7s-notebook pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-cloud-download pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-wallet pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-video pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-home pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-ribbon pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-trash pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-signal pe-5x pe-va"></i></li>
                    <li><i class="pe-7s-speaker pe-5x pe-va"></i></li>
                </ul>
            </div>
        </div>


        <div id="shortcode-alert" class="section dark">
            <div class="container">
                <div class="text-left">
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Success Alert.</strong> You successfully read this important alert message. 
                        <i class="fa fa-check"></i>
                    </div>
                    <div class="alert alert-info">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Info Alert.</strong> This alert needs your attention, but it's not super important. 
                        <i class="fa fa-support"></i>
                    </div>
                    <div class="alert alert-warning">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Warning Alert.</strong> Better check yourself, you're not looking too good. 
                        <i class="fa fa-warning"></i>
                    </div>
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Danger Alert.</strong> Change a few things up and try submitting again. 
                        <i class="fa fa-times"></i>
                    </div>
                </div>
            </div>
        </div>

        <div id="shortcode-table">
            <div class="container">
                <table class="table table-bg table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center">Package</th>
                            <th class="text-center">Details</th>
                            <th class="text-center">Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Basic</td>
                            <td>100MB Disk Space</td>
                            <td class="text-center"><strong>$9</strong></td>
                        </tr>
                        <tr>
                            <td>Standard</td>
                            <td>400MB Bandwidth</td>
                            <td class="text-center"><strong>$19</strong></td>
                        </tr>
                        <tr>
                            <td>Advance</td>
                            <td>10 Subdomains</td>
                            <td class="text-center"><strong>$29</strong></td>
                        </tr>
                        <tr>
                            <td>Ultimate</td>
                            <td>50 Email Accounts</td>
                            <td class="text-center"><strong>$49</strong></td>
                        </tr>
                        <tr>
                            <td>Professional</td>
                            <td>24/7 Support</td>
                            <td class="text-center"><strong>$99</strong></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="shortcode-column">
            <div class="container">
                <div class="row">	
                    <div class="col-sm-12">
                        <h5>1/1</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
                <div class="row">	
                    <div class="col-sm-6">
                        <h5>1/2</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempor.</p>
                    </div>
                    <div class="col-sm-6">
                        <h5>1/2</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempor.</p>
                    </div>		
                </div>
                <div class="row">	
                    <div class="col-sm-8">
                        <h5>2/3</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempor.</p>
                    </div>
                    <div class="col-sm-4">
                        <h5>1/3</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore.</p>
                    </div>		
                </div>
                <div class="row">	
                    <div class="col-sm-4">
                        <h5>1/3</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore.</p>
                    </div>
                    <div class="col-sm-4">
                        <h5>1/3</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore.</p>
                    </div>	
                    <div class="col-sm-4">
                        <h5>1/3</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore.</p>
                    </div>			
                </div>
                <div class="row">	
                    <div class="col-sm-9">
                        <h5>3/4</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempor. Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempor.</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>1/4</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.</p>
                    </div>		
                </div>
                <div class="row">	
                    <div class="col-sm-3">
                        <h5>1/4</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.</p>
                    </div>	
                    <div class="col-sm-3">
                        <h5>1/4</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.</p>
                    </div>	
                    <div class="col-sm-3">
                        <h5>1/4</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.</p>
                    </div>	
                    <div class="col-sm-3">
                        <h5>1/4</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.</p>
                    </div>				
                </div>
            </div>
        </div>

        <!-- /.footer -->
        <footer id="footer">
            <div class="container">
                <div class="col-sm-4 col-sm-offset-4">
                    <hr>
                    <div class="text-center wow fadeInUp">Copyright Backyard 2015 <a href="http://bootstrapthemes.co/" target="_blank">Bootstrap Themes</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>
                            new WOW().init();
        </script>
    </body>
</html>