Viewing file:  blogs.blade.php (8.06 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.frontTemplate')
@section('title') {{get_settings('app_name')}} @endsection
@section('css')
<style>
img.recent-blog-img {
width: 65px;
height: 65px;
background: #ffffff;
padding: 5px;
border-radius: 6px;
}
.recent-blog-title-link {
text-decoration: none;
}
.recent-blog-title-link:hover {
text-decoration: none;
}
.recent-blog-date {
font-size: 14px;
font-weight: 600;
font-style: italic;
}
.recent-blog-title {
font-size: 15px;
font-weight: 500;
}
.blog-img-card {
background: #ffffff;
padding: 10px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.blog-details-title-text {
font-size: 30px;
margin: 40px 0px;
font-weight: 600;
}
.blog-details-sec {
padding: 100px 0px;
background: linear-gradient(297deg, #b2b2b200, #ee00eb24);
}
.blog-card-title {
font-size: 20px;
color: #060505;
font-weight: 600;
}
.blog-card-description {
margin: 20px 0px;
min-height: 50px;
max-height: 50px;
}
.blog-card {
background: #ffffff;
padding: 10px;
border-radius: 5px;
}
.blog-card-title {
font-size: 15px;
color: #060505;
font-weight: 600;
margin: 15px 0px;
}
.blog-card-img img {
width: 100%;
min-height: 200px;
max-height: 200px;
}
.primary-btn {
padding: 10px 20px;
}
.page-item .page-link{
text-decoration: none;
}
.page-item.disabled{
cursor: not-allowed;
}
.recent-blog-img {
width: 100% !important;
height: 100% !important;
}
.recent-blog-post-item{
min-height: 280px;
max-height: 280px;
}
.owl-nav{
display: none !important;
}
@media (max-width: 575.98px) {.recent-blog-post-item{
min-height: 100% !important;
max-height: 100% !important;
}
}
.navbar-custom {
padding: 0rem 0.5rem !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
@endsection
@section('main-section')
<div class="blog-details-sec">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="all-blogs-lists">
<div class="blog-title">
All Blogs
</div>
</div>
<div class="all-blogs-item">
<div class="row">
@if (isset($blogs) && $blogs)
@foreach ($blogs as $blog)
{{-- html_entity_decode --}}
@php
$blog_description = html_entity_decode($blog->description);
$blog_description = strip_tags($blog_description);
@endphp
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="blog-card">
<div class="blog-card-img">
<img src="{{ asset('uploads/'.$blog->image) }}" alt="blog" class="img-fluid">
</div>
<div class="blog-card-content">
<div class="blog-card-title">{{ $blog->title }}</div>
<div class="blog-card-description">{{Str::limit(strip_tags($blog_description), 80)}}
</div>
<div class="blog-details-btn-sec mb-3 mt-3">
<a href="{{ route('blog.details', $blog->slug) }}" class="primary-btn">Read
More</a>
</div>
</div>
</div>
</div>
@endforeach
@else
@endif
<div class="col-12 mt-4 d-flex justify-content-end">
<nav>
<ul class="pagination">
@if ($blogs->onFirstPage())
<li class="page-item disabled"><span class="page-link">Previous</span></li>
@else
<li class="page-item"><a class="page-link"
href="{{ $blogs->previousPageUrl() }}">Previous</a></li>
@endif
@for ($i = 1; $i <= $blogs->lastPage(); $i++)
<li class="page-item {{ $i == $blogs->currentPage() ? 'active' : '' }}">
<a class="page-link" href="{{ $blogs->url($i) }}">{{ $i }}</a>
</li>
@endfor
@if ($blogs->hasMorePages())
<li class="page-item"><a class="page-link"
href="{{ $blogs->nextPageUrl() }}">Next</a></li>
@else
<li class="page-item disabled"><span class="page-link">Next</span></li>
@endif
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="col-lg-12 mt-5">
<div class="recent-blog-post">
<div class="recent-blog-post-title">
<b> Recent Blog Post </b>
</div>
<div class="recent-blog-post-list">
<div class="owl-carousel recent-blogs-carousel mt-2">
@foreach($recent_blogs as $recent_blog)
<div class="recent-blog-post-item p-2 bg-light rounded shadow-sm">
<div class="recent-blog-img-sec">
<a class="recent-blog-title-link" href="{{ route('blog.details', $recent_blog->slug) }}">
<img src="{{ asset('uploads/'.$recent_blog->image) }}"
alt="{{ $recent_blog->title }}"
class="recent-blog-img"
</a>
</div>
<div class="recent-blog-link-sec ml-3">
<a class="recent-blog-title-link text-dark font-weight-bold" href="{{ route('blog.details', $recent_blog->slug) }}">
<div class="recent-blog-title">{{ $recent_blog->title }}</div>
</a>
<div class="recent-blog-date text-muted small">
{{ date('d M Y', strtotime($recent_blog->created_at)) }}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".recent-blogs-carousel").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: true,
autoplay: true,
autoplayTimeout: 3000,
responsive: {
0: { items: 1 },
576: { items: 2 },
768: { items: 3 },
992: { items: 4 }
}
});
});
</script>
@endsection
|