"Horizontal Login Form in Navbar"
Bootstrap 3.2.0 Snippet by rmashhoon

<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 ----------> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.min.css" rel="stylesheet"> </head> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="HTFont" class="navbar-brand" href="#">hypetech</a> </div> <center> <div class="navbar-collapse collapse" id="navbar-main"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">FAQ</a> </li> <li><a href="#">Contact</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <a class="btn btn-social-icon btn-facebook"> <i class="fa fa-facebook"></i> </a> <a class="btn btn-social-icon btn-twitter"> <i class="fa fa-twitter"></i> </a> <a class="btn btn-social-icon btn-dropbox"> <i class="fa fa-envelope"></i> </a> </form> </div> </center> </div> </div> <section class="block"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="active item"> <img src="http://static.tumblr.com/bc6c2896b949e6d921cacfab75fcdc7e/fd01bqn/Iz1n3zjqd/tumblr_static_8j45bi2yp0so4o8s8o48o0w0w.jpg" alt="Slide1"/> <div class="overlayLeft"> <h1 class="animated fadeInDown">Leading Web Design</h1> <body class="animated fadeInDown">We create beautiful websites. Get more information today. Shoot us a message if you have any questions! <br><br></body> <a href="signup" class="btn btn-default btn-lg">Get a Quote!</a> </div> <div class="overlayRight"> <img class="animated fadeInRightBig" src="http://www.ytupload.net/macbook.png"> </div> </div> <div class="item"> <img src="http://eachdaypaid.com/wp-content/uploads/2014/01/minimal-gray-to-white-gradient-wallpapers_33797_1920x1200.jpg" alt="Slide2"/> <div class="overlayLeft"> <h1 class="animated fadeInDown">Custom Admin Page</h1> <body class="animated fadeInDown">Every website we build has a unique admin page, so you can edit all your website's content easily! <br><br></body> <a href="signup" class="btn btn-default btn-lg">More Info!</a> </div> <div class="overlayRight"> <img class="animated fadeInRightBig" src="http://www.ytupload.net/macbook.png"> </div> </div> <div class="item"> <img src="http://eachdaypaid.com/wp-content/uploads/2014/01/minimal-gray-to-white-gradient-wallpapers_33797_1920x1200.jpg" alt="Slide3"/> <div class="overlayLeft"> <h1 class="animated fadeInDown">Awesome Support</h1> <body class="animated fadeInDown">We respond to all your requests, questions and comments in less than 24 hours. Shoot us a message! <br><br></body> <a href="signup" class="btn btn-default btn-lg">Contact Us!</a> </div> <div class="overlayRight"> <img class="animated fadeInRightBig" src="http://www.ytupload.net/macbook.png"> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"></a> </div> </section> <div style="padding-top: 3%;"class="container"><div class="row"> <div class="col-md-4"> <div class="well"> <div class="wells"><h2>Quality Design</h2> <img class="icon" border="0" src="http://cdn.flaticon.com/png/256/26795.png" width="100" height="100"> <p><br>Our goal at HypeTech is to produce high quality websites fulfilling every one of your needs. We work to find and design the color schemes optimal for your business to attract the most customers. There is a heavy importance on website organization to make it easy for customers to navigate and find what they are looking for.</p> </div> </div> </div> <div class="col-md-4"> <div class="well"> <div class="wells"><h2>Cost-Effective</h2> <img class="icon" border="0" src="http://cdn.flaticon.com/png/256/46713.png" width="100" height="100"> <p><br>Owning a website for your business today is a necessity. It leads to a vast increase of customers and one of the most effective sources of marketing to get your business more publicity and access to new customers. We understand this need and offer websites for a price affordable for your business so you can continue to succeed.</p> </div> </div> </div> <div class="col-md-4"> <div class="well"><div class="wells"><h2>Customer Support</h2> <img class="icon" border="0" src="http://cdn.flaticon.com/png/256/44357.png" width="100" height="100"> <p><br>The strong connection we have with our customers is key to find the best design for their website. Here at HypeTech someone is always available for a quick response to a question you might have. Customer satisfaction is very important to us and we make sure all of your needs are satisfied. Have a question now? Shoot us a message.</p> </div> </div> </div> </div></div> <div style="padding-top: 3%; padding-bottom: 10%;"class="container"><div class="row"> <div class="col-md-12"> <div class="well"> <div class="row"> <div class="col-lg-12"> <label for="inputType" class="col-lg-6 control-label"><p class="size">Get 10% off by subscribing to our email updates!</p></label> <div class="input-group"> <input id="inputType" type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Subscribe & Save!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </div> </div></div> </div> </div> <div class="footer"> <div class="container"> <a href="" class="text-muted">Privacy Policy</a><a class="text-muted"> | </a> <a href="" class="text-muted">Copyright</a><a class="text-muted"> | </a> <a href="" class="text-muted">Created by HypeTech</a> </div> </div>
/* Sticky footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; padding-top: 10px; text-align: right; border-top:1px solid #F5F5F5; background-color: #222222; } p.size { font-size: 15pt; } .icon:hover { -webkit-animation: bounce 1s; animation: bounce 1s; } .wells { text-align: center; } @font-face { font-family: myFirstFont; src: url('http://ytupload.net/bootsnipp/BlairMdITC-TT-Medium_7292.ttf'); } #HTFont { font-family: myFirstFont; } .carousel .item { width: 100%; /*slider width*/ max-height: 400px; /*slider height*/ } .carousel .item img { width: 100%; /*img width*/ } /*add some makeup*/ .carousel .carousel-control { background: none; border: none; top: 50%; } /*full width container*/ @media (max-width: 767px) { .block { margin-left: -20px; margin-right: -20px; } } .overlayLeft { position: absolute; top: 30%; left: 70px; width: 30%; height: 100%; z-index: 10; text-align: left; } .overlayRight { position: absolute; top: 30%; height: 100%; width: 30%; right: 70px; z-index: 10; text-align: right; } h1, h2, h3, h4, h5, h6 { font-family: 'Maven Pro', sans-serif; } p, div { font-family: 'Maven Pro', sans-serif; } body { margin: 0; background: url('http://subtlepatterns.com/patterns/black_linen_v2.png'); background-repeat:repeat; display: compact; }
$(document).ready(function(){ $('#myCarousel').carousel({interval: 3000}); });

Related: See More


Questions / Comments: