<style type="text/css">
	.btn {
		border-radius: 0 !important;
	}
</style>


<section class="margin-top-xs-55" style="background: #fff;position: relative;
">
	<div class="header-text mb-0">
		<div>
			<div class="row ">
				<div class="col-lg-12 col-md-12 col-sm-12 text-center">
					<svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
						<defs>   
							<g id="shape">
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
							</g>
							<radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
								<stop stop-color="#4169E1"></stop>
								<stop offset="1" stop-color="#071A34"></stop>
							</radialGradient>
						</defs>
						<use href="#shape"></use>
					</svg>
					<div class="frame-image">
						<div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
					</div>
					<div class="text-body main-header-text">
						<h1 class="text-center text-white"><b>All Blogs</b></h1>
					</div>
				</div>

				<div class="floating-icons">
					<i class="icon-facebook"></i>
					<i class="icon-adwords"></i>
					<i class="icon-seo"></i>
					<i class="icon-instagram"></i>
					<i class="icon-activecampaign"></i>
					<i class="icon-wordpress"></i>
					<i class="icon-shopify"></i>
					<i class="icon-youtube"></i>
					<i class="icon-analytics"></i>
					<i class="icon-kk"></i>
				</div>
			</div>
		</div>
	</div>
</section>

<!--Section-->
<section class="sptb">
	<div class="container">
		<div class="row">
			<!--Coursed lists-->
			<div class="col-xl-12 col-lg-12 col-md-12">
				<div class="row blog-grid">
					<?php foreach ($all_blog as $key => $blog):
						$blog_comment = $this->blog_model->get_all_blog_comment_by_id($blog->id);
					?>
						<div class="col-xl-4 col-lg-4 col-md-4">
							<div class="card p-5">
								<div class="item7-card-img br-7 border">
									<a href="<?php echo base_url() ?>b/<?php echo $blog->title_slug ?>"></a>
									<img src="<?php echo base_url() ?><?php echo $blog->thumb ?>" alt="<?php echo $blog->title ?>" class="cover-image">
								</div>
								<div class="card-body pt-4 pb-0 ps-0 pe-0">
									<div class="mb-3">
										<!-- <span class="item-card-badge mb-2">Business</span> -->
										<a href="<?php echo base_url() ?>b/<?php echo $blog->title_slug ?>" class="">
											<h3 class="font-weight-semibold fs-16"><?php echo mb_strimwidth($blog->title, 0, 30, "...") ?></h3>
										</a>
										<p class=""><?php echo mb_strimwidth($blog->short_description, 0, 70, "...") ?></p>
									</div>
									<div class="d-flex align-items-center pt-2 mt-auto">
										<!-- <img loading="lazy" src="<?php echo base_url(); ?><?php echo $app_setting->header_logo ?>" class="avatar brround avatar-md me-3" alt="avatar-img"> -->
										<div>
											<a href="<?php echo base_url() ?>b/<?php echo $blog->title_slug ?>" class="text-default font-weight-bold">Dotcomvidya</a>
											<small class="d-block text-muted"><?php echo date('d-m-Y', strtotime($blog->date)) ?></small>
										</div>
										<div class="ms-auto text-muted">
											<a href="<?php echo base_url() ?>b/<?php echo $blog->title_slug ?>" class=""><i class="fa fa-comment-o me-2"></i><?php echo $blog_comment ?> Comments</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
				<!--<div class="center-block text-center">
							<ul class="pagination mb-lg-0 mb-5">
								<li class="page-item page-prev disabled">
									<a class="page-link" href="javascript:void(0)" tabindex="-1">Prev</a>
								</li>
								<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
								<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
								<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
								<li class="page-item page-next">
									<a class="page-link" href="javascript:void(0)">Next</a>
								</li>
							</ul>
						</div>-->
			</div>
			<!--/Coursed lists-->

			<!--Right Side Content-->
			<!--<div class="col-xl-4 col-lg-4 col-md-12">
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">Blog Categories</h3>
							</div>
							<div class="card-body">
								<div class="list-catergory">
									<div class="item-list">
										<ul class="list-group mb-0">
											<?php foreach ($all_blog_category as $key => $blog_category):
												$total_blog = $this->blog_model->count_blog_by_category($blog_category->id); ?>
											<li class="list-group-item pt-0">
												<a href="<?php echo base_url() ?>blog-category/<?php echo $blog_category->slug ?>" class="text-default-dark fs-14 font-weight-bold">
													<i class="fa fa-code bg-primary-light text-primary"></i> <?php echo $blog_category->category_name ?>
													<span class="badgetext badge badge-pill mb-0 mt-1 text-muted font-weight-normal"><?php echo $total_blog ?> Posts</span>
												</a>
											</li>
											<?php endforeach; ?>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">Latest Posts</h3>
							</div>
							<div class="card-body">
								<div class="list-catergory1">
									<div class="item-list">
										<ul class="list-group mb-0">
											<li class="list-group-item d-flex border-bottom-0 pt-0">
												<img loading="lazy" src="../../assets/images/media/Categories/2.jpg" class="avatar br-7 avatar-lg me-3 my-auto" alt="avatar-img">
												<div class="">
													<small class="d-block">Literature</small>
													<a class="text-default fs-16 font-weight-bold">Excepteur occaecat cupidatat</a>
													<small class="d-block text-muted">1 day ago</small>
												</div>
											</li>
											<li class="list-group-item d-flex border-bottom-0">
												<img loading="lazy" src="../../assets/images/media/Categories/9.jpg" class="avatar br-7 avatar-lg me-3 my-auto" alt="avatar-img">
												<div class="">
													<small class="d-block">Beautician</small>
													<a class="text-default fs-16 font-weight-bold">Excepteur occaecat cupidatat</a>
													<small class="d-block text-muted">1 day ago</small>
												</div>
											</li>
											<li class="list-group-item d-flex border-bottom-0">
												<img loading="lazy" src="../../assets/images/media/Categories/10.jpg" class="avatar br-7 avatar-lg me-3 my-auto" alt="avatar-img">
												<div class="">
													<small class="d-block">Music</small>
													<a class="text-default fs-16 font-weight-bold">Excepteur occaecat cupidatat</a>
													<small class="d-block text-muted">1 day ago</small>
												</div>
											</li>
											<li class="list-group-item d-flex border-bottom-0">
												<img loading="lazy" src="../../assets/images/media/Categories/1.jpg" class="avatar br-7 avatar-lg me-3 my-auto" alt="avatar-img">
												<div class="">
													<small class="d-block">DataScience</small>
													<a class="text-default fs-16 font-weight-bold">Excepteur occaecat cupidatat</a>
													<small class="d-block text-muted">1 day ago</small>
												</div>
											</li>
											<li class="list-group-item d-flex border-bottom-0 pb-0 br-bs-7 br-be-7">
												<img loading="lazy" src="../../assets/images/media/Categories/4.jpg" class="avatar br-7 avatar-lg me-3 my-auto" alt="avatar-img">
												<div class="">
													<small class="d-block">Networking</small>
													<a class="text-default fs-16 font-weight-bold">Excepteur occaecat cupidatat</a>
													<small class="d-block text-muted">1 day ago</small>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">Popular Classes</h3>
							</div>
							<div class="card-body">
								<div class="product-tags clearfix">
									<ul class="list-unstyled mb-0">
										<li><a href="javascript:void(0)">Web Security</a></li>
										<li><a href="javascript:void(0)">Mobile Computing</a></li>
										<li><a href="javascript:void(0)">Slaesforce</a></li>
										<li><a href="javascript:void(0)">Python Classes</a></li>
										<li><a href="javascript:void(0)">Data Science</a></li>
										<li><a href="javascript:void(0)">Digital marketing</a></li>
										<li><a href="javascript:void(0)">UNIX</a></li>
										<li><a href="javascript:void(0)">.net</a></li>
										<li><a href="javascript:void(0)">Automobiles</a></li>
										<li><a href="javascript:void(0)">Computer</a></li>
										<li><a href="javascript:void(0)" class="mb-0">Web Designing</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">Blog Authors</h3>
							</div>
							<div class="card-body p-0">
								<ul class="vertical-scroll authors">
									<li class="item2">
										<div class="d-flex mt-0 mb-0">
											<div class="d-flex footerimg-l mb-0">
												<img loading="lazy" src="../../assets/images/users/female/18.jpg" alt="image" class="avatar avatar-lg brround  me-2">
												<div class="my-auto">
													<a href="javascript:void(0)" class="text-dark font-weight-bold fs-16">Jacobin</a>
													<p class="text-muted mb-0">Web-Design</p>
												</div>
											</div>
											<div class="mt-2 footerimg-r ms-auto">
												<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Likes"><span class="badge bg-primary-light text-primary"><i class="fe fe-heart"></i> 36</span></a>
											</div>
										</div>
									</li>
									<li class="item2">
										<div class="d-flex mt-0 mb-0">
											<div class="d-flex footerimg-l mb-0">
												<img loading="lazy" src="../../assets/images/users/female/10.jpg" alt="image" class="avatar avatar-lg brround  me-2">
												<div class="my-auto">
													<a href="javascript:void(0)" class="text-dark font-weight-bold fs-16">Julia Hardacre</a>
													<p class="text-muted mb-0">WebDevelopment</p>
												</div>
											</div>
											<div class="mt-2 footerimg-r ms-auto">
												<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Likes"><span class="badge bg-primary-light text-primary"><i class="fe fe-heart"></i> 36</span></a>
											</div>
										</div>
									</li>
									<li class="item2">
										<div class="d-flex mt-0 mb-0">
											<div class="d-flex footerimg-l mb-0">
												<img loading="lazy" src="../../assets/images/users/male/18.jpg" alt="image" class="avatar avatar-lg brround  me-2">
												<div class="my-auto">
													<a href="javascript:void(0)" class="text-dark font-weight-bold fs-16">Dewitt Hennessey</a>
													<p class="text-muted mb-0">3D Animation</p>
												</div>
											</div>
											<div class="mt-2 footerimg-r ms-auto">
												<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Likes"><span class="badge bg-primary-light text-primary"><i class="fe fe-heart"></i> 36</span></a>
											</div>
										</div>
									</li>
									<li class="item2">
										<div class="d-flex mt-0 mb-0">
											<div class="d-flex footerimg-l mb-0">
												<img loading="lazy" src="../../assets/images/users/male/8.jpg" alt="image" class="avatar avatar-lg brround  me-2">
												<div class="my-auto">
													<a href="javascript:void(0)" class="text-dark font-weight-bold fs-16">Irene Hunter</a>
													<p class="text-muted mb-0">Photography</p>
												</div>
											</div>
											<div class="mt-2 footerimg-r ms-auto">
												<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Likes"><span class="badge bg-primary-light text-primary"><i class="fe fe-heart"></i> 36</span></a>
											</div>
										</div>
									</li>
									<li class="item2">
										<div class="d-flex mt-0 mb-0">
											<div class="d-flex footerimg-l mb-0">
												<img loading="lazy" src="../../assets/images/users/female/21.jpg" alt="image" class="avatar avatar-lg brround  me-2">
												<div class="my-auto">
													<a href="javascript:void(0)" class="text-dark font-weight-bold fs-16">Barbra Flegle </a>
													<p class="text-muted mb-0">App Developer</p>
												</div>
											</div>
											<div class="mt-2 footerimg-r ms-auto">
												<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Likes"><span class="badge bg-primary-light text-primary"><i class="fe fe-heart"></i> 36</span></a>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>-->
			<!--/Right Side Content-->
		</div>
	</div>
</section><!--/Section-->