<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<div class="mb-4">
			<span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">اولیه</span>
			<span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold ms-10">موفقیت</span>
		</div>
		<h3 class="mb-3 fs-16 fw-semibold">فن آوری های نستا</h3>
		<p class="mb-20">وقتی وارد هر حوزه جدیدی از علم می شوید، تقریبا همیشه پیدا می کنید.</p>
		<a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
			مشاهده جزئیات
		</a>
	</div>
</div>

<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<div class="mb-4">
			<span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">اولیه</span>
			<span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold ms-10">موفقیت</span>
		</div>
		<h3 class="mb-3 fs-16 fw-semibold">فن آوری های نستا</h3>
		<p class="mb-20">وقتی وارد هر حوزه جدیدی از علم می شوید، تقریبا همیشه پیدا می کنید.</p>
		<a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
			مشاهده جزئیات
		</a>
	</div>
</div>

<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<div class="mb-4">
			<span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">اولیه</span>
			<span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold ms-10">موفقیت</span>
		</div>
		<h3 class="mb-3 fs-16 fw-semibold">فن آوری های نستا</h3>
		<p class="mb-20">وقتی وارد هر حوزه جدیدی از علم می شوید، تقریبا همیشه پیدا می کنید.</p>
		<a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
			مشاهده جزئیات
		</a>
	</div>
</div>

<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<div class="mb-4">
			<span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">اولیه</span>
			<span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold ms-10">موفقیت</span>
		</div>
		<h3 class="mb-3 fs-16 fw-semibold">فن آوری های نستا</h3>
		<p class="mb-20">وقتی وارد هر حوزه جدیدی از علم می شوید، تقریبا همیشه پیدا می کنید.</p>
		<a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
			مشاهده جزئیات
		</a>
	</div>
</div>

<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<div class="mb-4">
			<span class="badge bg-primary bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">اولیه</span>
			<span class="badge bg-success bg-opacity-50 rounded-1 text-dark py-2 px-3 fs-13 fw-semibold ms-10">موفقیت</span>
		</div>
        <img src="assets/images/card-1.jpg" class="mb-4 rounded-10" alt="card">
		<h3 class="mb-3 fs-16 fw-semibold">فن آوری های نستا</h3>
		<p class="mb-20">وقتی وارد هر حوزه جدیدی از علم می شوید، تقریبا همیشه پیدا می کنید.</p>
		<a href="#" class="btn btn-primary py-2 px-4 bg-primary bg-opacity-10 fw-semibold text-primary border-0 hover-bg">
			View Details
		</a>
	</div>
</div>

<div class="card text-bg-dark border-0 rounded-10">
	<img src="assets/images/card-2.jpg" class="card-img" alt="card">
	<div class="position-absolute top-0 p-3">
		<span class="badge bg-primary rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">اولیه</span>
		<span class="badge bg-warning rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">هشدار</span>
		<span class="badge bg-success rounded-1 text-dark py-2 px-3 fs-13 fw-semibold">موفقیت</span>
	</div>
	<div class="card-img-overlay" style="top: auto; bottom: 0;">
		<h5 class="card-title">عنوان کارت</h5>
		<p class="card-text">این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک راهنما طبیعی به محتوای اضافی است. این محتوا کمی طولانی تر است.</p>
		<p class="card-text"><small>آخرین بروزرسانی 3 دقیقه پیش</small></p>
	</div>
</div>

<div class="card bg-white">
	<div class="card-header fs-16 fw-semibold">
		ویژه
	</div>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">یک آیتم</li>
		<li class="list-group-item">یک مورد دوم</li>
		<li class="list-group-item">یک مورد سوم</li>
	</ul>
</div>