Html and css
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/d1c2ea8b80.js" crossorigin="anonymous"></script>
Workforce Gateway
<div class="container mt-4">
<div class="row">
<div class="col-md-3">
<div class="card mb-4">
<div class="card-body text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
</svg>
<h5 class="card-title-heading">Punith BS</h5>
<p class="card-text">Senior UX Lead</p>
<a href="#" class="btn btn-orange btn-block">Complete My Profile</a>
</div>
</div>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Overview</a>
<a class="nav-link" href="#">Applied Jobs</a>
<a class="nav-link" href="#">Saved Jobs</a>
</nav>
</div>
<div class="col-md-9">
<div class="row mb-4">
<div class="col-md-3">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title ">18</h5>
<p class="">Applied Jobs</p>
<p class="card-text">view all applied jobs</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">21</h5>
<p class="">Saved Jobs</p>
<p class="card-text">view all applied jobs</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">05</h5>
<p class="">Profile View</p>
<p class="card-text">view all applied jobs</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">30</h5>
<p class="">Recommended</p>
<p class="card-text">view all applied jobs</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title-search">Search Jobs</h5>
<form class="form-inline">
<input type="text" class="form-control mr-2" placeholder="Enter Keyword / Designation">
<input type="text" class="form-control mr-2" placeholder="Experience">
<input type="text" class="form-control mr-2" placeholder="Location">
<button type="submit" class="btn btn-orange">Search</button>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title-jobs">Recent Jobs</h5>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Senior Automation Lead</h5>
<small>03 Days Ago</small>
</div>
<p class="mb-1">Test Yantra</p>
<small><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />
</svg>5 - 9 Years <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-euro" viewBox="0 0 16 16">
<path d="M4 9.42h1.063C5.4 12.323 7.317 14 10.34 14c.622 0 1.167-.068 1.659-.185v-1.3c-.484.119-1.045.17-1.659.17-2.1 0-3.455-1.198-3.775-3.264h4.017v-.928H6.497v-.936q-.002-.165.008-.329h4.078v-.927H6.618c.388-1.898 1.719-2.985 3.723-2.985.614 0 1.175.05 1.659.177V2.194A6.6 6.6 0 0 0 10.341 2c-2.928 0-4.82 1.569-5.244 4.3H4v.928h1.01v1.265H4v.928z" />
</svg> 70***** / Week <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10" />
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
</svg> London, United Kingdom</small>
<p>Should have created a Framework Individually from Scratch and must written an Test Scripts</p>
<p>Mobile Automation Testing | Appium | Automation Framework | Testing IOS</p>
<button type="button" class="btn btn-light btn-sm float-right">Save</button>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title-jobs">Recent Jobs</h5>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Test Automation Architect</h5>
<small>03 Days Ago</small>
</div>
<p class="mb-1">Moolya Software Testing</p>
<small><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />
</svg>15 - 16 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-euro" viewBox="0 0 16 16">
<path d="M4 9.42h1.063C5.4 12.323 7.317 14 10.34 14c.622 0 1.167-.068 1.659-.185v-1.3c-.484.119-1.045.17-1.659.17-2.1 0-3.455-1.198-3.775-3.264h4.017v-.928H6.497v-.936q-.002-.165.008-.329h4.078v-.927H6.618c.388-1.898 1.719-2.985 3.723-2.985.614 0 1.175.05 1.659.177V2.194A6.6 6.6 0 0 0 10.341 2c-2.928 0-4.82 1.569-5.244 4.3H4v.928h1.01v1.265H4v.928z" />
</svg> 70*****/Week <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10" />
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
</svg> London,United Kingdom</small>
<p>Should have created a Framework Individually from Scratch and must written an Test Scripts</p>
<p>Mobile Automation Testing | Appium | Automation Framework | Testing IOS</p>
<button type="button" class="btn btn-light btn-sm float-right">Save</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>