19'C 흐림
서울 강남구
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js
https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css
<div class="container mt-5 mb-3">
<div class="row">
<div class="col-md-4">
<div class="card p-3 mb-2">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div class="icon"> <i class="bx bxl-mailchimp"></i> </div>
<div class="ms-2 c-details">
<h6 class="mb-0">Mailchimp</h6> <span>1 days ago</span>
</div>
</div>
<div class="badge"> <span>Design</span> </div>
</div>
<div class="mt-5">
<h3 class="heading">Senior Product<br>Designer-Singapore</h3>
<div class="mt-5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mt-3"> <span class="text1">32 Applied <span class="text2">of 50 capacity</span></span> </div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-3 mb-2">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div class="icon"> <i class="bx bxl-dribbble"></i> </div>
<div class="ms-2 c-details">
<h6 class="mb-0">Dribbble</h6> <span>4 days ago</span>
</div>
</div>
<div class="badge"> <span>Product</span> </div>
</div>
<div class="mt-5">
<h3 class="heading">Junior Product<br>Designer-Singapore</h3>
<div class="mt-5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mt-3"> <span class="text1">42 Applied <span class="text2">of 70 capacity</span></span> </div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-3 mb-2">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div class="icon"> <i class="bx bxl-reddit"></i> </div>
<div class="ms-2 c-details">
<h6 class="mb-0">Reddit</h6> <span>2 days ago</span>
</div>
</div>
<div class="badge"> <span>Design</span> </div>
</div>
<div class="mt-5">
<h3 class="heading">Software Architect <br>Java - USA</h3>
<div class="mt-5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mt-3"> <span class="text1">52 Applied <span class="text2">of 100 capacity</span></span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #eee
}
.card {
border: none;
border-radius: 10px
}
.c-details span {
font-weight: 300;
font-size: 13px
}
.icon {
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 39px
}
.badge span {
background-color: #fffbec;
width: 60px;
height: 25px;
padding-bottom: 3px;
border-radius: 5px;
display: flex;
color: #fed85d;
justify-content: center;
align-items: center
}
.progress {
height: 10px;
border-radius: 10px
}
.progress div {
background-color: red
}
.text1 {
font-size: 14px;
font-weight: 600
}
.text2 {
color: #a5aec0
}