Bootstrap Projects Section - Asteria Dashboard
Discover 2 Bootstrap Projects Section available in Asteria Dashboard
Section Projects Cards
Component from
Asteria Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1553640582-f9d3a73acb6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU2fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Lucas Prila</h6>
<p class="text-xs"><b>Fixed price</b> - posted 2h ago</p>
</div>
</div>
<div class="col-4">
<span class="badge bg-gradient-info ms-auto float-end">NEW</span>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Ruby developer needed.</h6>
<p class="text-sm">The website was initially built in PHP, I need a professional ruby programmer to shift it.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>3,000<span class="text-secondary text-sm ms-1">/ month </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1561828970-daff2303fe58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Miriam Jhonson</h6>
<p class="text-xs"><b>Hourly</b> - posted 3h ago</p>
</div>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Website redesign needed.</h6>
<p class="text-sm">We would like a progressive designer to create website designs for our new corporate website.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>24,5<span class="text-secondary text-sm ms-1">/ hour </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1630594384259-aa5b88fb4a2a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjIyfHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Andrew Michael</h6>
<p class="text-xs"><b>Hourly</b> - posted 4h ago</p>
</div>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Looking for a Three.js Developer.</h6>
<p class="text-sm">I'm looking for an expert three.js developer to develop our website.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>15<span class="text-secondary text-sm ms-1">/ hour </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
</div>