باکس متن (Card)

<div class="card" style="width: 18rem;">
  <img src="..." 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">مشاهده</a>
  </div>
</div>

<div class="card card-overlay-bottom card-grid-lg card-bg-scale h-500" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center right; background-size: cover;">
	<!-- Card featured -->
	<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
	<!-- Card Image overlay -->
	<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4"> 
		<div class="w-100 mt-auto">
			<!-- Card category -->
			<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>اقتصاد</a>
			<!-- Card title -->
			<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">دلیل کاهش نرخ دلار</a></h2>
			<p class="text-white">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک... </p>
			<!-- Card info -->
			<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
				<li class="nav-item">
					<div class="nav-link">
						<div class="d-flex align-items-center text-white position-relative">
							<div class="avatar avatar-sm">
								<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
							</div>
							<span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">شادی</a></span>
						</div>
					</div>
				</li>
				<li class="nav-item">15 دی</li>
				<li class="nav-item">زمان مطالعه</li>
			</ul>
		</div>
	</div>
</div>

<div class="card card-overlay-bottom card-img-scale">
	<!-- Card Image -->
	<img class="card-img h-200" src="assets/images/blog/4by3/06.jpg" alt="">
	<!-- Card Image overlay -->
	<div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
			<div>
				<!-- Card category -->
				<a href="#" class="badge bg-dark fs-6 mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>اقتصاد</a>
			</div>
		<div class="w-100 mt-auto">
			<!-- Card title -->
			<h4 class="text-white"><a href="#" class="btn-link text-reset stretched-link">دلیل کاهش نرخ دلار</a></h4>
			<!-- Card info -->
			<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block small">
				<li class="nav-item position-relative">
					<div class="nav-link">با <a href="#" class="stretched-link text-reset btn-link">شادی</a>
					</div>
				</li>
				<li class="nav-item">28 آبان، 1400</li>
			</ul>
		</div>
	</div>
</div>

<div class="card bg-transparent">
	<!-- Card img -->
	<div class="position-relative">
		<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
		<div class="card-img-overlay d-flex align-items-start flex-column p-3">
			<!-- Card overlay Top -->
			<div class="w-100 mb-auto d-flex justify-content-end">
				<div class="text-end me-auto">
					<!-- Card format icon -->
					<div class="icon-md bg-success text-white  rounded-circle" title="8.5 rating">8.5</div>
				</div>
			</div>
			<!-- Card overlay bottom -->
			<div class="w-100 mt-auto">
				<!-- Card category -->
				<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>تکنولوژی</a>
			</div>
		</div>
	</div>
	<div class="card-body px-0 pt-3">
		<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">رازهای کوچک کثیف در مورد صنعت تجارت</a></h4>
		<p class="card-text">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است...</p>
		<!-- Card info -->
		<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
			<li class="nav-item">
				<div class="nav-link">
					<div class="d-flex align-items-center position-relative">
						<div class="avatar avatar-xs">
							<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
						</div>
						<span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">نیلوفر</a></span>
					</div>
				</div>
			</li>
			<li class="nav-item">22 خرداد، 1400</li>
			<li class="nav-item"><a href="#" class="btn-link"><i class="far fa-comment-alt me-1"></i> 5 دیدگاه</a></li>
		</ul>
	</div>
</div>

<div class="card bg-transparent mb-4">
	<div class="row">
		<div class="col-md-5">
			<img class="rounded-3" src="assets/images/blog/4by3/06.jpg" alt="">
		</div>
		<div class="col-md-7 mt-3 mt-md-0">
			<a href="#" class="badge bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>ورزش</a>
			<h3><a href="#" class="btn-link stretched-link text-dark fw-bold">هشدار درباره یک بیماری حاد تنفسی در سرما</a></h3>
			<p>طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد... </p>
			<!-- Card info -->
			<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
				<li class="nav-item">
					<div class="nav-link">
						<div class="d-flex align-items-center position-relative">
							<div class="avatar avatar-xs">
								<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
							</div>
							<span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">مهرداد</a></span>
						</div>
					</div>
				</li>
				<li class="nav-item">7 دی، 1400</li>
			</ul>
		</div>
	</div>
</div>

<div class="card border rounded-3 up-hover p-4 mb-4">
	<div class="row g-3">
		<div class="col-lg-5">
			<!-- Categories -->
			<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle ms-2 small fw-bold"></i>اقتصاد</a>
			<a href="#" class="badge bg-dark mb-2"><i class="fas fa-circle ms-2 small fw-bold"></i>هنر</a>
			<!-- Title -->
			<h2 class="card-title">
				<a href="#" class="btn-link text-reset stretched-link">رازهای کوچک کثیف در مورد صنعت تجارت</a>
			</h2>
			<!-- Author info -->
			<div class="d-flex align-items-center position-relative mt-3">
				<div class="avatar me-2">
					<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
				</div>
				<div>
					<h5 class="mb-1"><a href="#" class="stretched-link text-reset btn-link">Lori Ferguson</a></h5>
					<ul class="nav align-items-center small">
						<li class="nav-item me-3">7 مهر، 1400</li>
						<li class="nav-item"><i class="far fa-clock me-1"></i>5 دقیقه زمان مطالعه</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- Detail -->
		<div class="col-md-6 col-lg-4">
			<p>در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده ... </p>
		</div>
		<!-- Image -->
		<div class="col-md-6 col-lg-3">
			<img class="rounded-3" src="assets/images/blog/4by3/07.jpg" alt="Card image">
		</div>
	</div>
</div>

<div class="col-6">
	<div class="card card-overlay-bottom card-fold h-400 h-lg-540" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center right; background-size: cover;">
		<!-- Card featured -->
		<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
		<!-- Card Image overlay -->
		<div class="card-img-overlay d-flex flex-column p-3 p-sm-5">
			<!-- Card play button -->
			<div class="position-absolute top-50 start-50 translate-middle pb-5">
				<!-- Popup video -->
				<a href="https://www.aparat.com/video/video/embed/videohash/oyh4m/vt/frame" class="icon-lg bg-primary d-block text-white rounded-circle" data-glightbox data-gallery="y-video">
					<i class="bi bi-play-btn"></i>
				</a>
			</div>
			<!-- Card overlay Bottom  -->
			<div class="w-100 mt-auto">
				<div class="col text-center">
					<!-- Card category -->
					<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>گردشگری</a>
					<!-- Card title -->
					<h2 class="text-white"><a href="#" class="btn-link text-reset fw-normal">عادات بدی که افراد در صنعت باید آنها را ترک کنند!</a></h2>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card border rounded-3 p-4 mb-4">
	<!-- Card item START -->
	<div class="col-sm-6 grid-item">
		<div class="card mb-4">
			<!-- Card img -->
			<div class="card-fold position-relative">
				<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
			</div>
			<div class="card-body px-0 pt-3">
				<h4 class="card-title"><a href="#" class="btn-link text-reset stretched-link fw-bold">دلیل کاهش نرخ دلار</a></h4>
					<p class="card-text">در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده... </p>
				<!-- Card info -->
				<ul class="nav nav-divider align-items-center text-uppercase small">
					<li class="nav-item">
						<a href="#" class="nav-link text-reset btn-link">علیرضا</a>
					</li>
					<li class="nav-item">7 دی، 1400</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="card card-fold bg-light">
	<div class="card-body p-4">
		<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small mb-2">
			<li class="nav-item"><i class="bi bi-clock-history"></i> 56:36</li>
			<li class="nav-item">با <a href="#">علی مرادی</a> </li>
		</ul>
		<h4 class="card-title"><a href="#" class="stretched-link">دلیل کاهش نرخ دلار</a></h4>
		<p class="m-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم...</p>
	</div>
	<img src="assets/images/blog/4by3/06.jpg" class="card-img-bottom" alt="Card image">
</div>

<div class="card mb-4">
	<div class="card-body p-4 border rounded-3">	
		<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>تکنولوژی</a>
		<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">رازهای کوچک کثیف در مورد صنعت تجارت</a></h4>
		<p class="card-text m-0">برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد...</p>
		<!-- Card info -->
		<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
			<li class="nav-item">
				<div class="nav-link">
					<div class="d-flex align-items-center position-relative">
						<div class="avatar avatar-xs">
							<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
						</div>
						<span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">نیلوفر</a></span>
					</div>
				</div>
			</li>
			<li class="nav-item">22 مهر، 1400</li>
		</ul>
	</div>
</div>

<div class="card mb-1">
	<div class="card-body px-0 border-bottom">
		<a href="#" class="badge bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>تکنولوژی</a>
		<h5><a href="#" class="btn-link stretched-link text-dark fw-bold">رازهای کوچک کثیف در مورد صنعت تجارت</a></h5>
		<!-- Card info -->
		<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small">
			<li class="nav-item">
				<div class="nav-link">
					<div class="d-flex align-items-center position-relative">
						<div class="avatar avatar-xs">
							<img class="avatar-img rounded-circle" src="assets/images/avatar/12.jpg" alt="avatar">
						</div>
						<span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">سارا</a></span>
					</div>
				</div>
			</li>
			<li class="nav-item">11 مرداد، 1400</li>
		</ul>
	</div>
</div>

<div class="row g-4 card-grid">
   <!-- Left big card -->
   <div class="col-lg-6">
      <div class="card card-overlay-bottom card-grid-lg card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center right; background-size: cover;">
         <!-- Card featured -->
         <span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
         <!-- Card Image overlay -->
         <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
            <div class="w-100 mt-auto">
               <!-- Card category -->
               <a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>ورزش</a>
               <!-- Card title -->
               <h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">رازهای کوچک کثیف در مورد صنعت تجارت</a></h2>
               <p class="text-white">چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز ...</p>
               <!-- Card info -->
               <ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
                  <li class="nav-item">
                     <div class="nav-link">
                        <div class="d-flex align-items-center text-white position-relative">
                           <div class="avatar avatar-sm">
                              <img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
                           </div>
                           <span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">شادی</a></span>
                        </div>
                     </div>
                  </li>
                  <li class="nav-item">15 آذر</li>
                  <li class="nav-item">زمان مطالعه</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
   <!-- Right small cards -->
   <div class="col-lg-6">
      <div class="row g-4">
         <!-- Card item START -->
         <div class="col-12">
            <div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center right; background-size: cover;">
               <!-- Card Image -->
               <!-- Card Image overlay -->
               <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                  <div class="w-100 mt-auto">
                     <!-- Card category -->
                     <a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>تکنولوژی</a>
                     <!-- Card title -->
                     <h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">سال 2022 رویایی و فوق العاده برای طارمی</a></h4>
                     <!-- Card info -->
                     <ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
                        <li class="nav-item position-relative">
                           <div class="nav-link">با <a href="#" class="stretched-link text-reset btn-link">علی</a>
                           </div>
                        </li>
                        <li class="nav-item">18 مرداد، 1400</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <!-- Card item END -->
         <!-- Card item START -->
         <div class="col-md-6">
            <div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center right; background-size: cover;">
               <!-- Card Image overlay -->
               <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                  <div class="w-100 mt-auto">
                     <!-- Card category -->
                     <a href="#" class="badge bg-success mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>سیاست</a>
                     <!-- Card title -->
                     <h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">کاهش نرخ دلار</a></h4>
                     <!-- Card info -->
                     <ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
                        <li class="nav-item position-relative">
                           <div class="nav-link">با <a href="#" class="stretched-link text-reset btn-link">مهرداد</a>
                           </div>
                        </li>
                        <li class="nav-item">3 تیر</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <!-- Card item END -->
         <!-- Card item START -->
         <div class="col-md-6">
            <div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center right; background-size: cover;">
               <!-- Card Image overlay -->
               <div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
                  <div class="w-100 mt-auto">
                     <!-- Card category -->
                     <a href="#" class="badge bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>ورزش</a>
                     <!-- Card title -->
                     <h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">جدول لیگ فوتبال</a></h4>
                     <!-- Card info -->
                     <ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
                        <li class="nav-item position-relative">
                           <div class="nav-link">با <a href="#" class="stretched-link text-reset btn-link">نیلوفر</a>
                           </div>
                        </li>
                        <li class="nav-item">28 دی</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <!-- Card item END -->
      </div>
   </div>
</div>