<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm bg-light navbar-light border fixed-top"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:70px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Categories</a> </li> <li class="nav-item"> <a class="nav-link" href="#">License</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Support</a> </li> <button type="button" class="btn btn-light">Contact Us</button> <button type="button" class="btn btn-success"data-toggle="modal" data-target="#toploginModal"><i class="fa fa-plus"></i> Submit your site</button> </ul> </div> </div> </nav> <div class="modal fade" id="toploginModal" tabindex="-1" role="dialog" aria-labelledby="toploginModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-primary text-white"> <h5 class="modal-title" id="toploginModalLabel">Login</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <input id="email" name="email" placeholder="Email" class="form-control" required="required" type="text"> </div> <div class="form-group"> <input id="password" name="password" placeholder="password" class="form-control" type="text"> </div> <div class="form-group"> <button name="submit" type="submit" class="btn btn-primary">Login</button> <button type="button" class="btn btn-link">Forgot Password?</button> </div> </form> </div> <div class="modal-footer"> <small>New to Refers ?<a href="#">Register here</a></small> </div> </div> </div> </div> <div class="mt-5 pt-3"></div> <section class="main-content pt-4" id="main-content"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-12"> <h5>Shards: A modern UI toolkit based on Bootstrap 4</h5> </div> <div class="col-md-12 mt-3"> <img src="https://cdn.freebiesbug.com/wp-content/uploads/2017/12/shards-580x435.png"alt=""> </div> <div class="col-md-12 mt-3"> <p>Shards is a free and modern design system based on the popular Bootstrap 4 framework. It is basically a UI toolkit including responsive components and icons from both Material and Font Awesome packs. Shards is built with performance in mind having a small footprint and weighting (it’s ~12kb minified and gzipped). Download includes the original Sketch and SCSS files so you can get your hands dirty, create new layouts or even customise and recompile the kit to your needs.</p> </div> <div class="col-md-12 mt-3"> <small>Posted on December 11, 2017 in Sketch freebies, Code stuff, HTML UI Kits and tagged ui, bootstrap, frameworks, sketch. This post has been viewed 8846 times.</small> </div> <div class="col-md-12 mt-3"> <button type="button" class="btn btn-outline-secondary">Share on Facebook</button> <button type="button" class="btn btn-outline-secondary">Twitter</button> <button type="button" class="btn btn-outline-secondary">Google Plus</button> </div> <div class="col-md-6 offset-md-3 text-center mt-5 py-5"> <h3>Subscribe</h3> <form> <div class="form-row"> <div class="form-group"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Enter Email-ID" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-outline-success" type="button">Subscribe</button> </div> </div> </div> </div> </form> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <img src="https://moatsearch-data.s3.amazonaws.com/creative_screens/66/65/7d/66657df86edf95f2da94bde3c7fbd1dc.jpg "alt="#"> </div> </div> </div> </div> </div> </div> </div> </section> <div class="footer py-5 border mt-5 "> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 footer-one"> <img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:80px;"> <p class="pt-4">Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="social-icons"> <a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a> <a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a> <a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 footer-two"> <h5>Information </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 footer-three"> <h5>Helpful Links </h5> <ul class="list-unstyled"> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 footer-four"> <h5>Helpful Links </h5> <ul class="list-unstyled "> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> </div> </div> </div> <div class="copyright bglight1 border pt-2"> <div class="container"> <div class="row justify-content-md-center"> <p> © 2018 xyz Software Pvt. Ltd. </p> </div> </div> </div>

.banner { background: lightblue url("http://demo.spoonthemes.net/themes/adifier/wp-content/uploads/2018/02/bg-blue.jpg;") no-repeat fixed center; } img {width:100%;} .no-margin{margin:0px;padding:0px;} .footer a {color:#696969;}