<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <section class="features"> <div class="container"> <div class="col-md-8"> <div class="row"> <div class="col-md-4 col-sm-3 text-center icon"> <i class="fa fa-magic fa-5x"></i> </div> <div class="col-md-8 col-sm-9"> <h2>Website to App</h2> <p>Use the content on your website as a springboard to build apps for iOS, Android and Windows Phone 8. Or build your app entirely from scratch.</p> </div> </div> <div class="row"> <div class="col-md-4 col-sm-3 text-center icon"> <i class="fa fa-cubes fa-5x"></i> </div> <div class="col-md-8 col-sm-9"> <h2>Build and Design</h2> <p>Create unique apps with or use pre-defined skins and design features.</p> </div> </div> <div class="row"> <div class="col-md-4 col-sm-3 text-center icon"> <i class="fa fa-pencil-square-o fa-5x"></i> </div> <div class="col-md-8 col-sm-9"> <h2>Edit and Publish</h2> <p>View your changes live on your smartphone while you are building. Or use the browser simulator on your computer.</p> </div> </div> </div> </div> </section> <section class="sectioncarousel"> <div class="carousel carousel-fade slide" data-ride="carousel" id="appshowcase"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="col-md-5"><img src="http://www.appsburner.com/images/business.jpg" class="img-responsive"></div> <div class="col-md-6"><div class="carousel-content"> <h1> Business</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div></div> </div> <!-- End Item --> <div class="item"> <div class="col-md-5"><img src="http://www.appsburner.com/images/events.jpg" class="img-responsive"></div> <div class="col-md-6"><div class="carousel-content"> <h1> Events</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div></div> </div> <!-- End Item --> <div class="item"> <div class="col-md-5"><img src="http://www.appsburner.com/images/music.jpg" class="img-responsive"></div> <div class="col-md-6"><div class="carousel-content"> <h1> Music</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div></div> </div> <!-- End Item --> <div class="item"> <div class="col-md-5"><img src="http://www.appsburner.com/images/artist.jpg" class="img-responsive"></div> <div class="col-md-6"><div class="carousel-content"> <h1> Artists</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div></div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills"> <li data-target="#appshowcase" data-slide-to="0" class="active"><a href="#">Business</a></li> <li data-target="#appshowcase" data-slide-to="1"><a href="#">Events</a></li> <li data-target="#appshowcase" data-slide-to="2"><a href="#">Music</a></li> <li data-target="#appshowcase" data-slide-to="3"><a href="#">Artists</a></li> </ul> </div> <!-- End Carousel --> </section> <section class="slogan"> <div> <div class="container"> <div class="row"> <div class="md-col-10 col-md-offset-1"> <h4>It’s time to build your company an app. You don’t need to hire a genius. AppsBurner enables anyone to make mobile apps for iOS, Android and Windows Phone 8.</h4> </div> </div> </div> </div> </section> <section class="video v-center shadow-text" style="height: 800px; background-position: 50% 58px;"> <div id="bgVideo" class="background" style="height: 800px;"><video id="video_background" preload="auto" autoplay="autoplay" loop="loop" style="position: fixed; top: -203px; left: 0px; bottom: 0px; right: 0px; z-index: -100; width: 1422px; height: 799.875px;"><source src="http://www.appsburner.com/video/preview.mp4" type="video/mp4"><source src="http://www.appsburner.com/video/preview.webm" type="video/webm">bgvideo</video></div> <div class="videocontainer"> <div class="container"> <div class="hero-unit"> <h2>Start building your own app for FREE!</h2> <p>Build as long as you want, you start paying when you publish your app in the app stores.</p> <a style="margin-top:16px;" class="btn btn-lg btn-primary" href="http://www.appsburner.com/login.php" target="_blank">Build Your App</a> </div> </div> </div> </section> </section>

h1,h2,h3,h4 {font-weight:100} p { font-size: 18.004px; line-height: 1.722169; } .container { position: relative; z-index: 2; } section * { z-index: 2; } section { font-weight:100; margin:85px 0; } section.video { position:relative; height:800px; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; color:#FFF; } .shadow-text h2, .shadow-text h3, .shadow-text h4, .shadow-text h5, .shadow-text h6, .shadow-text p { text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); } .video.v-center,.video .v-center { display:table; width:100%; } .video .hero-unit { text-align:center; background-color:transparent; margin:0; padding:0; } video { left:0; bottom:0; right:0; z-index:-100; width:1422px; height:799.875px; border:none; margin:0; padding:0; } .video #bgVideo { overflow:hidden; } .video #bgVideo > video { position:absolute!important; top:0!important; } .video > div,.video .v-center > div { display:table-cell; vertical-align:middle; margin-top:0; margin-bottom:0; float:none; } .background { position:absolute; left:0; top:0; right:0; bottom:0; background:50% 50% no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } .sectioncarousel { position:relative; background-color:#F5F5F5; } .sectioncarousel h1 { font-size:76px; } .sectioncarousel .nav-pills > li > a { padding:4px 10px; } .sectioncarousel .nav-pills li { margin-right:8px; } .sectioncarousel .nav-pills { position:absolute; left:60%; top:20px; z-index:10; float:right; } .icon {padding-top:30px;} #appshowcase .col-md-5 { padding-left:0; } #appshowcase .col-md-5 { overflow:hidden; } #appshowcase img { min-height: 500px; } .carousel-content { padding-top:50px; } section.slogan h4 { line-height:44px; font-size:28px; } .videocontainer {z-index:100} .circle{ height:100px; width:100px; overflow:hidden; border-radius:50%; border:1px solid #000 } @media screen and max-width 568px{ .nav-pills { left:20px; top:20px; } }

$(document).ready( function() { $('#appshowcase').carousel({ interval: 4000 }); var clickEvent = false; $('#appshowcase').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });