<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cateagory</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./responsive.css">
    <link rel="stylesheet" href="./cateagory.css">
</head>

<body>
    <!-- Header -->
     <?php
include 'header-cateagory.php';
?>
    <div class="cateagory-body-section">
        <div class="cateagory-top">
            <p class="cateagory-head"><a href="#">Business</a></p>
            <p class="cateagory-para"><a href="#">Justo fabulas singulis at pri, saepe luptatum mei an. Duo idque solet
                    scribentur
                    eu, natum iudico labore te eos, no utinam tibique nam. Viderer labitur nostrud et per,
                    disputationi</a></p>
        </div>
        <div class="h-line"></div>

        <div class="cateagory-two-section">
            <div class="cateagory-two-section-grid l">
                <a href="./detail.html">
                    <div class="cateagory-img-wrapper">
                        <img src="./images/ben-iwara-fn0N_pq0TBk-unsplash-480x384.webp" class="cateagory-main-img"
                            alt="Category Image">
                    </div>
                </a>
            </div>

            <div class="cateagory-two-section-grid r">
                <div class="cateagory-two-section-grid-content">
                    <p class="mini-title-bl"><a href="#">Business</a></p>
                    <p class="main-head"><a href="./detail.html">I’m a high school graduate</a></p>
                    <p class="cateagory-para b"><a href="./detail.html">Quo natum nemore putant in, his te case habemus.
                            Nulla detraxit
                            explicari in vim. Id eam magna omnesque. Per cu dicat urbanitas, sit postulant disputationi
                            ea.
                            Duo ad graeci tamquam interesset, putant iuvaret vel ad. Id stet malis tritani est.</a></p>
                    <p class="category-date"><a href="#">January 8, 2025</a></p>
                </div>
            </div>
        </div>

        <div class="h-line"></div>

        <div class="cateagory-grid-section">
            <div class="cateagory-grid-section-l">

                <!-- Repeated posts -->
                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/ahmed-f_0VTKHexk8-unsplash-480x384.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Business</a></p>
                        <p class="main-head b"><a href="#">My entrance exam was on a book of matches</a></p>
                        <p class="main-para d"><a href="#">Ei mei scripta intellegat. Verear voluptaria eam at, consul
                                putent eu
                                vel. Pro saepe maluisset ne, audire maiorum forensibus eos et. Diceret detraxit vis at.
                                Eum
                                et idque tollit assentior, ullum soleat usu id.</a></p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

                <div class="h-line"></div>

                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/getty-images-7gvZfy19sLY-unsplash-480x384.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Interview</a></p>
                        <p class="main-head b"><a href="#">My name is Rhoda Morgenstern</a></p>
                        <p class="main-para d"><a href="#">Lorem ipsum dolor sit amet, ei officiis assueverit pri, duo
                                volumus
                                commune molestiae ad, cum at clita latine. Tation nominavi quo id. An est possit
                                adipiscing,
                                error tation qualisque vel te. Stet interpretaris nec id.</a></p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

                <div class="h-line"></div>

                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/alex-shuper-EQ8MnlJU1yg-unsplash-480x384.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Business</a></p>
                        <p class="main-head b"><a href="#">Tonight what heights we’ll hit, on with the show this is
                                it</a></p>
                        <p class="main-para d"><a href="#">Labores incorrupte vim an. Id augue populo alienum usu, has
                                harum
                                consectetuer ne, ne clita fuisset dignissim quo. Semper oportere assueverit eum eu. Ex
                                facilisi dignissim vituperata mei, ad noluisse assueverit est. Nam no dico quas
                                delectus.</a></p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

                <div class="h-line"></div>

                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/bottles.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Business</a></p>
                        <p class="main-head b"><a href="#">Spotify PodCast Post</a></p>
                        <p class="main-para d"><a href="#">Usu tantas omittantur ut, per te modo appetere senserit. Ei
                                ius aperiam
                                tincidunt, ea sit natum iisque repudiandae. Ea nec wisi facete. Ex hinc rebum omittam
                                his.
                                Enim dolore meliore ea mea. Ius ei minim possit intellegat, an sea ornatus appetere.</a>
                        </p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

                <div class="h-line"></div>

                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/flight.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Business</a></p>
                        <p class="main-head b"><a href="#">Now I’m back in Manhattan</a></p>
                        <p class="main-para d"><a href="#">Justo fabulas singulis at pri, saepe luptatum mei an. Duo
                                idque solet
                                scribentur eu, natum iudico labore te eos, no utinam tibique nam. Viderer labitur
                                nostrud et
                                per, disputationi mediocritatem necessitatibus ex eam. Verterem qualisque no per. Id
                                oratio
                                veritus antiopam duo.</a></p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

                <div class="h-line"></div>

                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/men.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Business</a></p>
                        <p class="main-head b"><a href="#">There’s gloom and doom when things go boom in Dexter’s
                                lab</a></p>
                        <p class="main-para d"><a href="#">Ei mei scripta intellegat. Verear voluptaria eam at, consul
                                putent eu
                                vel. Pro saepe maluisset ne, audire maiorum forensibus eos et. Diceret detraxit vis at.
                                Eum
                                et idque tollit assentior, ullum soleat usu id.</a></p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

                <div class="h-line"></div>

                <div class="bottom-mid-section">
                    <div class="category-mid-section-r">
                        <div class="three-gird-img-wrapper">
                            <img src="./images/factory.webp" class="main-img">
                        </div>
                    </div>
                    <div class="category-mid-section-l">
                        <p class="mini-title-bl b"><a href="#">Business</a></p>
                        <p class="main-head b"><a href="#">Tell me yours, and I’ll keep it</a></p>
                        <p class="main-para d"><a href="#">Ei mei scripta intellegat. Verear voluptaria eam at, consul
                                putent eu
                                vel. Pro saepe maluisset ne, audire maiorum forensibus eos et. Diceret detraxit vis at.
                                Eum
                                et idque tollit assentior, ullum soleat usu id.</a></p>
                        <p class="date"><a href="#">January 8, 2025</a></p>
                    </div>
                </div>

            </div>

            <div class="v-line"></div>

            <div class="cateagory-grid-section-r">
                <div class="cateagory-bottom-side">
                    <div class="bottom-grid-img-wrapper">
                        <img src="./images/avatar-caped.webp" class="main-img">
                    </div>
                    <div class="grid-header-section">
                        <p class="top-section-r-head"><a href="#">About us</a></p>
                    </div>
                    <div class="h-line"></div>
                    <p class="main-para d"><a href="#">Quo natum nemore putant in, his te case habemus. Nulla detraxit
                            explicari in
                            vim. Id eam magna omnesque. Per cu dicat urbanitas, sit postulant disputationi ea. Duo ad
                            graeci
                            tamquam interesset, putant iuvaret vel ad. Id stet malis tritani est.</a></p>

                    <div class="social-icon-section">
                        <a href="#"><img src="./images/facebook-app-symbol.webp" class="social-icon"></a>
                        <a href="#"><img src="./images/twitter.webp" class="social-icon"></a>
                        <a href="#"><img src="./images/instagram.webp" class="social-icon"></a>
                        <a href="#"><img src="./images/threads.webp" class="social-icon"></a>
                    </div>

                    <div class="categories">
                        <h3><a href="#">CATEGORIES</a></h3>
                        <div class="h-line"></div>
                        <ul>
                            <li><a href="#">Books</a> <span>(3)</span></li>
                            <div class="h-line"></div>
                            <li><a href="#">Business</a> <span>(8)</span></li>
                            <div class="h-line"></div>
                            <li><a href="#">Interview</a> <span>(4)</span></li>
                            <div class="h-line"></div>
                            <li><a href="#">Opinion</a> <span>(6)</span></li>
                            <div class="h-line"></div>
                            <li><a href="#">Politics</a> <span>(5)</span></li>
                            <div class="h-line"></div>
                            <li><a href="#">Travel</a> <span>(7)</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>








    <!-- Footer -->
    <footer class="footer">
        <div class="footer-top">
            <div class="footer-top-section">
                <div class="footer-top-left">
                    <button>Subscribe</button>
                </div>
                <div class="footer-top-center">
                    <a href="#">About</a>
                    <a href="#">Privacy</a>
                    <a href="#">Help</a>
                    <a href="#">Terms</a>
                    <a href="#">Contact</a>
                </div>
                <div class="footer-top-right">
                    Powered by <a href="#">The Fox</a> theme.
                </div>
            </div>
        </div>

        <div class="footer-middle">
            <h2><a href="#">THE HAGUE</a></h2>
            <p><a href="#">©2025 - All rights reserved. Published with WordPress & The Fox theme</a></p>
        </div>

        <div class="footer-bottom">
            <a href="#"><img src="./images/facebook-app-symbol.webp" class="footer-social-icon"></a>
            <a href="#"><img src="./images/twitter.webp" class="footer-social-icon"></a>
            <a href="#"><img src="./images/instagram.webp" class="footer-social-icon"></a>
            <a href="#"><img src="./images/threads.webp" class="footer-social-icon"></a>
        </div>
    </footer>


    <script src="./script.js"></script>

</body>

</html>