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

<head>
    <%- include('../partials/head'); %>
        <link rel="stylesheet" href="/public/css/single-post.css">
</head>

<body>


    <div class="main">

        <header class="header header-section sticky-lg-top">
            <%- include('../partials/header'); %>
        </header>

        <div class="single-post-section container">
            <img class="rounded-3 my-3" src="/images/slider1.jpg" width="100%" height="400px" alt="post-banner">
            <div class="row ms-auto py-3">
                <h1 class="text-center py-3">Category Name</h1>
                <p class="border-bottom pb-2">Posts</p>
                <div class="category-posts d-flex pt-3">

                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">
                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>

                <div class="category-posts d-flex pt-5 ">

                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>



                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>


                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>


                <div class="category-posts d-flex pt-5 ">


                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>





                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>




                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>



                    <div class="col d-flex post-card ps-2">
                        <a href="" class="text-decoration-none text-dark">
                            <div class="position-relative">
                                <img src="/images/slider1.jpg" class="rounded w-100" height="100px" width="200px">

                                <div class="mt-2">
                                    <h6 class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing.</h6>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>


            </div>


        </div>




        <footer class="footer">
            <%- include('../partials/footer'); %>
        </footer>

    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"></script>
</body>

</html>