"Simpal Web Page"
Bootstrap 3.3.0 Snippet by Walia5

Post to Facebook Tweet this

<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <section class="navhead"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation </span> <span class="icon-bar"> </span> <span class="icon-bar"> </span> <span class="icon-bar"> </span> </button> <div class="imgsize"> <a href="#"> <img src="https://vignette.wikia.nocookie.net/nationstates/images/2/29/WS_Logo.png/revision/latest?cb=20080507063620"> </a> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">Home </a> </li> <li> <a href="#">About Us </a> </li> <li> <a href="#">Terms </a> </li> <li> <a href="#">Privacy </a> </li> <li> <a href="#">Contact Us </a> </li> </ul> </div> </div> </nav> </section> <section id="home"> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="front"> <h1>Simpal Web Page </h1> </div> </div> <div class="col-md-6"> </div> </div> </div> </section> <section id="contact"> <div class="container"> <div class="row text-center"> <div class="col-md-6 col-md-offset-3"> <h2 style="color: #101010; font-weight: normal;">Contact Us </h2> <p style="text-align: center; color: #b1b1b1;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> </div> <div class="row text-center"> <div class="col-md-6 col-md-offset-3"> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Name*"> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email*"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Phone Number*"> </div> <div class="form-group"> <textarea class="form-control" placeholder="Note*"> </textarea> </div> <div class="form-group"> <a href="#"> <button type="btn" class="btn-submit">Submit </button> </a> </div> </form> </div> </div> </div> </section> <section id="last"> <div class="container"> <div class="row text-center"> <div class="col-md-6 col-md-offset-3"> <div class="social"> <a href="#" class="cn"> <i class="fasocial fa-facebook" aria-hidden="true"> </i> </a> <a href="#" class="cn"> <i class="fasocial fa-linkedin" aria-hidden="true"> </i> </a> <a href="#" class="cn"> <i class="fasocial fa-instagram" aria-hidden="true"> </i> </a> <a href="#" class="cn"> <i class="fasocial fa-youtube" aria-hidden="true"> </i> </a> </div> <p style="color: white; margin-top: 20px; margin-bottom: 20px;">Copyright © 2017 WaLia Software Solutions, LLC </p> </div> </div> </section>
.imgsize img { width: 20%; margin-top: 5px; } .navbar-inverse { border-color: #101010; background-color: #101010; } #home { height: 100vh; margin-top: 50px; background-size: cover; background-repeat: no-repeat; background-image: url("http://192.241.175.50/videos/london.jpg"); } .front h1 { color: white; font-size: 60px; text-align: left; margin-top: 200px; font-family: Gabriola; } .play img { width: 70%; margin-top: 10px; } .ios img{ width: 70%; float: left; margin-top: 10px; margin-left: -55px; } #contact { background-color:#f6f6f6; } .btn-submit { float: left; color: white; padding: 6px 20px; border: 1px solid #101010; border-radius: 4px; background-color: #101010; margin-bottom: 20px; } #last{ background-color: #101010; } .social i { max-width: 20px; margin-top: 20px; margin-right: 20px; } .social a:hover { text-decoration: none !important; } .fasocial { color: white; font-size: inherit; text-rendering: auto; display: inline-block; font-size: 25px !important; font: normal normal normal 14px/1 FontAwesome; }

Related: See More

Paper Dashboard Angular
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: