<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Masonry"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $title = "Masonry"; $subtitle = "Plugins"; include('./partials/page-title.php'); ?>

                    <div class="row" data-masonry='{"percentPosition": true }'>
                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <!-- Card Body -->
                                <div class="card-body">
                                    <!-- Title -->
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Mastering Figma: 7 Pro Tips for Better UI Design</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Unlock advanced techniques in Figma that can speed up your workflow and help you create pixel-perfect designs every time.</p>

                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">Figma</a>
                                        <a href="#!" class="badge badge-label badge-default">UX</a>
                                        <a href="#!" class="badge badge-label badge-default">Tips</a>
                                    </div>
                                </div>

                                <!-- Card footer -->
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-6.jpg" alt="avatar-6" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Emma Blake</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <!-- Card Body -->
                                <div class="card-body">
                                    <blockquote class="blockquote">
                                        <p>A well-known quote, contained in a blockquote element.</p>
                                    </blockquote>
                                    <figcaption class="blockquote-footer mb-0 text-muted">
                                        Someone famous in
                                        <cite title="Source Title">Source Title</cite>
                                    </figcaption>
                                </div>

                                <!-- Card footer -->
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-7.jpg" alt="avatar-7" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Liam Carter</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <!-- Card Body -->
                                <div class="card-body">
                                    <!-- Title -->
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Understanding CSS Grid: A Complete Beginner’s Guide</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Explore the fundamentals of CSS Grid layout and learn how to create modern.</p>

                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">CSS</a>
                                        <a href="#!" class="badge badge-label badge-default">Frontend</a>
                                        <a href="#!" class="badge badge-label badge-default">Web Design</a>
                                    </div>
                                </div>

                                <!-- Card footer -->
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-8.jpg" alt="avatar-8" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Sophia Turner</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">The Future of AI in Everyday Apps</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Artificial Intelligence is reshaping how we interact with software. From smart assistants to predictive analytics, here’s what’s coming next.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">AI</a>
                                        <a href="#!" class="badge badge-label badge-default">Technology</a>
                                        <a href="#!" class="badge badge-label badge-default">Innovation</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-9.jpg" alt="avatar-9" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Noah Evans</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Top 10 JavaScript Tricks You Didn’t Know</a>
                                    </h6>
                                    <p class="mb-3 text-muted">JavaScript has plenty of hidden gems. This list goes beyond the basics, giving you shortcuts and lesser-known features to write cleaner code.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">JavaScript</a>
                                        <a href="#!" class="badge badge-label badge-default">Tips</a>
                                        <a href="#!" class="badge badge-label badge-default">Coding</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-10.jpg" alt="avatar-10" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Olivia Scott</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Why Minimalism Works in Web Design</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Sometimes, less is more. Discover how minimalistic design choices improve usability, reduce clutter, and create stronger focus for users across digital experiences.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">Design</a>
                                        <a href="#!" class="badge badge-label badge-default">Minimalism</a>
                                        <a href="#!" class="badge badge-label badge-default">Trends</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-3.jpg" alt="avatar-11" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Ethan Brooks</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Getting Started with Tailwind CSS in 2025</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Tailwind continues to dominate utility-first styling. Learn how to set up your environment and build your first responsive components quickly.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">Tailwind</a>
                                        <a href="#!" class="badge badge-label badge-default">Frontend</a>
                                        <a href="#!" class="badge badge-label badge-default">Guide</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-2.jpg" alt="avatar-12" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Mia Johnson</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Dark Mode: Design Principles You Should Know</a>
                                    </h6>
                                    <p class="mb-3 text-muted">With dark mode becoming a standard feature, it’s important to understand contrast, accessibility, and design adjustments for user comfort.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">Dark Mode</a>
                                        <a href="#!" class="badge badge-label badge-default">UI</a>
                                        <a href="#!" class="badge badge-label badge-default">Accessibility</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-5.jpg" alt="avatar-13" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Lucas Reed</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Why Storytelling Matters in UX Writing</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Words shape user experiences. Good UX writing blends clarity with storytelling, ensuring users not only understand but enjoy every step.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">UX Writing</a>
                                        <a href="#!" class="badge badge-label badge-default">Content</a>
                                        <a href="#!" class="badge badge-label badge-default">Design</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-9.jpg" alt="avatar-14" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">Isabella Moore</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>

                        <div class="col-xl-3 col-md-6 mb-3">
                            <article class="card mb-0">
                                <div class="card-body">
                                    <h6 class="card-title fs-lg lh-base mb-2">
                                        <a href="#!" class="link-reset">Building Scalable Apps with Next.js</a>
                                    </h6>
                                    <p class="mb-3 text-muted">Next.js has quickly become the go-to framework for modern apps. Here’s how you can take advantage of its server-side rendering and API routes to build scalable projects.</p>
                                    <div>
                                        <a href="#!" class="badge badge-label badge-default">Next.js</a>
                                        <a href="#!" class="badge badge-label badge-default">Performance</a>
                                        <a href="#!" class="badge badge-label badge-default">Development</a>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent d-flex justify-content-between">
                                    <div class="d-flex justify-content-start align-items-center gap-2">
                                        <div class="avatar avatar-xs">
                                            <img src="assets/images/users/user-2.jpg" alt="avatar-15" class="img-fluid rounded-circle" />
                                        </div>
                                        <div>
                                            <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                <a href="#!" class="link-reset">James Bennett</a>
                                            </h5>
                                        </div>
                                    </div>
                                    <a class="link-primary fw-semibold" href="#!">
                                        Read more
                                        <i class="ti ti-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>
                    </div>
                    <!-- end row-->
                </div>
                <!-- end container-->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>

        <script src="assets/plugins/masonry/masonry.pkgd.min.js"></script>
    </body>
</html>
