@extends('frontend.layouts.main')
@section('seo')
    <!-- SEO Title -->
    <title>Blogs Page</title>
@endsection
@section('page-title')
    Blogs
@endsection

@section('main-content')
    <!-- Blog area start here -->
    <section class="blog-single-area pt-120 pb-120">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-8 order-2 order-lg-1">
                    <div class="blog__item mb-30">
                        <div class="image">
                            <img src={{ url('frontend/images/blog/blog-single-image1.jpg') }} alt="image">
                            <span class="blog-tag">Education</span>
                        </div>
                        <div class="blog__content py-4 px-4">
                            <ul>
                                <li>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M14.5435 5.19275C14.5435 7.69093 12.4989 9.7355 10.0008 9.7355C7.50262 9.7355 5.45804 7.69093 5.45804 5.19275C5.45804 2.69457 7.50258 0.65 10.0008 0.65C12.4989 0.65 14.5435 2.69458 14.5435 5.19275Z"
                                            stroke="#2563eb" stroke-width="1.3" />
                                        <path
                                            d="M18.2644 14.6706C18.1052 14.9458 17.9241 15.2073 17.7169 15.4766L17.7168 15.4765L17.7089 15.4873C17.4203 15.8788 17.0845 16.2373 16.7294 16.5924C16.4326 16.8892 16.0932 17.186 15.7567 17.4385C14.0794 18.6911 12.0621 19.3499 9.97814 19.3499C7.89836 19.3499 5.88506 18.6938 4.20976 17.4461C3.84588 17.1504 3.51367 16.8792 3.22686 16.5924L3.2199 16.5854L3.21272 16.5787C2.85663 16.2436 2.54238 15.8877 2.24745 15.4874L2.24747 15.4873L2.24414 15.4829C2.06192 15.24 1.8732 14.9756 1.71919 14.7169C1.83618 14.4559 1.98455 14.1847 2.14521 13.9526L2.14533 13.9527L2.15284 13.9413C3.06984 12.5556 4.53705 11.6388 6.16642 11.4148L6.186 11.4121L6.20538 11.4082C6.23087 11.4031 6.29494 11.4117 6.34548 11.4496L6.34546 11.4496L6.34947 11.4525C7.41651 12.2401 8.68629 12.6453 10.0008 12.6453C11.3153 12.6453 12.5851 12.2401 13.6521 11.4525L13.6521 11.4525L13.6561 11.4496C13.6715 11.438 13.7403 11.408 13.8492 11.4167C15.4688 11.6435 16.9121 12.5568 17.8524 13.9468L17.8524 13.9469L17.8564 13.9526C18.0165 14.1839 18.1557 14.4231 18.2644 14.6706Z"
                                            stroke="#2563eb" stroke-width="1.3" />
                                    </svg>
                                    <a href={{ route('frontend-blogs-single', ['what-is-lorem-ipsum']) }}><span
                                            class="primary-hover transition">By
                                            Admin</span></a>
                                </li>
                                <li>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M6.66667 4.7915C6.325 4.7915 6.04167 4.50817 6.04167 4.1665V1.6665C6.04167 1.32484 6.325 1.0415 6.66667 1.0415C7.00833 1.0415 7.29167 1.32484 7.29167 1.6665V4.1665C7.29167 4.50817 7.00833 4.7915 6.66667 4.7915ZM13.3333 4.7915C12.9917 4.7915 12.7083 4.50817 12.7083 4.1665V1.6665C12.7083 1.32484 12.9917 1.0415 13.3333 1.0415C13.675 1.0415 13.9583 1.32484 13.9583 1.6665V4.1665C13.9583 4.50817 13.675 4.7915 13.3333 4.7915ZM7.08333 12.0832C6.975 12.0832 6.86667 12.0582 6.76667 12.0165C6.65833 11.9748 6.575 11.9165 6.49167 11.8415C6.34167 11.6832 6.25 11.4748 6.25 11.2498C6.25 11.1415 6.275 11.0332 6.31667 10.9332C6.35833 10.8332 6.41667 10.7415 6.49167 10.6582C6.575 10.5832 6.65833 10.5248 6.76667 10.4832C7.06667 10.3582 7.44167 10.4248 7.675 10.6582C7.825 10.8165 7.91667 11.0332 7.91667 11.2498C7.91667 11.2998 7.90833 11.3582 7.9 11.4165C7.89167 11.4665 7.875 11.5165 7.85 11.5665C7.83333 11.6165 7.80833 11.6665 7.775 11.7165C7.75 11.7582 7.70833 11.7998 7.675 11.8415C7.51667 11.9915 7.3 12.0832 7.08333 12.0832ZM10 12.0832C9.89167 12.0832 9.78333 12.0582 9.68333 12.0165C9.575 11.9748 9.49167 11.9165 9.40833 11.8415C9.25833 11.6832 9.16667 11.4748 9.16667 11.2498C9.16667 11.1415 9.19167 11.0332 9.23333 10.9332C9.275 10.8332 9.33333 10.7415 9.40833 10.6582C9.49167 10.5832 9.575 10.5248 9.68333 10.4832C9.98333 10.3498 10.3583 10.4248 10.5917 10.6582C10.7417 10.8165 10.8333 11.0332 10.8333 11.2498C10.8333 11.2998 10.825 11.3582 10.8167 11.4165C10.8083 11.4665 10.7917 11.5165 10.7667 11.5665C10.75 11.6165 10.725 11.6665 10.6917 11.7165C10.6667 11.7582 10.625 11.7998 10.5917 11.8415C10.4333 11.9915 10.2167 12.0832 10 12.0832ZM12.9167 12.0832C12.8083 12.0832 12.7 12.0582 12.6 12.0165C12.4917 11.9748 12.4083 11.9165 12.325 11.8415L12.225 11.7165C12.1934 11.6701 12.1682 11.6196 12.15 11.5665C12.1259 11.5193 12.1091 11.4687 12.1 11.4165C12.0917 11.3582 12.0833 11.2998 12.0833 11.2498C12.0833 11.0332 12.175 10.8165 12.325 10.6582C12.4083 10.5832 12.4917 10.5248 12.6 10.4832C12.9083 10.3498 13.275 10.4248 13.5083 10.6582C13.6583 10.8165 13.75 11.0332 13.75 11.2498C13.75 11.2998 13.7417 11.3582 13.7333 11.4165C13.725 11.4665 13.7083 11.5165 13.6833 11.5665C13.6667 11.6165 13.6417 11.6665 13.6083 11.7165C13.5833 11.7582 13.5417 11.7998 13.5083 11.8415C13.35 11.9915 13.1333 12.0832 12.9167 12.0832ZM7.08333 14.9998C6.975 14.9998 6.86667 14.9748 6.76667 14.9332C6.66667 14.8915 6.575 14.8332 6.49167 14.7582C6.34167 14.5998 6.25 14.3832 6.25 14.1665C6.25 14.0582 6.275 13.9498 6.31667 13.8498C6.35833 13.7415 6.41667 13.6498 6.49167 13.5748C6.8 13.2665 7.36667 13.2665 7.675 13.5748C7.825 13.7332 7.91667 13.9498 7.91667 14.1665C7.91667 14.3832 7.825 14.5998 7.675 14.7582C7.51667 14.9082 7.3 14.9998 7.08333 14.9998ZM10 14.9998C9.78333 14.9998 9.56667 14.9082 9.40833 14.7582C9.25833 14.5998 9.16667 14.3832 9.16667 14.1665C9.16667 14.0582 9.19167 13.9498 9.23333 13.8498C9.275 13.7415 9.33333 13.6498 9.40833 13.5748C9.71667 13.2665 10.2833 13.2665 10.5917 13.5748C10.6667 13.6498 10.725 13.7415 10.7667 13.8498C10.8083 13.9498 10.8333 14.0582 10.8333 14.1665C10.8333 14.3832 10.7417 14.5998 10.5917 14.7582C10.4333 14.9082 10.2167 14.9998 10 14.9998ZM12.9167 14.9998C12.7 14.9998 12.4833 14.9082 12.325 14.7582C12.2479 14.6799 12.1882 14.5862 12.15 14.4832C12.1083 14.3832 12.0833 14.2748 12.0833 14.1665C12.0833 14.0582 12.1083 13.9498 12.15 13.8498C12.1917 13.7415 12.25 13.6498 12.325 13.5748C12.5167 13.3832 12.8083 13.2915 13.075 13.3498C13.1333 13.3582 13.1833 13.3748 13.2333 13.3998C13.2833 13.4165 13.3333 13.4415 13.3833 13.4748C13.425 13.4998 13.4667 13.5415 13.5083 13.5748C13.6583 13.7332 13.75 13.9498 13.75 14.1665C13.75 14.3832 13.6583 14.5998 13.5083 14.7582C13.35 14.9082 13.1333 14.9998 12.9167 14.9998ZM17.0833 8.19984H2.91667C2.575 8.19984 2.29167 7.9165 2.29167 7.57484C2.29167 7.23317 2.575 6.94984 2.91667 6.94984H17.0833C17.425 6.94984 17.7083 7.23317 17.7083 7.57484C17.7083 7.9165 17.425 8.19984 17.0833 8.19984Z"
                                            fill="#2563eb" />
                                        <path
                                            d="M13.3333 18.9582H6.66667C3.625 18.9582 1.875 17.2082 1.875 14.1665V7.08317C1.875 4.0415 3.625 2.2915 6.66667 2.2915H13.3333C16.375 2.2915 18.125 4.0415 18.125 7.08317V14.1665C18.125 17.2082 16.375 18.9582 13.3333 18.9582ZM6.66667 3.5415C4.28333 3.5415 3.125 4.69984 3.125 7.08317V14.1665C3.125 16.5498 4.28333 17.7082 6.66667 17.7082H13.3333C15.7167 17.7082 16.875 16.5498 16.875 14.1665V7.08317C16.875 4.69984 15.7167 3.5415 13.3333 3.5415H6.66667Z"
                                            fill="#2563eb" />
                                    </svg>
                                    <span>22, Nov 2023</span>
                                </li>
                            </ul>
                            <h4 class="mt-20 mb-20"><a href={{ route('frontend-blogs-single', ['what-is-lorem-ipsum']) }}
                                    class="primary-hover">What is Lorem Ipsum?</a></h4>
                            <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 1966, when designers at Letraset and
                                James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero
                                translation and scrambled it to make dummy text for Letraset's Body Type sheets.</p>
                            <a class="mt-4" href={{ route('frontend-blogs-single', ['what-is-lorem-ipsum']) }}><span
                                    class="read-more fw-bold transition">Read
                                    More <i class="fa-solid fa-arrow-right ms-1"></i></span></a>
                        </div>
                    </div>


                    <div class="pegi justify-content-center mt-80">
                        <a href="#0"><i class="fa-solid fa-arrow-left-long primary-color transition"></i></a>
                        <a href="#0" class="active">01</a>
                        <a href="#0">02</a>
                        <a href="#0">03</a>
                        <a href="#0"><i class="fa-solid fa-arrow-right-long primary-color transition"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 order-1 order-lg-2">
                    <div class="blog-single__right-item">
                        <div class="item shadow mb-30">
                            <h5 class="title">Search</h5>
                            <div class="serach-bar">
                                <input type="text" placeholder="Search here">
                                <button><i class="fa-regular fa-magnifying-glass"></i></button>
                            </div>
                        </div>
                        <div class="item shadow mb-30">
                            <h5 class="title">Category</h5>
                            <ul class="category">
                                <li><a href="#0">Kids In Africa</a> <span>(2)</span></li>
                                <li><a href="#0">Medical & Health</a> <span>(5)</span></li>
                                <li><a href="#0">Donation</a> <span>(7)</span></li>
                                <li><a href="#0">Water & Foods</a> <span>(8)</span></li>
                            </ul>
                        </div>
                        <div class="item shadow mb-30">
                            <h5 class="title">Recent Post</h5>
                            <ul class="single-post">
                                <li>
                                    <img src={{ url('frontend/images/blog/post-sm1.png') }} alt="image">
                                    <div class="con">
                                        <h6><a href={{ route('frontend-blogs-single', ['what-is-lorem-ipsum']) }}
                                                class="primary-hover">More with elements
                                                all for one low</a></h6>
                                        <span>20 Nov, 2023</span>
                                    </div>
                                </li>
                                <li>
                                    <img src={{ url('frontend/images/blog/post-sm2.png') }} alt="image">
                                    <div class="con">
                                        <h6><a href={{ route('frontend-blogs-single', ['what-is-lorem-ipsum']) }}
                                                class="primary-hover">Rebecca’s Charity Album
                                                A Brilliant Display</a></h6>
                                        <span>20 Nov, 2023</span>
                                    </div>
                                </li>
                                <li>
                                    <img src={{ url('frontend/images/blog/post-sm3.png') }} alt="image">
                                    <div class="con">
                                        <h6><a href={{ route('frontend-blogs-single', ['what-is-lorem-ipsum']) }}
                                                class="primary-hover">Provide Healthy Meals
                                                to an Impoverished</a></h6>
                                        <span>20 Nov, 2023</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="item shadow mb-30">
                            <h5 class="title">Tags</h5>
                            <div class="tags">
                                <a href="#0">Save Water</a>
                                <a href="#0">Kids</a>
                                <a href="#0">Charity</a>
                                <a href="#0">Donation</a>
                                <a href="#0">Kids Educations</a>
                                <a href="#0">Fundraising</a>
                                <a href="#0">Kids Foods</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Blog area end here -->
@endsection