باکس متن (Card)

<div class="card" style="width: 18rem;">
  <img src="assets/images/course/4by3/02.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">عنوان</h5>
    <p class="card-text">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است... </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card shadow h-100">
	<!-- Image -->
	<img src="assets/images/course/4by3/02.jpg" class="card-img-top" alt="course image">
	<!-- Card body -->
	<div class="card-body pb-0">
		<!-- Badge and favorite -->
		<div class="d-flex justify-content-between mb-2">
			<a href="#" class="badge bg-primary bg-opacity-10 text-primary">همه سطح</a>
			<a href="#" class="text-dark"><i class="far fa-heart"></i></a>
		</div>
		<!-- Title -->
		<h5 class="card-title fw-normal"><a href="#">دوره جامع آموزش Photoshop</a></h5>
		<p class="mb-2 text-truncate-2">با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک...</p>
		<!-- Rating star -->
		<ul class="list-inline mb-0">
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="far fa-star text-warning"></i></li>
			<li class="list-inline-item me-2 text-dark">4.0/5.0</li>
		</ul>
	</div>
	<!-- Card footer -->
	<div class="card-footer pt-0 pb-3">
		<hr>
		<div class="d-flex justify-content-between">
			<span class="text-dark"><i class="far fa-clock text-danger ms-2"></i>12ساعت</span>
			<span class="text-dark"><i class="fas fa-table text-orange ms-2"></i>15 ویدیو</span>
		</div>
	</div>
</div>

<div class="card action-trigger-hover border">
	<!-- Image -->
	<img src="assets/images/course/4by3/23.jpg" class="card-img-top" alt="course image">
	<!-- Ribbon -->
	<div class="ribbon mt-3"><span>رایگان</span></div>
	<!-- Card body -->
	<div class="card-body pb-0">
		<!-- Badge and favorite -->
		<div class="d-flex justify-content-between mb-3">
			<span class="hstack gap-2">
				<a href="#" class="badge bg-primary bg-opacity-10 text-primary">طراحی وب</a>
				<a href="#" class="badge text-bg-dark">مقدماتی</a>
			</span>
			<a href="#"><i class="far fa-bookmark text-dark"></i></a>
		</div>
		<!-- Title -->
		<h5 class="card-title"><a href="#">آموزش مقدماتی فتوشاپ Photoshop</a></h5>
		<!-- Rating -->
		<div class="d-flex justify-content-between mb-2">
			<div class="hstack gap-2">
				<p class="text-warning m-0">4.5<i class="fas fa-star text-warning ms-1"></i></p>
				<span class="small">(6500)</span>
			</div>
			<div class="hstack gap-2">
				<p class="text-dark m-0">6500</p>
				<span class="small">(هنرجو)</span>
			</div>
		</div>
		<!-- Time -->
		<div class="hstack gap-3">
			<span class="text-dark"><i class="far fa-clock text-danger ms-2"></i>6ساعت</span>
			<span class="text-dark"><i class="fas fa-table text-orange ms-2"></i>82 ویدیو</span>
		</div>
	</div>
	<!-- Card footer -->
	<div class="card-footer pt-0">
		<hr>
		<!-- Avatar and Price -->
		<div class="d-flex justify-content-between align-items-center">
			<!-- Avatar -->
			<div class="d-flex align-items-center">
				<div class="avatar avatar-sm">
					<img class="avatar-img rounded-1" src="assets/images/avatar/01.jpg" alt="avatar">
				</div>
				<p class="mb-0 ms-2"><a href="#" class="text-dark">الهام حسینی</a></p>
			</div>
			<!-- Price -->
			<div>
				<h4 class="text-success mb-0 item-show">رایگان</h4>
				<a href="#" class="btn btn-sm btn-success-soft item-show-hover"><i class="fas fa-shopping-cart ms-2"></i>افزودن به سبد</a>
			</div>
		</div>
	</div>
</div>

<div class="card p-2 shadow">
  <div class="rounded-top overflow-hidden">
    <div class="card-overlay-hover">
      <!-- Image -->
      <img src="assets/images/course/4by3/23.jpg" class="card-img-top" alt="course image">
    </div>
    <!-- Hover element -->
    <div class="card-img-overlay">
      <div class="card-element-hover d-flex justify-content-end">
        <a href="#" class="icon-md bg-white rounded-circle text-center">
          <i class="fas fa-shopping-cart text-danger"></i>
        </a>
      </div>
    </div>
  </div>
  <!-- Card body -->
  <div class="card-body">
    <!-- Badge and icon -->
    <div class="d-flex justify-content-between">
      <!-- Rating and info -->
      <ul class="list-inline hstack gap-2 mb-0">
        <!-- Info -->
        <li class="list-inline-item d-flex justify-content-center align-items-center">
          <div class="icon-md bg-orange bg-opacity-10 text-orange rounded-circle"><i class="fas fa-user-graduate"></i>
          </div>
          <span class="text-dark me-2">9.1k</span>
        </li>
        <!-- Rating -->
        <li class="list-inline-item d-flex justify-content-center align-items-center">
          <div class="icon-md bg-warning bg-opacity-15 text-warning rounded-circle"><i class="fas fa-star"></i>
          </div>
          <span class="text-dark me-2">4.5</span>
        </li>
      </ul>
      <!-- Avatar -->
      <div class="avatar avatar-sm">
        <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
      </div>
    </div>
    <!-- Divider -->
    <hr>
    <!-- Title -->
    <h5 class="card-title"><a href="#">آموزش مقدماتی فتوشاپ Photoshop</a></h5>
    <!-- Badge and Price -->
    <div class="d-flex justify-content-between align-items-center mb-0">
      <div>
        <a href="#" class="badge bg-info bg-opacity-10 text-info ms-2"><i class="fas fa-circle small fw-bold"></i> طراحی وب </a>
      </div>
      <!-- Price -->
      <h3 class="text-success mb-0">250,000 تومان</h3>
    </div>
  </div>
</div>

<div class="card p-2">
	<div class="position-relative">
		<img src="assets/images/course/4by3/02.jpg" class="card-img rounded-2" alt="Card image">
		<div class="card-img-overlay">
			<div class="position-absolute top-50 end-50 translate-middle">
				<a href="https://www.youtube.com/embed/tXHviS-4ygo" class="btn btn-lg text-danger btn-round btn-white-shadow" data-glightbox="" data-gallery="video-tour">
					<i class="fas fa-play"></i>
				</a>
			</div>
		</div>
	</div>

	<!-- Card body -->
	<div class="card-body">
		<!-- Title -->
		<h5><a href="#" class="stretched-link">دوره جامع آموزش Photoshop</a></h5>
		<!-- Avatar group and button -->
		<div class="d-sm-flex justify-content-sm-between align-items-center mt-3">
			<!-- Avatar Group -->
			<div>
				<h6 class="mb-1 fw-normal"><i class="fas fa-circle fw-bold text-success small ms-2"></i>هنرجویان آنلاین</h6>
				<ul class="avatar-group mb-0">
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
					</li>
					<li class="avatar avatar-xs">
						<div class="avatar-img rounded-circle bg-primary">
							<span class="text-white position-absolute top-50 end-50 translate-middle small">1K+</span>
						</div>
					</li>
				</ul>
			</div>
			<!-- Button -->
			<button class="btn btn-sm btn-success mb-0">لاگین</button>
		</div>
	</div>
</div>

<div class="card shadow-hover overflow-hidden">
	<div class="position-relative">
		<!-- Image -->
		<img class="card-img-top" src="assets/images/course/4by3/23.jpg" alt="Card image">
		<!-- Overlay -->
		<div class="bg-overlay bg-dark opacity-4"></div>
		<div class="card-img-overlay d-flex align-items-start flex-column">
			<!-- Card overlay bottom -->
			<div class="w-100 mt-auto d-inline-flex">
				<div class="d-flex align-items-center bg-white p-2 rounded-2">
					<!-- Avatar -->
					<div class="avatar avatar-sm ms-2">
						<img class="avatar-img rounded-1" src="assets/images/avatar/01.jpg" alt="avatar">
					</div>
					<!-- Avatar info -->
					<div>
						<h6 class="mb-0"><a href="#" class="text-dark">الهام حسینی</a></h6>
						<span>مدرس</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Card body -->
	<div class="card-body">
		<!-- Badge and icon -->
		<div class="d-flex justify-content-between mb-3">
			<div class="hstack gap-2">
				<a href="#" class="badge bg-orange bg-opacity-10 text-orange">همه سطح</a>
				<a href="#" class="badge text-bg-dark">6 ماه</a>
			</div>
			<a href="#"><i class="far fa-bookmark fa-fw text-dark"></i></a>
		</div>
		<!-- Title -->
		<h5 class="card-title"><a href="#" class="Stretched-link">آموزش مقدماتی فتوشاپ Photoshop</a></h5>
		<!-- Rating -->
		<ul class="list-inline">
			<li class="list-inline-item text-dark">4.5</li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
			<li class="list-inline-item ms-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
			<li class="list-inline-item me-2 text-reset">(6,500)</li>
		</ul>
		<!-- Divider -->
		<hr>
		<!-- Time -->
		<div class="d-flex justify-content-between align-items-center mb-2">
			<h4 class="text-success mb-0">250,000 تومان</h4>
			<span class="text-dark ms-3"><i class="far fa-clock text-danger ms-2"></i>6ساعت</span>
		</div>
	</div>
</div>

<div class="card card-metro overflow-hidden rounded-3">
	<img src="assets/images/course/4by3/02.jpg" alt="">
	<!-- Image overlay -->
	<div class="card-img-overlay d-flex flex-column"> 
		<!-- Info -->
		<div class="mt-auto card-text">
			<a href="#" class="text-light mt-auto fs-5 stretched-link">طراحی وب</a>
			<div> <a href="#" class="text-white">23 دوره</a> </div>
		</div>
	</div>
</div>

<div class="card border">
	<!-- Card image -->
	<img class="card-img-top" src="assets/images/university/01.jpg" alt="Card image">
	<!-- Card body -->
	<div class="card-body">
		<div class="d-flex justify-content-between align-items-center mt-n6 mb-3">
			<!-- Logo image -->
			<div class="bg-white p-2 rounded-2 shadow">
				<img class="rounded-1 h-60px" src="assets/images/university/uni-logo-02.svg" alt="university logo">
			</div>
			<!-- Badge -->
			<div class="h5 mb-0"><a href="#" class="badge text-bg-success">درحال پذیرش</a></div>
		</div>
		<!-- Badge and rating -->
		<div class="d-flex justify-content-between mb-3">
			<!-- Badge -->
			<span><a href="#" class="badge text-bg-dark">خصوصی</a></span>
			<!-- Rating star -->
			<ul class="list-inline hstack mb-0">
				<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
				<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
				<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
				<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
				<li class="list-inline-item ms-0 small"><i class="far fa-star text-warning"></i></li>
				<li class="list-inline-item me-2 text-dark">(4.0)</li>
			</ul>
		</div>
		<!-- Title -->
		<h5 class="card-title mb-3"><a href="#">کالج نظامی سلطنتی کانادا</a></h5>
		<p class="mb-3"><i class="fas fa-map-marker-alt ms-2"></i> کانادا، خیابان 3743 دوم Rafael B Wilson </p>
		<!-- Info -->
		<ul class="nav nav-divider text-dark mb-3">
			<li class="nav-item">Engineer</li>
			<li class="nav-item">BBA</li>
			<li class="nav-item">BCA</li>
			<li class="nav-item">BSC</li>
		</ul>
		<!-- Content -->
		<div class="row item-collapse">
			<div class="col-6">
				<ul class="list-group list-group-borderless">
					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>کتابخانه</li>
					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>زمین بازی</li>
					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>ایستگاه اتوبوس</li>
				</ul>
			</div>
			<div class="col-6">
				<ul class="list-group list-group-borderless">
					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>خوابگاه</li>
					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>غذاخوری</li>
					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>باشگاه</li>
				</ul>
			</div>
			<!-- Button -->
			<div class="mt-3"><a href="#" class="btn btn-primary-soft">مشاهده</a></div>
		</div>
	</div>
</div>

<div class="card shadow p-2">
	<div class="row g-0">
		<div class="col-lg-5">
			<img src="assets/images/course/4by3/02.jpg" class="img-fluid rounded-2" alt="Card image">
		</div>
		<div class="col-lg-7">
			<div class="card-body">
				<!-- Badge and rating -->
				<div class="d-flex justify-content-between align-items-center mb-2">
					<!-- Badge -->
					<a href="#" class="badge text-bg-primary mb-2 mb-sm-0">Marketing</a>
					<!-- Rating and wishlist -->
					<div>
						<span class="text-dark me-3"><i class="fas fa-star text-warning me-1"></i>4.5</span>
						<a href="#" class="text-dark"><i class="far fa-heart"></i></a>
					</div>
				</div>

				<!-- Title -->
				<h5 class="card-title"><a href="#">آموزش مقدماتی فتوشاپ Photoshop</a></h5>
				<p class="text-truncate">شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده </p>

				<!-- Info -->
				<ul class="list-inline">
					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="far fa-clock text-danger ms-2"></i>6ساعت</li>
					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="fas fa-table text-orange ms-2"></i>82 ویدیو</li>
					<li class="list-inline-item text-dark"><i class="fas fa-signal text-success ms-2"></i>مقدماتی</li>
				</ul>

				<!-- Price and avatar -->
				<div class="d-sm-flex justify-content-sm-between align-items-center">
					<!-- Avatar -->
					<div class="d-flex align-items-center">
						<div class="avatar">
							<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
						</div>
						<p class="mb-0 ms-2"><a href="#" class="text-dark">الهام حسینی</a></p>
					</div>
					<!-- Price -->
					<div class="mt-3 mt-sm-0">
						<a href="#" class="btn btn-dark">مشاهده</a>    
					</div>                  
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card rounded overflow-hidden shadow">
	<div class="row g-0">
		<!-- Image -->
		<div class="col-md-4">
			<img src="assets/images/course/4by3/02.jpg" alt="card image">
		</div>

		<!-- Card body -->
		<div class="col-md-8">
			<div class="card-body">
				<!-- Title -->
				<div class="d-flex justify-content-between mb-2 mb-sm-3">
					<h5 class="card-title mb-0"><a href="#">دوره جامع آموزش Photoshop</a></h5>
					<!-- Wishlist icon -->
					<a href="#"><i class="far fa-heart text-dark"></i></a>
				</div>
				<!-- Content -->
				<!-- Info -->
				<ul class="list-inline mb-2">
					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="far fa-clock text-danger ms-2"></i>9ساعت</li>
					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="fas fa-table text-orange ms-2"></i>65 ویدیو</li>
					<li class="list-inline-item text-dark"><i class="fas fa-signal text-success ms-2"></i>همه سطح</li>
				</ul>
				<!-- Rating -->
				<ul class="list-inline mb-0">
					<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
					<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
					<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
					<li class="list-inline-item ms-0 small"><i class="fas fa-star text-warning"></i></li>
					<li class="list-inline-item ms-0 small"><i class="far fa-star text-warning"></i></li>
					<li class="list-inline-item ms-2 text-dark">4.0/5.0</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="card shadow p-2">
	<div class="row g-0">
		<!-- Image -->
		<div class="col-md-4">
			<img src="assets/images/instructor/01.jpg" class="img-fluid rounded-3" alt="...">
		</div>

		<!-- Card body -->
		<div class="col-md-8">
			<div class="card-body">
				<!-- Title -->
				<div class="d-sm-flex justify-content-sm-between mb-2 mb-sm-3">
					<div>
						<h5 class="card-title mb-0"><a href="#">علی مرادی</a></h5>
						<p class="small mb-2 mb-sm-0">مدرس دانشگاه شریف</p>
					</div>
					<span class="text-dark">4.3<i class="fas fa-star text-warning ms-1"></i></span>
				</div>
				<!-- Content -->
				<p class="text-truncate-2 mb-3">در این آموزش عملی، شما یاد خواهید گرفت که با این بسته دوره آموزشی نهایی که شامل 12 دوره بازاریابی دیجیتال</p>
				<!-- Info -->
				<div class="d-sm-flex justify-content-sm-between align-items-center">
					<!-- Title -->
					<h6 class="text-orange mb-0">طراح وب</h6>

					<!-- Social button -->
					<ul class="list-inline mb-0 social-media-btn mt-3 mt-sm-0">
						<li class="list-inline-item"> 
							<a class="mb-0 me-1 text-facebook" href="#"><i class="fab fa-fw fa-facebook-f"></i></a> 
						</li>
						<li class="list-inline-item"> 
							<a class="mb-0 me-1 text-instagram-gradient" href="#"><i class="fab fa-fw fa-instagram"></i></a> 
						</li>
						<li class="list-inline-item"> 
							<a class="mb-0 me-1 text-twitter" href="#"><i class="fab fa-fw fa-twitter"></i></a> 
						</li>
						<li class="list-inline-item"> 
							<a class="mb-0 text-linkedin" href="#"><i class="fab fa-fw fa-linkedin-in"></i></a> 
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card p-2 shadow h-100">
  <div class="card-image-scale rounded-3 position-relative">
    <!-- Card Image -->
    <img src="assets/images/instructor/01.jpg" class="card-img" alt="">
    <!-- Overlay -->
    <div class="card-img-overlay d-flex flex-column p-2 z-index-1">
      <div><span class="badge text-bg-dark"><i class="bi bi-star-fill text-warning ms-2"></i>4.3</span></div>
    </div>
  </div> 
  
  <!-- Card body -->
  <div class="card-body px-2">
    <!-- Title -->
    <h5 class="card-title"><a href="#" class="stretched-link">دوره جامع آموزش Photoshop</a></h5>
    <h6 class="mb-0 fw-normal">علی مراذی</h6>
  </div>
</div>