OluAmeyeMain/app/Views/news_section.php

<!-- Start Blog -->
<section class="lqd-section blog pt-90 pb-60">
    <div class="container">
        <div class="row items-center">
            <div class="col col-12 col-md-7">
                <div class="flex flex-wrap items-center">
                    <div class="ld-fancy-heading relative sm:w-full">
                        <h2 class="ld-fh-element inline-block relative text-74 mr-0/25em mb-0">News</h2>
                    </div>
                    <span class="text-14 font-bold uppercase leading-1em tracking-1 text-black border-2 rounded-100 btn py-0/6em px-1em mr-10">
											<span class="btn-txt" data-text="Latest news">Latest news</span>
										</span>
                    <span class="text-14 font-bold uppercase leading-1em tracking-1 text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-35 h-35 bg-accent border-none p-0 w-35 h-35 ">
											<span class="btn-icon w-1em">
												<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
													<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
												</svg>
											</span>
										</span>
                </div>
            </div>
            <div class="col col-12 col-md-5">
                <div class="ld-fancy-heading relative">
                    <p class="ld-fh-element mb-0/5em inline-block relative">Latest news in the office. Our design services starts and ends with a best-in-class experience strategy that builds brands. </p>
                </div>
            </div>
            <div class="col col-12 mt-15 mb-30">
                <div class="flex flex-wrap justify-between">
                    <div class="ld-fancy-heading relative">
                        <p class="ld-fh-element mb-0/5em inline-block relative text-12 uppercase tracking-1">Latest posts</p>
                    </div>
                    <div class="ld-fancy-heading relative text-end">
                        <p class="ld-fh-element mb-0/5em inline-block relative text-12 uppercase tracking-1">09</p>
                    </div>
                    <div class="divider w-full pb-5">
                        <span class="w-full flex border-bottom border-black"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row -mr-10 -ml-10">
            <div class="col col-12 col-md-6 col-lg-4 px-10 mb-30 flex flex-col">
                <article class="lqd-lp relative lqd-lp lqd-lp-style-21 lqd-lp-style-21-alt flex flex-wrap text-start post type-post status-publish format-standard has-post-thumbnail hentry category-blog-single tag-beauty tag-travel bg-white border-1 border-black-50">
                    <div class="lqd-lp-img w-full relative overflow-hidden mb-1/5rem">
                        <figure class="lqd-overlay flex">
                            <img class="w-full" width="700" height="450" src="./assets/images/demo/asymmetric-9/blog/blog-img-3-700x450.jpg" alt="nvestment trend monitor">
                            <div class="lqd-overlay flex items-center justify-center">
                                <i class="lqd-icn-ess icon-md-arrow-forward"></i>
                            </div>
                        </figure>
                    </div>
                    <div class="lqd-lp-contents w-full flex flex-col">
                        <header class="lqd-lp-header">
                            <div class="lqd-lp-meta flex items-center justify-between mb-1/5em">
                                <time class="lqd-lp-date inline-flex items-center" datetime="2021-06-02T13:40:12+00:00">2 years ago</time>
                            </div>
                            <h2 class="lqd-lp-title mb-0/75em h5">
                                <a href="#">Investment trend monitor: Top trends in 2023</a>
                            </h2>
                        </header>
                        <div class="lqd-lp-excerpt">
                            <p class="text-12 leading-16">As the complexity of buildings to increase, the field of architecture became</p>
                        </div>
                    </div>
                    <a href="#" class="lqd-lp-overlay-link lqd-overlay flex z-2"></a>
                </article>
            </div>
            <div class="col col-12 col-md-6 col-lg-4 px-10 mb-30 flex flex-col">
                <article class="lqd-lp relative lqd-lp lqd-lp-style-21 lqd-lp-style-21-alt flex flex-wrap text-start post type-post status-publish format-standard has-post-thumbnail hentry category-blog-single tag-beauty tag-travel bg-white border-1 border-black-50">
                    <div class="lqd-lp-img w-full relative overflow-hidden mb-1/5rem">
                        <figure class="lqd-overlay flex">
                            <img class="w-full" width="700" height="450" src="./assets/images/demo/asymmetric-9/blog/blog-img-2-700x450.jpg" alt="Free advertising for your online business">
                            <div class="lqd-overlay flex items-center justify-center">
                                <i class="lqd-icn-ess icon-md-arrow-forward"></i>
                            </div>
                        </figure>
                    </div>
                    <div class="lqd-lp-contents w-full flex flex-col">
                        <header class="lqd-lp-header">
                            <div class="lqd-lp-meta flex items-center justify-between mb-1/5em">
                                <time class="lqd-lp-date inline-flex items-center" datetime="2020-09-24T06:00:29+00:00">2 years ago</time>
                            </div>
                            <h2 class="lqd-lp-title mb-0/75em h5">
                                <a href="#">Free advertising for your online business</a>
                            </h2>
                        </header>
                        <div class="lqd-lp-excerpt">
                            <p class="text-12 leading-16">Since the 1980s, as the complexity of buildings began to increase, the field of </p>
                        </div>
                    </div>
                    <a href="#" class="lqd-lp-overlay-link lqd-overlay flex z-2"></a>
                </article>
            </div>
            <div class="col col-12 col-md-6 col-lg-4 px-10 mb-30 flex flex-col">
                <article class="lqd-lp relative lqd-lp lqd-lp-style-21 lqd-lp-style-21-alt flex flex-wrap text-start post type-post status-publish format-standard has-post-thumbnail hentry category-blog-single tag-spain tag-travel bg-white border-1 border-black-50">
                    <div class="lqd-lp-img w-full relative overflow-hidden mb-1/5rem">
                        <figure class="lqd-overlay flex">
                            <img class="w-full" width="700" height="450" src="./assets/images/demo/asymmetric-9/blog/blog-img-1-700x450.jpg" alt="Business meeting 2023 in San Francisco">
                            <div class="lqd-overlay flex items-center justify-center">
                                <i class="lqd-icn-ess icon-md-arrow-forward"></i>
                            </div>
                        </figure>
                    </div>
                    <div class="lqd-lp-contents w-full flex flex-col">
                        <header class="lqd-lp-header">
                            <div class="lqd-lp-meta flex items-center justify-between mb-1/5em">
                                <time class="lqd-lp-date inline-flex items-center" datetime="2020-09-23T12:14:11+00:00">2 years ago</time>
                            </div>
                            <h2 class="lqd-lp-title mb-0/75em h5">
                                <a href="#">Business meeting 2023 in San Francisco</a>
                            </h2>
                        </header>
                        <div class="lqd-lp-excerpt">
                            <p class="text-12 leading-16">Through a unique combination of engineering, construction and design disciplines and </p>
                        </div>
                    </div>
                    <a href="#" class="lqd-lp-overlay-link lqd-overlay flex z-2"></a>
                </article>
            </div>
        </div>
    </div>
</section>
<!-- End Blog -->