"fixed navbar one page template"
Bootstrap 3.3.0 Snippet by martinfrancisco

<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 ----------> <!DOCTYPE html> <head> <title>Learning Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body { background: url(assets/bglight.png); } .hero-unit { background-color: #fff; } .center { display: block; margin: 0 auto; } </style> </head> <body> <div class="wrapper"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <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 text-uppercase" href="#">Grey Campus <span class="label label-success text-capitalize">Free</span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">About</a></li> <li><a href="#">Features</a></li> <li><button type="button" class="btn btn-success navbar-btn btn-circle">Sign in</button></li> </ul> </div> </div> </nav> <header class="header"> <div class="container"> <div class="row"> <div class="col-md-5 col-md-offset-1"> <div class="content"> <div class="pull-middle"> <h1 class="page-header">Download our Free App To Be In Contact With Us!!</h1> <p class="lead">Grey Campus.</p> <div class="panel panel-default"> <div class="panel-body"> <form action="#" role="form"> <div class="input-group"> <input type="email" class="form-control" placeholder="Email Address" required> <span class="input-group-btn"> <button class="btn btn-success btn-circle" type="submit">Sign up for free</button> </span> </div> </form> </div> </div> </div> </div> </div> <div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100"> <div class="phone"> <img class="img-responsive img-rounded" src="https://pbs.twimg.com/media/B5xxPZ1CAAAKmVO.png:large"> </div> </div> </div> </div> </header> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100"> <div class="phone"> <img class="img-responsive img-rounded" src="https://pbs.twimg.com/media/B5xxPZ1CAAAKmVO.png:large"> </div> </div> <div class="col-md-5 col-md-offset-1"> <div class="content"> <div class="pull-middle"> <h2 class="h1 page-header">Discover more about features.</h2> <ul class="media-list"> <li class="media"> <a class="media-left" href="#"> <span class="glyphicon glyphicon-cloud icon text-success"></span> </a> <div class="media-body"> <h3 class="media-heading">Praesent porttitor urna ut enim.</h3> <p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p> </div> </li> <li class="media"> <a class="media-left" href="#"> <span class="glyphicon glyphicon-lock icon text-success"></span> </a> <div class="media-body"> <h3 class="media-heading">Cras consequat est et elit.</h3> <p>Integer suscipit massa at tellus semper, at aliquam ante bibendum.</p> </div> </li> <li class="media"> <a class="media-left" href="#"> <span class="glyphicon glyphicon-user icon text-success"></span> </a> <div class="media-body"> <h3 class="media-heading">Aenean vel enim quis dui blandit.</h3> <p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-3 text-right"> <div class="content"> <div class="pull-middle"> <h4><strong>Describe your product.</strong></h4> <p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p> <small>Phasellus feugiat at lorem a tincidunt. Nam hendrerit leo vitae orci pellentesque, nec euismod dolor condimentum.</small> </div> </div> </div> <div class="col-md-4 col-md-offset-1 mt-100 mb-100"> <div class="phone"> <img class="img-responsive img-rounded" src="https://pbs.twimg.com/media/B5xxPZ1CAAAKmVO.png:large"> </div> </div> <div class="col-md-3 col-md-offset-1"> <div class="content"> <div class="pull-middle"> <h4><strong>Even more stuff.</strong></h4> <p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p> <a class="btn btn-success btn-circle" href="#">Sign up for free</a> </div> </div> </div> </div> </div> </section> <footer class="footer text-center"> <div class="container"> <small>© Copyright 2015. Crafted with love by <a href="https://www.twitter.com/maridlcrmn">@maridlcrmn</a></small> </div> </footer> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="../../assets/js/vendor/holder.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </html>
.container1 { background-color: yellowgreen; } .jumbotron { position: relative; padding: 40px 0; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); background: #020031; background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); background: linear-gradient(45deg, #020031 0%,#6d3353 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); } /* .jumbotron::after { content: ''; display: block; position: relative; /* changed by me */ top: 0; right: 0; bottom: 0; left: 0; background: url(../img/bs-docs-masthead-pattern.png) repeat center center; opacity: .4; } .jumbotron { margin-bottom: 0px; background-image: src(images/screenshot.png); background-position: 0% 25%; background-size: cover; background-repeat: no-repeat; color: white; text-shadow: black 0.3em 0.3em 0.3em; } .profile-img-card { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .btn-signin { /*background-color: #4d90fe; */ background-color: #ff6600; /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/ padding: 0px; font-weight: 700; font-size: 14px; height: 36px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none; -o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; } .card-container.card { width: 350px; padding: 40px 40px; } body, html { height: 100%; background-repeat: no-repeat; background-image: linear-gradient(rgb(255, 230, 209), rgb(146, 164, 133)); } .card { background-color: #F7F7F7; /* just in case there no content*/ padding: 20px 25px 30px; margin: 0 auto 25px; margin-top: 50px; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .card-container.card { width: 350px; padding: 40px 40px; } /* Free App template for Bootstrap 3 Code snippet by maridlcrmn for Bootsnipp.com Follow me on Twitter @maridlcrmn Image credits: unsplash.com Image placeholders: placemi.com */ .mt-100 { margin-top: 100px; } .mb-100 { margin-bottom: 100px; } .icon { width: 32px; height: 32px; text-align: center; padding: 7px 8px; border: 2px solid; border-radius: 50%; } .header { padding-top: 50px; background-color: #eee; overflow: hidden; } .footer { color: #887; background-color: #eee; padding-top: 30px; padding-bottom: 30px; } .content { position: relative; display: table; width: 100%; min-height: 100vh; } .pull-middle { display: table-cell; vertical-align: middle; } .btn { padding-left: 25px; padding-right: 25px; } .btn-circle { border-radius: 20px; } .input-group input { border: 0; box-shadow: none; padding-right: 30px; } .input-group input:focus, .input-group input:active { outline: 0; box-shadow: none; } .input-group-btn:last-child>.btn { z-index: 2; margin-left: -18px; border-radius: 20px; } .phone { position: relative; max-width: 276px; margin: 80px auto; padding: 45px 9px 68px; border: 2px solid #ddd; border-radius: 20px; background-color: #222; box-shadow: 20px 20px 40px #887; }

Related: See More


Questions / Comments: