"sf splat"
Bootstrap 3.2.0 Snippet by rayrc

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html> <html> <head><base href="http://pandorabots.com" /> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Apps RTC</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" type="image/png" href=""/> <!-- stylesheets --> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/compiled/theme.css"> <link rel="stylesheet" type="text/css" href="css/vendor/animate.css"> <link rel="stylesheet" type="text/css" href="css/vendor/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/biz.css"> <!-- javascript --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <!-- <script src="http://callmom.pandorabots.com/static/aiaas/aiaas.js"></script> --> <script src="js/theme.js"></script> <script src="js/popup.js"></script> <!-- <script src="js/biz.js"></script> --> <script src="js/jquery.cookie.js"></script> <script src="js/aiaas.js"></script> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body id="home2" data-spy="scroll" data-target=".slides"> <header class="navbar navbar-inverse white" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand"><img src="" style="max-width:200px; margin-top: -7px;"></a> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Its Time <i class="fa fa-chevron-down"></i> </a> <ul class="dropdown-menu"> <li><a href="products.html">Products </a></li> <li><a href="services.html">Services </a> </li> <li><a href="demos.html">Demos </a></li> </ul> </li> <li> <a href="http://appsrtc.com" target="_blank">Developers </a> </li> <li> <a href="https://playground.appsrtc.com" target="_blank">Playground </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> About <i class="fa fa-chevron-down"></i> </a> <ul class="dropdown-menu"> <li><a href="aboutus.html">About us</a></li> <li><a href="http://blog.appsrtc.com" target="_blank">Blog</a></li> </ul> </li> <li> <a href="http://www.appsrtc.com" class="signup visible-md visible-lg">Sign in</a> </li> </ul> </nav> </div> </header> <div id="hero"> <a class="slide-nav prev" href="#">Prev</a> <a class="slide-nav next" href="#">Next</a> <nav> <a class="active" href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </nav> <div class="slides"> <div class="slide first active"> <div class="bg"></div> <div class="container"> <h1 class="hero-text">Democratizing Search</h1> <p class="sub-text"> And jacking it in San Francisco. </p> <div class="cta animated fadeInRight text-center"> <a href="https://playground.appsrtc.com/en/tutorial/" target="_blank" class="button-outline">Tutorial</a> <a href="https://playground.appsrtc.com/en/" class="button" target="_blank">Get started</a> </div> </div> </div> <div class="slide second"> <div class="bg"></div> <div class="container"> <h1 class="hero-text"> Explore the Platform </h1> <p class="sub-text"> Learn how to leverage our network to level the playing field and <br> before somebody else does.. </p> <div class="cta animated fadeInRight text-center"> <a href="https://playground.appsrtc.com/en/tutorial/" class="button-outline" target="_blank">Take the Tour</a> <a href="https://playground.appsrtc.com/en/" class="button" target="_blank">Start building ads free</a> </div> </div> </div> <div class="slide third"> <div class="bg"></div> <div class="container"> <h1 class="hero-text animated fadeInLeft"> Deploy on our exclusive platform </h1> <p class="sub-text animated fadeInLeft"> Easily integrate existing content or port your builder out to adwords<br> Data abstraction means you data is yours. </p> <div class="cta animated fadeInRight"> <a href="http://appsrtc.io" class="button-outline">Explore the API</a> <a href="http://appsrtc.io" class="button">Sign up free</a> </div> </div> </div> <div class="slide third fourth"> <div class="bg"></div> <div class="container"> <h1 class="hero-text animated fadeInLeft"> Build a Keyframe Ad </h1> <p class="sub-text animated fadeInLeft"> Get in touch with us </p> <div class="cta animated fadeInRight"> <a href="https://playground.appsrtc.com/en/quickstart" class="button-outline">Learn More</a> <a href="https://playground.appsrtc.com/en/" class="button">Build an ad store it in your cloud, free!</a> </div> </div> </div> <div id="popup-wrapper" class="hidden"> <div class="popupHeader"> <div class="row"> <div class="col-md-12"> <i class="fa fa-comment icon-flipped"></i> Chat <span class="pull-right closePopup"><i class="fa fa-minus"></i></span> </div> </div> </div> <div class="popupChat"> <div id="response" class="hidden"></div> <div id="convo" class="scroll"></div> <div class="popupInput"> <form id="talk" class="boxedin" onsubmit="return false;"> <input type="text" id="yousay" class="form-control" placeholder="You say..." autofocus="" onkeydown="if (event.keyCode == 13) { doTalk();}"> </form> </div> </div> </div> <div id="popup-tab" class="openPopup"> <i class="fa fa-comment icon-flipped"></i> Message <span class="pull-right"><i class="fa fa-chevron-up"></i></span> </div> </div> </div> <div id="featureShowcase"> <div class="container"> <div class="row header"> <div class="col-md-12"> <h2>Need a custom virtual agent for your business or application?</h2> <p>Harness the world's leading platform for building and deploying custom HTML5 compliant ad banners, take them anywhewre, or host them on the leading private search network </p> </div> </div> <div class="row feature"> <div id="second-option"> <div class="row"> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/toolbox.png" alt="toolbox" /> <strong>Custom</strong> <p>Customize the AI for any project or vertical market.</p> </div> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/compose.png" alt="compose" /> <strong>Content</strong> <p>Use the same content libraries as award-winning systems.</p> </div> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/lightbulb.png" alt="lightbulb" /> <strong>Learning</strong> <p>remember relevant user details and evolve.</p> </div> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/globe.png" alt="globe" /> <strong>Community</strong> <p>Join largest 3rd party search platform in the world.</p> </div> </div> <!-- <div class="row"> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/mic.png" alt="mic" /> <strong>Voice Interactive</strong> <p>Allow users to converse, in natural language, with machines.</p> </div> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/chat.png" alt="chat" /> <strong>Multilingual</strong> <p>Write a bot in any language that can process multilingual inputs.</p> </div> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/computer.png" alt="computer" /> <strong>Deployable</strong> <p>Deploy a bot in any applicaiton using the Pandorabots API.</p> </div> <div class="col-md-3 feature"> <img src="images/circle-icons/one-color/creditcard.png" alt="creditcard" /> <strong>Free</strong> <p>Do all of the above... for free.<br><a href="services.html"><i>Learn about premium services</i> ></a></p> </div>--> </div> </div> </div> </div> </div> <div id="footer-white"> <div class="container"> <div class="row"> <div class="col-sm-3"> appsrtc, Inc.<br/> appsrtc Avenue<br/> SF, CA <br/><br/> p. 415-555-1212<br/> e. info@appsrtc.com<br/><br/> <a href="https://twitter.com/appsrtc" target="_blank"><i class="fa fa-twitter-square fa-2x twitter"></i></a> <a href="https://www.facebook.com/pages/appsrtc/47719737069" target="_blank"><i class="fa fa-facebook-square fa-2x facebook"></i></a> <a href="https://github.com/appsrtc" target="_blank"><i class="fa fa-github-square fa-2x github"></i></a> <a href="mailto:info@appsrtc.com"><i class="fa fa-envelope-square fa-2x mail"></i></a> </div> <div class="col-sm-3 menu"> <h3>BUSINESSES</h3> <ul> <li> <a href="products.html" target="_blank">Products</a> </li> <li> <a href="services.html" target="_blank">Services</a> </li> <li> <a href="http://appsrtc.com/static/html/Legal/index.html" target="_blank">Legal</a> </li> <li> <a href="http://appsrtc.com/static/html/Help/HelpContents.html" target="_blank">Help</a> </li> </ul> </div> <div class="col-sm-3 menu"> <h3>DEVELOPERS</h3> <ul> <li> <a href="http://appsrtc.io" target="_blank">The appsrtc API</a> </li> <li> <a href="http://appsrtc.io" target="_blank">Documentation</a> </li> <li> <a href="http://appsrtc.io" target="_blank">Use Cases</a> </li> <li> <a href="http://appsrtc.io" target="_blank">Pricing</a> </li> </ul> </div> <div class="col-sm-3 menu"> <h3>PLAYGROUND</h3> <ul> <li> <a href="https://playground.appsrtc.com" target="_blank">The Playground Sandbox</a> </li> <li> <a href="https://playground.appsrtc.com/en/quickstart/" target="_blank">Quick Start</a> </li> <li> <a href="https://playground.appsrtc.com/en/tutorial/" target="_blank">Tutorial</a> </li> <li> <a href="https://playground.appsrtc.com/en/faq/" target="_blank">FAQ</a> </li> </ul> </div> </div> <div class="row credits"> <div class="col-md-12"> Copyright © 2008-2014. appsrtc </div> </div> </div> </div> <script type="text/javascript"> $(function () { var $navDots = $("#hero nav a") var $next = $(".slide-nav.next"); var $prev = $(".slide-nav.prev"); var $slides = $("#hero .slides .slide"); var actualIndex = 0; var swiping = false; var interval; $navDots.click(function (e) { e.preventDefault(); if (swiping) { return; } swiping = true; actualIndex = $navDots.index(this); updateSlides(actualIndex); }); $next.click(function (e) { e.preventDefault(); if (swiping) { return; } swiping = true; clearInterval(interval); interval = null; actualIndex++; if (actualIndex >= $slides.length) { actualIndex = 0; } updateSlides(actualIndex); }); $prev.click(function (e) { e.preventDefault(); if (swiping) { return; } swiping = true; clearInterval(interval); interval = null; actualIndex--; if (actualIndex < 0) { actualIndex = $slides.length - 1; } updateSlides(actualIndex); }); function updateSlides(index) { // update nav dots $navDots.removeClass("active"); $navDots.eq(index).addClass("active"); // update slides var $activeSlide = $("#hero .slide.active"); var $nextSlide = $slides.eq(index); $activeSlide.fadeOut(); $nextSlide.addClass("next").fadeIn(); setTimeout(function () { $slides.removeClass("next").removeClass("active"); $nextSlide.addClass("active"); $activeSlide.removeAttr('style'); swiping = false; }, 1000); } interval = setInterval(function () { if (swiping) { return; } swiping = true; actualIndex++; if (actualIndex >= $slides.length) { actualIndex = 0; } updateSlides(actualIndex); }, 5000); // demo player var $videoModal = $(".video-modal"); $("#demo-player").click(function () { $videoModal.toggleClass("active"); clearInterval(interval); interval = null; }); $videoModal.click(function () { $videoModal.removeClass("active"); setTimeout(function () { $videoModal.find(".wrap").html('<iframe src="http://player.vimeo.com/video/appsrtc" width="620" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'); }, 1000); }) $videoModal.find(".wrap").click(function (e) { e.stopPropagation(); }); }); </script> </body> </html>

Related: See More

Navbar With Icons

Questions / Comments: