<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 */
