"Jobs search page"
Bootstrap 4.1.1 Snippet by MMLTech

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Responsive car dealership details cards</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css"/> </head> <body> <section id="FormSection"> <div class="container"> <div class="d-flex justify-content-center"> <div class="d-flex form-area"> <div class="inside d-flex"> <div class="form-group mr-md-3 mr-0 mb-md-0 mb-3"> <input class="form-control" aria-label="" placeholder="Skills, company, tag" /> </div> <div class="form-group mr-md-3 mr-0 mb-md-0 mb-3"> <select class="form-control" aria-label=""> <option>All Categories</option> <option>Front end developer</option> <option>Back end developer</option> </select> </div> <div class="form-group mr-md-3 mr-0 mb-md-0 mb-3"> <select class="form-control" aria-label=""> <option>All locations</option> </select> </div> <div class="form-group mb-0"> <button class="btn btn-search"><i class="fas fa-search"></i> Search</button> </div> </div> </div> </div> </div> </section> <section id="CardsSection"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-code fa-3x mb-3"></i> <h5>Software Development</h5> <p class="small mb-0">15 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-user-shield fa-3x mb-3"></i> <h5>Quality Assurance (QA)</h5> <p class="small mb-0">5 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-database fa-3x mb-3"></i> <h5>Data Science</h5> <p class="small mb-0">5 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-swatchbook fa-3x mb-3"></i> <h5>Design</h5> <p class="small mb-0">5 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-briefcase fa-3x mb-3"></i> <h5>Product Management</h5> <p class="small mb-0">0 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-percent fa-3x mb-3"></i> <h5>Marketing & Sales</h5> <p class="small mb-0">0 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-network-wired fa-3x mb-3"></i> <h5>Network Administration</h5> <p class="small mb-0">0 Jobs</p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6 col-12 mb-3"> <a href="#"> <div class="card"> <div class="card-body"> <div class="d-flex flex-column align-items-center"> <i class="fas fa-wifi fa-3x mb-3"></i> <h5>Other</h5> <p class="small mb-0">0 Jobs</p> </div> </div> </div> </a> </div> </div> </div> </section> <section id="ResultsSection"> <div class="container"> <div class="row"> <div class="col-12 mb-4"> <h3>Latest Jobs</h3> </div> <div class="col-12"> <div class="card job-listings-item"> <div class="card-body"> <div class="row d-flex flex-md-row flex-column align-items-center"> <div class="job-main-info col-lg-10"> <div class="job-main-group d-flex align-items-center"> <div class="job-employer-logo mr-md-3 mr-0"> <img src="https://plhold.com/img/52.webp" alt=""> </div> <div class="job-details-group "> <div class="job-details"> <h3>Cloud Software Engineer (GCP)</h3> <ul class="job-details-content"> <li><i class="fas fa-calendar"></i> Full-time</li> <li><i class="fas fa-map-marker-alt"></i> Remote</li> <li><i class="fas fa-dollar-sign"></i> 300,000 / year</li> </ul> </div> <div class="job-tags"> <a href="#" class="job-tag"> Software Development </a> <a href="#" class="job-tag"> Engineering </a> <a href="#" class="job-tag"> Cloud Software </a> <a href="#" class="job-tag"> Cloud Data Warehouse </a> </div> </div> </div> </div> <div class="job-meta-info col-lg-2"> <div class="job-posted-date"> <i class="far fa-clock mr-3"></i> 5h ago </div> <a href="#" target="_blank" rel="nofollow noopener" class="btn"><i class="fas fa-file-signature"></i> Apply</a> </div> </div> </div> </div> <div class="card job-listings-item"> <div class="card-body"> <div class="row d-flex flex-md-row flex-column align-items-center"> <div class="job-main-info col-lg-10"> <div class="job-main-group d-flex align-items-center"> <div class="job-employer-logo mr-md-3 mr-0"> <img src="https://plhold.com/img/52.webp" alt=""> </div> <div class="job-details-group "> <div class="job-details"> <h3>Cloud Software Engineer (GCP)</h3> <ul class="job-details-content"> <li><i class="fas fa-calendar"></i> Full-time</li> <li><i class="fas fa-map-marker-alt"></i> Remote</li> <li><i class="fas fa-dollar-sign"></i> 300,000 / year</li> </ul> </div> <div class="job-tags"> <a href="#" class="job-tag"> Software Development </a> <a href="#" class="job-tag"> Engineering </a> <a href="#" class="job-tag"> Cloud Software </a> <a href="#" class="job-tag"> Cloud Data Warehouse </a> </div> </div> </div> </div> <div class="job-meta-info col-lg-2"> <div class="job-posted-date"> <i class="far fa-clock mr-3"></i> 5h ago </div> <a href="#" target="_blank" rel="nofollow noopener" class="btn"><i class="fas fa-file-signature"></i> Apply</a> </div> </div> </div> </div> <div class="card job-listings-item"> <div class="card-body"> <div class="row d-flex flex-md-row flex-column align-items-center"> <div class="job-main-info col-lg-10"> <div class="job-main-group d-flex align-items-center"> <div class="job-employer-logo mr-md-3 mr-0"> <img src="https://plhold.com/img/52.webp" alt=""> </div> <div class="job-details-group "> <div class="job-details"> <h3>Cloud Software Engineer (GCP)</h3> <ul class="job-details-content"> <li><i class="fas fa-calendar"></i> Full-time</li> <li><i class="fas fa-map-marker-alt"></i> Remote</li> <li><i class="fas fa-dollar-sign"></i> 300,000 / year</li> </ul> </div> <div class="job-tags"> <a href="#" class="job-tag"> Software Development </a> <a href="#" class="job-tag"> Engineering </a> <a href="#" class="job-tag"> Cloud Software </a> <a href="#" class="job-tag"> Cloud Data Warehouse </a> </div> </div> </div> </div> <div class="job-meta-info col-lg-2"> <div class="job-posted-date"> <i class="far fa-clock mr-3"></i> 5h ago </div> <a href="#" target="_blank" rel="nofollow noopener" class="btn"><i class="fas fa-file-signature"></i> Apply</a> </div> </div> </div> </div> <div class="card job-listings-item"> <div class="card-body"> <div class="row d-flex flex-md-row flex-column align-items-center"> <div class="job-main-info col-lg-10"> <div class="job-main-group d-flex align-items-center"> <div class="job-employer-logo mr-md-3 mr-0"> <img src="https://plhold.com/img/52.webp" alt=""> </div> <div class="job-details-group "> <div class="job-details"> <h3>Cloud Software Engineer (GCP)</h3> <ul class="job-details-content"> <li><i class="fas fa-calendar"></i> Full-time</li> <li><i class="fas fa-map-marker-alt"></i> Remote</li> <li><i class="fas fa-dollar-sign"></i> 300,000 / year</li> </ul> </div> <div class="job-tags"> <a href="#" class="job-tag"> Software Development </a> <a href="#" class="job-tag"> Engineering </a> <a href="#" class="job-tag"> Cloud Software </a> <a href="#" class="job-tag"> Cloud Data Warehouse </a> </div> </div> </div> </div> <div class="job-meta-info col-lg-2"> <div class="job-posted-date"> <i class="far fa-clock mr-3"></i> 5h ago </div> <a href="#" target="_blank" rel="nofollow noopener" class="btn"><i class="fas fa-file-signature"></i> Apply</a> </div> </div> </div> </div> <div class="card job-listings-item"> <div class="card-body"> <div class="row d-flex flex-md-row flex-column align-items-center"> <div class="job-main-info col-lg-10"> <div class="job-main-group d-flex align-items-center"> <div class="job-employer-logo mr-md-3 mr-0"> <img src="https://plhold.com/img/52.webp" alt=""> </div> <div class="job-details-group "> <div class="job-details"> <h3>Cloud Software Engineer (GCP)</h3> <ul class="job-details-content"> <li><i class="fas fa-calendar"></i> Full-time</li> <li><i class="fas fa-map-marker-alt"></i> Remote</li> <li><i class="fas fa-dollar-sign"></i> 300,000 / year</li> </ul> </div> <div class="job-tags"> <a href="#" class="job-tag"> Software Development </a> <a href="#" class="job-tag"> Engineering </a> <a href="#" class="job-tag"> Cloud Software </a> <a href="#" class="job-tag"> Cloud Data Warehouse </a> </div> </div> </div> </div> <div class="job-meta-info col-lg-2"> <div class="job-posted-date"> <i class="far fa-clock mr-3"></i> 5h ago </div> <a href="#" target="_blank" rel="nofollow noopener" class="btn"><i class="fas fa-file-signature"></i> Apply</a> </div> </div> </div> </div> <div class="card job-listings-item"> <div class="card-body"> <div class="row d-flex flex-md-row flex-column align-items-center"> <div class="job-main-info col-lg-10"> <div class="job-main-group d-flex align-items-center"> <div class="job-employer-logo mr-md-3 mr-0"> <img src="https://plhold.com/img/52.webp" alt=""> </div> <div class="job-details-group "> <div class="job-details"> <h3>Cloud Software Engineer (GCP)</h3> <ul class="job-details-content"> <li><i class="fas fa-calendar"></i> Full-time</li> <li><i class="fas fa-map-marker-alt"></i> Remote</li> <li><i class="fas fa-dollar-sign"></i> 300,000 / year</li> </ul> </div> <div class="job-tags"> <a href="#" class="job-tag"> Software Development </a> <a href="#" class="job-tag"> Engineering </a> <a href="#" class="job-tag"> Cloud Software </a> <a href="#" class="job-tag"> Cloud Data Warehouse </a> </div> </div> </div> </div> <div class="job-meta-info col-lg-2"> <div class="job-posted-date"> <i class="far fa-clock mr-3"></i> 5h ago </div> <a href="#" target="_blank" rel="nofollow noopener" class="btn"><i class="fas fa-file-signature"></i> Apply</a> </div> </div> </div> </div> <div class="d-flex justify-content-center mt-5"> <nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </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" aria-disabled="true">...</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> </div> </div> </div> </section> </body> <div style="position: fixed;bottom: 5%;right: 5%;padding: 1rem;background: #fff;border: 1px solid #e9ecef;border-radius: 0.35rem;color: #a9aeb3;box-shadow: 0 0 20px #e9ecef;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </html>
body { background-color: #F6F9FC; } #FormSection { background: url(https://images.pexels.com/photos/683940/pexels-photo-683940.jpeg) no-repeat; background-size: cover; background-position: center center; padding-top: 150px; padding-bottom: 150px; } #FormSection .form-area { border: 15px solid rgba(255, 255, 255, 0.4); border-radius: 0.55rem; } #FormSection .form-area .inside { padding: 2rem 1rem; background: #fff; } #FormSection .form-area button { background: #250443; background: linear-gradient(90deg, #250443 0%, #430979 35%, #ff00fe 100%); color: #fff; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #FormSection .form-area button:hover { background: #400773; background: linear-gradient(90deg, #400773 0%, #660eb8 35%, #ff00fe 100%); } #CardsSection { padding: 75px 0; } #CardsSection a { text-decoration: none; } #CardsSection a .card { border-radius: 1rem; border: 1px solid #e9ecef; box-shadow: 0 0 10px #e9ecef; cursor: pointer; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #CardsSection a .card:hover { box-shadow: 0 0 20px #dae0e5; } #CardsSection a .card:hover i { color: #250443; } #CardsSection a .card i { color: #6c757d; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #CardsSection a .card h5 { color: #344767; font-size: 1rem; } #CardsSection a .card p { color: #86919b; } #ResultsSection .card { border-radius: 1rem; border: 1px solid #e9ecef; box-shadow: 0 0 10px #e9ecef; cursor: pointer; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #ResultsSection .card:not(:last-child) { margin-bottom: 2rem; } #ResultsSection .card.job-listings-item .job-employer-logo img { border-radius: 8px; max-width: 100%; width: 56px; max-height: 80px; } #ResultsSection .card.job-listings-item .job-details-group .job-tags a { display: inline-block; border: 1px solid #dee2e6; padding: 0.25rem 0.55rem; border-radius: 0.55rem; color: #343a40; text-decoration: none; } #ResultsSection .card.job-listings-item .job-details-group .job-tags a:not(:last-child) { margin-right: 1rem; } #ResultsSection .card.job-listings-item .job-details-group .job-details .job-details-content { list-style-type: none; margin: 0; margin-bottom: 1rem; padding: 0; display: flex; align-items: center; } #ResultsSection .card.job-listings-item .job-details-group .job-details .job-details-content li:not(:last-child) { margin-right: 1rem; } #ResultsSection .card .btn { display: none; background: #250443; background: linear-gradient(90deg, #250443 0%, #430979 35%, #ff00fe 100%); color: #fff; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #ResultsSection .card .btn:hover { background: #400773; background: linear-gradient(90deg, #400773 0%, #660eb8 35%, #ff00fe 100%); } #ResultsSection .card:hover { box-shadow: 0 0 20px #dae0e5; } #ResultsSection .card:hover .job-posted-date { display: none; } #ResultsSection .card:hover .btn { display: initial; } /*# sourceMappingURL=style.css.map */

Related: See More


Questions / Comments: