<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="#">How it works</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reference</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Employer</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> More </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Company</a> <a class="dropdown-item" href="#">Latest </a> <a class="dropdown-item" href="#">Popular </a> <a class="dropdown-item" href="#">Upcoming </a> <a class="dropdown-item" href="#">Offers </a> </div> </li> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search "> <button class="btn btn-success" type="submit"><i class="fa fa-search"></i> Search</button> </form> <button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal">Login</button> <button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal">Refer Me</button> </ul> </div> </div> </nav> <!--- Login Modal box ---> <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> <section class="banner bg-primary text-white py-5" id="banner"> <div class="container py-5 my-5"> <div class="row text-center"> <div class="col-md-12"> <h1>Lorem Ipsum copy in various charsets </h1> </div> </div> <div class="row mt-4"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-3"> <div class="form-group "> <select id="inputCategory" class="form-control" > <option selected>... Category ...</option> <option>Marketing</option> <option>Automotive</option> <option>Finance</option> <option>Education</option> <option>Executive</option> <option>HR</option> <option>Manager</option> <option>Supervisor</option> <option>Others</option> </select> </div> </div> <div class="col-md-3"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Location ...</option> <option>New Delhi</option> <option>Banglore</option> <option>Chennai</option> <option>Jaipur</option> </select> </div> </div> <div class="col-md-3"> <div class="form-group "> <select id="inputskills" class="form-control" > <option selected>... KeySkills ...</option> <option>Web Designer</option> <option>Web Developer</option> <option>Supervisor</option> <option>Manager</option> <option>HR</option> <option>Technical Analyst</option> <option>Service Desk</option> <option>Others</option> </select> </div> </div> <div class="col-md-3"> <button type="button" class="btn btn-dark btn-block">Search Now</button> </div> </div> </div> </div> </div> </div> </div> </section> <section class="info bg-secondary text-white py-2" id="info"> <div class="container"> <div class="row text-center"> <div class="col-md-8"> <p class="pt-2">Finds Jobs in San Francisco, Palo Alto, Mountain View, Sacramento, New York, United Kindom, Asia Pacific</p> </div> <div class="col-md-4"> <button type="button" class="btn btn-warning">Get More Details</button> </div> </div> </div> </section> <section class="option4 py-4" id="option4"> <div class="container py-5"> <div class="row text-center"> <div class="col-md-12"> <h2>FIND THE ONE THAT’S RIGHT FOR YOU. </h2> </div> </div> <div class="row mt-4 text-center"> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> </div> <div class="row mt-4 text-center"> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> <div class="col-md-3"> <a href="#"> <div class="card"> <div class="card-body"> <h5>Accounts</h5> <p>4 Open Vacancies</p> </div> </div></a> </div> </div> </div> </section> <section class="option1 py-4" id="option1"> <div class="container py-2"> <div class="row"> <div class="col-md-7"> <div class="pb-5"></div> <h2>MILLIONS OF OPTIONS. </h2> <h2>FIND THE ONE THAT’S RIGHT FOR YOU. </h2> <p>Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide. The right job is out there.</p> <button type="button" class="btn btn-warning">Get More Details</button> </div> <div class="col-md-5"> <img src="https://careerfy.net/demo/wp-content/uploads/parallex-thumb-1.png"alt=""> </div> </div> </div> </section> <section class="option3 bg-primary text-white py-4" id="option3"> <div class="container"> <div class="row text-center"> <div class="col-md-3"> <h1>123,012</h1> <p> Positions Matched </p> </div> <div class="col-md-3"> <h1>123,012</h1> <p> Positions Matched </p> </div> <div class="col-md-3"> <h1>123,012</h1> <p> Positions Matched </p> </div> <div class="col-md-3"> <h1>123,012</h1> <p> Positions Matched </p> </div> </div> </div> </section> <section class="option1 py-4" id="option1"> <div class="container py-2"> <div class="row"> <div class="col-md-7"> <div class="pb-5"></div> <h2>MILLIONS OF OPTIONS. </h2> <h2>FIND THE ONE THAT’S RIGHT FOR YOU. </h2> <p>Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide. The right job is out there.</p> <button type="button" class="btn btn-warning">Get More Details</button> </div> <div class="col-md-5"> <img src="https://careerfy.net/demo/wp-content/uploads/parallex-thumb-1.png"alt=""> </div> </div> </div> </section> <section class="cta bg-secondary text-white py-4" id="cta"> <div class="container"> <div class="row text-center"> <div class="col-md-8"> <h5 class="pt-2">Finds in San Francisco, Palo Alto, Mountain View, Asia Pacific</h5> </div> <div class="col-md-4"> <button type="button" class="btn btn-warning">Get More Details</button> </div> </div> </div> </section> <section class="footer bg-dark 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:#f2f2f2;} .footer a {color:#919191;} .footer {color:#919191;} .blue-hover:hover {background:#0588fc;color:#fff !important; } .blue-hover a:hover {background:#0588fc;color:#fff !important; text-decoration:none;}

<section class="popular py-5" id="popular"> <div class="container"> <div class="row"> <div class="col-md-12"> <h4> Popular Categories</h4> </div> </div> <div class="row text-center pt-3"> <div class="col-md-3"> <a href="#"><div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div></a> </div> <div class="col-md-3"> <a href="#"><div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div></a> </div> <div class="col-md-3"> <a href="#"><div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div></a> </div> <div class="col-md-3"> <a href="#"><div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div></a> </div> </div> <div class="row text-center pt-3"> <div class="col-md-3"> <div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div> </div> <div class="col-md-3"> <div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div> </div> <div class="col-md-3"> <div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div> </div> <div class="col-md-3"> <div class="card blue-hover"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> <i class="fa fa-angellist fa-2x"></i> <h5 class="py-2">Art & Multimedia</h5> <p>12356 Options</p> <small>Available in Design & Multimedia</small> </div> </div> </div> </div> </div> </section>