<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-light"data-toggle="modal" data-target="#toploginModal">Login</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"></div> <section class="aboutus py-5" id="aboutus"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <div class="card"> <div class=""> <h4 class="pl-3 py-2">Categories</h4> <ul class="list-unstyled"> <li><a href="dashboard.html" class="list-group-item bg-active"><i class="fa fa-tachometer"></i> Dashboard <span class="badge">12</span> </a></li> <li><a href="my-profile.html" class="list-group-item"><i class="fa fa-user"></i> My Profile</a> </li> <li><a href="my-listings.html" class="list-group-item"><i class="fa fa-list"></i> My Listings</a> </li> <li><a href="my-enquiry.html" class="list-group-item"><i class="fa fa-envelope"></i> My Enquiry</a> </li> <li><a href="add-business.html" class="list-group-item"><i class="fa fa-plus-square"></i> Add Business</a> </li> <li><a href="login.html" class="list-group-item"><i class="fa fa-key"></i> Login</a> </li> <li><a href="signup.html" class="list-group-item"><i class="fa fa-user-plus"></i> Signup</a> </li> <li><a href="account-settings.html" class="list-group-item"><i class="fa fa-wrench"></i> Account Settings</a> </li> <li><a href="change-password.html" class="list-group-item"><i class="fa fa-lock"></i> Change Password</a> </li> <li><a href="listings-page.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Listings Page</a> </li> <li><a href="product-page.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Product Page</a> </li> <li><a href="logout.html" class="list-group-item"><i class="fa fa-power-off"></i> Log Out</a> </li> </ul> </div> </div> </div> <div class="col-md-9"> <div class="card pb-5"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <h5>Free Responsive Mobile Website Templates (3147)</h5> <div class="pb-3"></div> </div> </div> <div class="row"> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/05/envy_boutique_Free17-01-2018_1395693613.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/01/campus_Free10-01-2018_434855747.jpg" alt=" "> <div class="card-body"> <h5>School</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/04/zoom_lab_Free22-02-2018_1592802516.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> </div> <div class="row mt-4"> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/05/envy_boutique_Free17-01-2018_1395693613.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/01/campus_Free10-01-2018_434855747.jpg" alt=" "> <div class="card-body"> <h5>School</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/04/zoom_lab_Free22-02-2018_1592802516.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> </div> <div class="row mt-4"> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/05/envy_boutique_Free17-01-2018_1395693613.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/01/campus_Free10-01-2018_434855747.jpg" alt=" "> <div class="card-body"> <h5>School</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/04/zoom_lab_Free22-02-2018_1592802516.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> </div> <div class="row mt-4"> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/05/envy_boutique_Free17-01-2018_1395693613.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/01/campus_Free10-01-2018_434855747.jpg" alt=" "> <div class="card-body"> <h5>School</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/04/zoom_lab_Free22-02-2018_1592802516.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> </div> <div class="row mt-4"> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/05/envy_boutique_Free17-01-2018_1395693613.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/01/campus_Free10-01-2018_434855747.jpg" alt=" "> <div class="card-body"> <h5>School</h5> </div> </div></a> </div> <div class="col-md-4"> <a href="#"> <div class="card text-center"> <img class="card-img-top" src="https://w3layouts.com/wp-content/uploads/2018/04/zoom_lab_Free22-02-2018_1592802516.jpg" alt=" "> <div class="card-body"> <h5>Catchy</h5> </div> </div></a> </div> </div> <div class="row mt-4"> <div class="col-md-12"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </section> <section class="footer bg-light py-5" id="footer"> <div class="container"> <div class="row"> <div class="col-md-3"> <h5>About Sarto</h5> <p>Person usually begins a job by becoming an employee, volunteering, or starting a business. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusant doloremque laudantium, totam rem aperiam eaque ipsa quae.</p> </div> <div class="col-md-3"> <h5>About Sarto</h5> <ul class="list-inline list-unstyled"> <li><a href="#"> Administrator</a></li> <li><a href="#"> Account</a></li> <li><a href="#"> Finance</a></li> <li><a href="#"> Developer</a></li> <li><a href="#"> Project Manager</a></li> <li><a href="#"> Art Director</a></li> <li><a href="#"> Animator</a></li> </ul> </div> <div class="col-md-3"> <h5>About Sarto</h5> <ul class="list-inline list-unstyled"> <li><a href="#"> Administrator</a></li> <li><a href="#"> Account</a></li> <li><a href="#"> Finance</a></li> <li><a href="#"> Developer</a></li> <li><a href="#"> Project Manager</a></li> <li><a href="#"> Art Director</a></li> <li><a href="#"> Animator</a></li> </ul> </div> <div class="col-md-3"> <h5>About Sarto</h5> <ul class="list-inline list-unstyled"> <li><a href="#"> Administrator</a></li> <li><a href="#"> Account</a></li> <li><a href="#"> Finance</a></li> <li><a href="#"> Developer</a></li> <li><a href="#"> Project Manager</a></li> <li><a href="#"> Art Director</a></li> <li><a href="#"> Animator</a></li> </ul> </div> </div> </div> </section> <section class="copyright border bg-dark text-white py-2" id="copyright"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <small>Sarto © 2018, All Rights Reserved, Design & Developed By: </small> </div> </div> </div> </section>

body {background:#;} .fa {margin-right:15px;} a {color:#696969;} a:hover {text-decoration: none;} img {width:100%;}