<div class="container-fluid d-flex justify-content-center padding">
<div class="col-md-6">
<div class="card">
<h5 class="card-title"><strong>Open</strong> positions</h5>
<div class="media-list media-list-hover media-list-divided"> <a class="media" href="#" data-abc="true"> <img class="w-60px" src="https://img.icons8.com/color/60/000000/google-logo.png" alt="...">
<div class="media-body">
<h5>Senior front-end developer</h5> <small class="text-fader"><i class="fa fa-map-marker pr-1"></i> Menlo Park, CA</small>
</div> <span class="media-right text-fade">12 days left</span>
</a> <a class="media media-single" href="#" data-abc="true"> <img class="w-60px" src="https://img.icons8.com/color/60/000000/linkedin.png" alt="...">
<div class="media-body">
<h5>Software Engineer (Entry or Senior)</h5> <small class="text-fader"><i class="fa fa-map-marker pr-1"></i> Livermore, CA</small>
</div> <span class="media-right text-fade">34 days left</span>
</a> <a class="media media-single" href="#" data-abc="true"> <img class="w-60px" src="https://img.icons8.com/color/60/000000/dell.png" alt="...">
<div class="media-body">
<h5>Full Stack Web Developer</h5> <small class="text-fader"><i class="fa fa-map-marker pr-1"></i> San Francisco, CA</small>
</div> <span class="media-right text-fade">21 days left</span>
</a> <a class="media media-single" href="#" data-abc="true"> <img class="w-60px" src="https://img.icons8.com/color/60/000000/facebook-new.png" alt="...">
<div class="media-body">
<h5>Web Application Developer</h5> <small class="text-fader"><i class="fa fa-map-marker pr-1"></i> Lexinton, MA</small>
</div> <span class="media-right text-fade">13 days left</span>
</a> </div>
<div class="text-center bt-1 border-light p-2"> <a class="text-default text-uppercase d-block fs-10 fw-500 ls-1" href="#" data-abc="true">See all positions</a> </div>
</div>
</div>
</div>
body {
background-color: #000
}
.padding {
padding: 5rem !important
}
.card {
border: 0;
border-radius: 0px;
margin-bottom: 30px;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
-webkit-transition: .5s;
transition: .5s
}
.card-title {
font-family: Roboto, sans-serif;
font-weight: 300;
line-height: 1.5;
margin-bottom: 0;
padding: 15px 20px;
border-bottom: 1px solid rgba(77, 82, 89, 0.07)
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}
.card-header {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
padding: 15px 20px;
background-color: transparent;
border-bottom: 1px solid rgba(77, 82, 89, 0.07)
}
.card-header .card-title {
padding: 0;
border: none
}
h5.card-title {
font-size: 15px
}
.media-list-divided>.media:not(.media-list-header):not(.media-list-footer),
.media-list-divided .media-list-body>.media {
border-bottom: 1px solid rgba(77, 82, 89, 0.07)
}
.w-60px {
width: 60px !important
}
.media>* {
margin: 0 8px
}
.media-body {
flex: 1
}
.media {
padding: 16px 12px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear
}
.media-list-hover>.media:not(.media-list-header):not(.media-list-footer):hover,
.media-list-hover .media-list-body>.media:hover {
background-color: #f9fafb
}
h5 {
font-size: 16px;
font-weight: 400
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
small,
span {
font-family: Roboto, sans-serif;
font-weight: 300;
color: #313944;
line-height: 1.5;
letter-spacing: .5px
}
a {
text-decoration: none !important
}
.p-2 {
padding: .9rem !important
}
.fs-10 {
font-size: 10px !important
}