@extends('website.layouts.app')
@section('title','Blog')
@section('content')



<style>
    .widget-search .form-group input {
    padding: 14px;
    padding-bottom: 14px;
    border: 1px solid transparent;
}
.widget-search .form-group {
    margin: 0;
    position: relative;
}
.box-shadow, .featured-imagebox-blog {
    -webkit-box-shadow: 0 0 12px 0 rgb(32 46 60 / 6%);
    -moz-box-shadow: 0 0 12px 0 rgba(32,46,60,.06);
    box-shadow: 0 0 12px 0 rgb(32 46 60 / 6%);
}
.sidebar .widget-area .widget:first-child {
    margin-top: 0;
}

.sidebar .widget-area .widget {
    position: relative;
    margin: 30px 0 30px;
    padding: 30px;
    -webkit-box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
    -moz-box-shadow: 0 0 15px 0 rgba(40,61,88,.07);
    box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
}

.sidebar .widget-area .widget {
    position: relative;
    margin: 30px 0 30px;
    padding: 30px;
    -webkit-box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
    -moz-box-shadow: 0 0 15px 0 rgba(40,61,88,.07);
    box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
}
.sidebar .widget-categories ul li a {
    padding-left: 20px;
    position: relative;
}
.ttm-blog-classic .post-meta .ttm-meta-line, .ttm-blog-single-content .post-meta .ttm-meta-line {
    font-size: 13px;
    line-height: 15px;
    display: inline-block;
    padding-right: 25px;
    position: relative;
}
.ttm-blog-classic .post-meta .ttm-meta-line, .ttm-blog-single-content .post-meta .ttm-meta-line {
    font-size: 13px;
    line-height: 15px;
    display: inline-block;
    padding-right: 25px;
    position: relative;
}
article.ttm-blog-classic .ttm-blog-classic-content {
    padding: 45px 30px 30px;
    background: #fff;
    z-index: 1;
    position: relative;
}
article.ttm-blog-classic {
    margin-bottom: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
    -moz-box-shadow: 0 0 15px 0 rgba(40,61,88,.07);
    box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
}
article.ttm-blog-classic .ttm-post-entry-header {
    position: absolute;
    top: -20px;
    left: auto;
}

.ttm-blog-classic .post-meta .ttm-meta-line i, .ttm-blog-single-content .post-meta .ttm-meta-line i {
    padding-right: 7px;
    font-size: 13px;
}
.separator .sep-line {
    height: 1px;
    border-top: 1px solid #ebebeb;
    display: block;
    position: relative;
    width: 100%;
}
.ttm-bgcolor-white .separator .sep-line {
    border-color: #f1f1f1;
}

.ttm-blog-classic .ttm-blogbox-desc-footer {
    margin-top: 15px;
    clear: both;
    overflow: hidden;
}

.ttm-blog-classic .post-meta {
    padding: 6px 15px;
    display: inline-block;
    margin-bottom: 0;
    -webkit-box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
    -moz-box-shadow: 0 0 15px 0 rgba(40,61,88,.07);
    box-shadow: 0 0 15px 0 rgb(40 61 88 / 7%);
    background-color: #fff;
    position: relative;
    border-radius: 5px;
    margin: 0;
}

ul.ttm-recent-post-list>li img {
    display: block;
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 10px;
    padding: 4px;
    border: 1px solid rgba(46,56,77,1);
}
.sidebar ul.ttm-recent-post-list>li:not(:last-child), .sidebar .widget-top-rated-products ul >li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}
.sidebar ul.ttm-recent-post-list>li, .sidebar .widget-top-rated-products ul >li {
    padding: 15px 0 !important;
}
ul.ttm-recent-post-list>li {
    padding: 5px 0 15px !important;
    display: inline-block;
    width: 100%;
    line-height: 20px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins",sans-serif;
    margin-bottom: 15px;
    font-weight: 600;

}
.sidebar .widget a {
    font-weight: 500;
    font-size: 14px;
}
.ttm-pagination {
    display: block;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}
.ttm-pagination .page-numbers {
    width: 40px;
    height: 40px;
    line-height: 39px;
    text-align: center;
    display: inline-block;
    background-color: #f8f9fa;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #f8f9fa;
    border-radius: 0;
    margin: 0 3px;
    padding: 0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.featured-icon-box .featured-icon, .ttm-btn, button, .owl-item, img, span, .featured-icon-box, .featured-icon, #totop {
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

ul.ttm-recent-post-list>li .post-date {
    display: block;
    font-size: 11px;
    line-height: 14px;
    margin-top: 5px;
}
ul.ttm-recent-post-list>li .post-date i {
    margin-right: 7px;
    font-size: 11px;
}
.sidebar .widget-categories ul li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}
.sidebar .widget-categories ul li {
    padding: 12px 0;
    display: block;
    position: relative;
}
.sidebar .widget-categories ul li a:before {
    font-family: "FontAwesome";
    content: "\f067";
    position: absolute;
    top: 4px;
    left: 0;
    line-height: 16PX;
    font-size: 13px;
}
::selection {
    background: #2d4a8a;
    color: #fff;
    text-shadow: none;
}
.widget .widget-title {
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
    font-size: 19px;
    line-height: 23px;
    text-transform: capitalize;
}
.sidebar .widget .tagcloud a {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 5px 10px;
    border: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: transparent;
}

.sidebar .content-area {
    padding-top: 65px;
    padding-bottom: 55px;
}
.sidebar div.widget-area {
    position: relative;
    margin-top: 65px;
}

.widget.widget_media_gallery .gallery-item {
    display: inline-block;
    max-width: 32%;
    padding: 0 1% 2% 0%;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

</style>
    <!-- start inner banner -->
    <section class="about-blog">
        <h1 class="font-weight-bold text-center">Blog</h1>
        <h4 class="text-center" style="margin-top: -10px;">Home / Blog</h4>
    </section>

    <!-- end inner banner -->
       <!-- start about us -->
    <!--site-main start-->
        <div class="site-main">
        <!-- sidebar -->
        <div class="sidebar ttm-bgcolor-white clearfix">
            <div class="container">
                <!-- row -->
                <div class="row">
                    <div class="col-lg-12 content-area">
                        <!-- ttm-service-single-content-are -->
                        @foreach($blogs as $blog)
                        <article class="post ttm-blog-classic clearfix">
                            <!-- post-featured-wrapper -->
                            <div class="ttm-post-featured-wrapper ttm-featured-wrapper">
                                <div class="ttm-post-featured">
                                    <img class="img-fluid" src="{{asset($blog->image_path)}}" style="height:auto !important;" alt="">
                                </div>
                            </div><!-- post-featured-wrapper end -->
                            <!-- ttm-blog-classic-content -->
                            <div class="ttm-blog-classic-content">
                                <div class="ttm-post-entry-header">
                                    <div class="post-meta">
                                        <!-- <span class="ttm-meta-line byline"><i class="fa fa-user"></i>By Admin</span> -->
                                        <span class="ttm-meta-line entry-date"><i class="fa fa-calendar"></i><time class="entry-date published" datetime="{{$blog->created_at}}">{{date("M d, Y", strtotime($blog->created_at))}}</time></span>
                                        <!-- <span class="ttm-meta-line tags-links"><i class="fa fa-comment-o"></i>03</span> -->
                                    </div>
                                </div>
                                <div class="entry-content">
                                    <header class="entry-header">
                                        <h2 class="entry-title">{{$blog->name}}</h2>
                                    </header>
                                    <div class="ttm-box-desc-text">
                                        <p>{!! $blog->description !!}</p>
                                    </div>
                                    <!-- separator -->
                                    <div class="separator">
                                        <div class="sep-line mt-25 mb-25"></div>
                                    </div>
                                    <!-- separator -->
                                   <!--  <div class="ttm-blogbox-desc-footer">
                                        <div class="ttm-blogbox-footer-readmore d-inline-block">
                                            <a class="ttm-btn ttm-btn-size-sm ttm-btn-color-skincolor btn-inline ttm-icon-btn-right" href="#">Read More <i class="ti ti-angle-double-right"></i></a>
                                        </div> -->
                                        <!-- <div class="ttm-commentbox d-inline-block float-right">
                                            <span><i class="fa fa-comments"></i>2</span>
                                        </div>
                                    </div> -->
                                <!-- </div> -->
                            </div><!-- ttm-blog-classic-content end -->
                        </article>
                        @endforeach
                        <!-- ttm-service-single-content-are end -->
                        <!-- ttm-service-single-content-are -->
                       <!--  <article class="post ttm-blog-classic clearfix">
                             post-featured-wrapper -->
                            <!--<div class="ttm-post-featured-wrapper ttm-featured-wrapper">
                                <div class="ttm-post-featured">
                                    <img class="img-fluid" src="images/post-02.jpg" alt="post-02">
                                </div>
                            </div>-->

                            <!-- post-featured-wrapper end -->
                            <!-- ttm-blog-classic-content -->


                       <!-- <div class="ttm-blog-classic-content">
                                <div class="ttm-post-entry-header">
                                    <div class="post-meta">
                                        <span class="ttm-meta-line byline"><i class="fa fa-user"></i>By Admin</span>
                                        <span class="ttm-meta-line entry-date"><i class="fa fa-calendar"></i><time class="entry-date published" datetime="2018-07-28T00:39:29+00:00">July 28, 2018</time></span>
                                        <span class="ttm-meta-line tags-links"><i class="fa fa-comment-o"></i>03</span>
                                    </div>
                                </div>
                                <div class="entry-content">
                                    <header class="entry-header">
                                        <h2 class="entry-title"><a href="blog-single.html">You Must Try 20 Secret Of Digital Transform</a></h2>
                                    </header>
                                    <div class="ttm-box-desc-text">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                                    </div> -->





                                    <!-- separator -->
                                    <!--<div class="separator">
                                        <div class="sep-line mt-25 mb-25"></div>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="ttm-blogbox-desc-footer">
                                        <div class="ttm-blogbox-footer-readmore d-inline-block">
                                            <a class="ttm-btn ttm-btn-size-sm ttm-btn-color-skincolor btn-inline ttm-icon-btn-right" href="#">Read More <i class="ti ti-angle-double-right"></i></a>
                                        </div>
                                        <div class="ttm-commentbox d-inline-block float-right">
                                            <span><i class="fa fa-comments"></i>2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>--><!-- ttm-blog-classic-content end -->
                        <!--</article>-->
                        <!-- ttm-service-single-content-are end -->
                        <!-- ttm-service-single-content-are -->
                        <!--<article class="post ttm-blog-classic clearfix">-->
                            <!-- post-featured-wrapper -->
                            <!--<div class="ttm-post-featured-wrapper ttm-featured-wrapper">
                                <div class="ttm-post-featured">
                                    <img class="img-fluid" src="images/post-03.jpg" alt="post-03">
                                </div>
                            </div>--><!-- post-featured-wrapper end -->
                            <!-- ttm-blog-classic-content -->
                            <!--<div class="ttm-blog-classic-content">
                                <div class="ttm-post-entry-header">
                                    <div class="post-meta">
                                        <span class="ttm-meta-line byline"><i class="fa fa-user"></i>By Admin</span>
                                        <span class="ttm-meta-line entry-date"><i class="fa fa-calendar"></i><time class="entry-date published" datetime="2018-07-28T00:39:29+00:00">July 28, 2018</time></span>
                                        <span class="ttm-meta-line tags-links"><i class="fa fa-comment-o"></i>03</span>
                                    </div>
                                </div>
                                <div class="entry-content">
                                    <header class="entry-header">
                                        <h2 class="entry-title"><a href="blog-single.html">10 PHP Frameworks You Need To Use Anywhere</a></h2>
                                    </header>
                                    <div class="ttm-box-desc-text">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="separator">
                                        <div class="sep-line mt-25 mb-25"></div>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="ttm-blogbox-desc-footer">
                                        <div class="ttm-blogbox-footer-readmore d-inline-block">
                                            <a class="ttm-btn ttm-btn-size-sm ttm-btn-color-skincolor btn-inline ttm-icon-btn-right" href="#">Read More <i class="ti ti-angle-double-right"></i></a>
                                        </div>
                                        <div class="ttm-commentbox d-inline-block float-right">
                                            <span><i class="fa fa-comments"></i>2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>--><!-- ttm-blog-classic-content end -->
                       <!-- </article>-->
                        <!-- ttm-service-single-content-are end -->
                        <!-- ttm-service-single-content-are -->
                         <!-- <article class="post ttm-blog-classic clearfix">
                             post-featured-wrapper -->
                            <!--<div class="ttm-post-featured-wrapper ttm-featured-wrapper">
                                <div class="ttm-post-featured">
                                    <img class="img-fluid" src="images/post-04.jpg" alt="post-04">
                                </div>
                            </div>--><!-- post-featured-wrapper end -->
                            <!-- ttm-blog-classic-content -->
                            <!--<div class="ttm-blog-classic-content">
                                <div class="ttm-post-entry-header">
                                    <div class="post-meta">
                                        <span class="ttm-meta-line byline"><i class="fa fa-user"></i>By Admin</span>
                                        <span class="ttm-meta-line entry-date"><i class="fa fa-calendar"></i><time class="entry-date published" datetime="2018-07-28T00:39:29+00:00">July 28, 2018</time></span>
                                        <span class="ttm-meta-line tags-links"><i class="fa fa-comment-o"></i>03</span>
                                    </div>
                                </div>
                                <div class="entry-content">
                                    <header class="entry-header">
                                        <h2 class="entry-title"><a href="blog-single.html">Digital Conference Of IT Tech Events in 2022</a></h2>
                                    </header>
                                    <div class="ttm-box-desc-text">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="separator">
                                        <div class="sep-line mt-25 mb-25"></div>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="ttm-blogbox-desc-footer">
                                        <div class="ttm-blogbox-footer-readmore d-inline-block">
                                            <a class="ttm-btn ttm-btn-size-sm ttm-btn-color-skincolor btn-inline ttm-icon-btn-right" href="#">Read More <i class="ti ti-angle-double-right"></i></a>
                                        </div>
                                        <div class="ttm-commentbox d-inline-block float-right">
                                            <span><i class="fa fa-comments"></i>2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>--><!-- ttm-blog-classic-content end -->
                        <!--</article>-->
                        <!-- ttm-service-single-content-are end -->
                        <!-- ttm-service-single-content-are -->
                        <!-- <article class="post ttm-blog-classic clearfix">-->
                            <!-- post-featured-wrapper -->
                            <!--<div class="ttm-post-featured-wrapper ttm-featured-wrapper">
                                <div class="ttm-post-featured">
                                    <img class="img-fluid" src="images/post-05.jpg" alt="post-05">
                                </div>
                            </div>--><!-- post-featured-wrapper end -->
                            <!-- ttm-blog-classic-content -->
                            <!--<div class="ttm-blog-classic-content">
                                <div class="ttm-post-entry-header">
                                    <div class="post-meta">
                                        <span class="ttm-meta-line byline"><i class="fa fa-user"></i>By Admin</span>
                                        <span class="ttm-meta-line entry-date"><i class="fa fa-calendar"></i><time class="entry-date published" datetime="2018-07-28T00:39:29+00:00">July 28, 2018</time></span>
                                        <span class="ttm-meta-line tags-links"><i class="fa fa-comment-o"></i>03</span>
                                    </div>
                                </div>
                                <div class="entry-content">
                                    <header class="entry-header">
                                        <h2 class="entry-title"><a href="blog-single.html">Where And How To Watch Live Stream Today</a></h2>
                                    </header>
                                    <div class="ttm-box-desc-text">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="separator">
                                        <div class="sep-line mt-25 mb-25"></div>
                                    </div>-->
                                    <!-- separator -->
                                    <!--<div class="ttm-blogbox-desc-footer">
                                        <div class="ttm-blogbox-footer-readmore d-inline-block">
                                            <a class="ttm-btn ttm-btn-size-sm ttm-btn-color-skincolor btn-inline ttm-icon-btn-right" href="#">Read More <i class="ti ti-angle-double-right"></i></a>
                                        </div>
                                        <div class="ttm-commentbox d-inline-block float-right">
                                            <span><i class="fa fa-comments"></i>2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>-->

                        <!-- ttm-service-single-content-are end -->
                        <!--<div class="row">
                            <div class="col-md-12 text-center">
                                <div class="ttm-pagination">
                                    <span class="page-numbers current">1</span>
                                    <a class="page-numbers" href="#">2</a>
                                    <a class="next page-numbers" href="#"><i class="ti ti-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>-->

                    <!-- <div class="col-lg-4 widget-area">
                        <aside class="widget widget-search">
                            <form role="search" method="get" class="search-form  box-shadow" action="#">
                                <div class="form-group">
                                    <input name="search" type="text" class="form-control bg-white" placeholder="Search....">
                                    <i class="fa fa-search" style="    border-color: #2d4a8a !important;color: #fff;"></i>
                                </div>
                            </form>
                        </aside>
                        <aside class="widget widget-categories">
                            <h3 class="widget-title">Services</h3>
                            <ul>
                                <li><a href="#">FIRE SAFETY</a></li>
                                <li><a href="#">Security  Surveillance</a></li>
                                <li><a href="#">Building Automation & Energy</a></li>
                                <li><a href="#">IT and Other Services</a></li>
                                <li><a href="#">Utility and Electrical</a></li>
                                <li><a href="#">Audit and Training</a></li>
                                
                            </ul>
                        </aside>
                        <aside class="widget post-widget">
                            <h3 class="widget-title">Latest News</h3>
                            <ul class="widget-post ttm-recent-post-list" style="padding:0px;">
                                <li>
                                    <a href="single-blog.html"><img src="images/01.jpg" alt="post-img"></a>
                                    <a href="single-blog.html">Define World Best IT Solution Technology</a>
                                    <span class="post-date"><i class="fa fa-calendar"></i>May 01, 2022</span>
                                </li>
                                <li>
                                    <a href="single-blog.html"><img src="images/02.jpg" alt="post-img"></a>
                                    <a href="single-blog.html">You Must Try 20 Secret Of Digital Transform</a>
                                    <span class="post-date"><i class="fa fa-calendar"></i>May 03, 2022</span>
                                </li>
                                <li>
                                    <a href="single-blog.html"><img src="images/03.jpg" alt="post-img"></a>
                                    <a href="single-blog.html">10 PHP Frameworks You Need To Use Anywhere</a>
                                    <span class="post-date"><i class="fa fa-calendar"></i>May 05, 2022</span>
                                </li>
                            </ul>
                        </aside>
                        <aside class="widget widget widget_media_gallery">
                            <h3 class="widget-title">Gallery</h3>
                            <div class="">
                                <div class="gallery-item">
                                    <img src="images/11.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/12.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/13.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/14.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/15.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/16.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/17.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/18.jpg" class="img-fluid" alt="blog-img">
                                </div>
                                <div class="gallery-item">
                                    <img src="images/19.jpg" class="img-fluid" alt="blog-img">
                                </div>
                            </div>
                        </aside>
                        <aside class="widget tagcloud-widget">
                            <h3 class="widget-title">Tags</h3>
                            <div class="tagcloud">
                                <a href="#" class="tag-cloud-link">Business</a>
                                <a href="#" class="tag-cloud-link">Consult</a>
                                <a href="#" class="tag-cloud-link">Cyber</a>
                                <a href="#" class="tag-cloud-link">Data</a>
                                <a href="#" class="tag-cloud-link">Design</a>
                                <a href="#" class="tag-cloud-link">IT-Services</a>
                                <a href="#" class="tag-cloud-link">IT-Solution</a>
                                <a href="#" class="tag-cloud-link">Marketing</a>
                                <a href="#" class="tag-cloud-link">Object</a>
                                <a href="#" class="tag-cloud-link">Solution</a>
                            </div>
                        </aside>
                        <aside class="widget widget-categories">
                            <h3 class="widget-title">Archives</h3>
                            <ul>
                                <li><a href="#">October 2022</a></li>
                                <li><a href="#">August 2022</a></li>
                                <li><a href="#">July 2022</a></li>
                                <li><a href="#">June 2022</a></li>
                            </ul>
                        </aside>
                    </div> -->
                </div><!-- row end -->
            </div>
        </div>
        <!-- sidebar end -->
    </div>

</div><!--site-main end-->
    <!-- end our happy customer -->
    <!-- end event gallery -->
@endsection