allblog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="./dist/css/app.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

<!-- header section start -->
<header class="ad-couture-header">
    <div class="container-fluid">
        <div class="header-main">
            <div class="logo-side">
                <a href="#"><img src="./src/images/ad-couture-final-logo.png" alt="Site Logo"  class="img-fluid"/></a>
            </div>
            <div class="ad-couture-menu-side">
                <ul>
                    <li>
                        <a href="#">About Us</a>
                    </li>
                    <li>
                        <a href="#">Gallery</a>
                    </li>
                    <li>
                        <a href="#">Location</a>
                    </li>
                    <li>
                        <a href="#">Fabrics</a>
                    </li>
                    <li>
                        <a href="#">Support</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="search-bar">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </div>
        </div>
    </div>
</header>
<!-- header section end -->

<!-- top-bar slide start -->
<div class="top-bar">
    <div class="slides">
        <div class="slide">
            <p class="top-bar-text">Get FREE shipping on all orders over 499₹</p>
        </div>
        <div class="slide">
            <p class="top-bar-text">Get FREE shipping on all orders over 499₹</p>
        </div>
    </div>
</div>
<!-- top-bar slide end -->

<main class="main-content">
    <section class="page-hero-section">
        <div class="img-bg" style="background-image: url(./src/images/banner.jpg);">
            <h1 class="hero-heading">Latest Blogs</h1>
        </div>
    </section>
    <section class="blog-section">
        <div class="container">
            <div class="row gy-5 justify-content-center">
                <div class="col-12 col-lg-4 col-md-6">
                    <div class="blog-text">
                        <div class="card h-100" >
                            <div class="img-container">
                                <img class="card-img-top" src="./src/images/blog-image-first.jpg" alt="Card image">
                            </div>
                            <div class="card-body">
                                <p class="card-date">Dec 15, 2021</p>
                                <h4 class="card-heading-text">Perfect Stretch Crepes in the Lastest Trend Colours</h4>
                                <p class="card-text">These new plain stretch crepes come in all the new season shades. See my top sewing style picks over on Pinterest now. </p>    
                                <a href="#" class="readmore-btn">Read More <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z"/></svg></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination-links">
                <a class="prev page-numbers" href="http://ad-couture.local/blog/">« Previous</a>
                <span aria-current="page" class="page-numbers current">1</span>
                <a class="page-numbers" href="http://ad-couture.local/blog/page/2/">2</a>
                <a class="page-numbers" href="http://ad-couture.local/blog/page/2/">3</a>
                <a class="next page-numbers" href="http://ad-couture.local/blog/page/2/">Next »</a>			
            </div>
        </div>
    </section>
</main>

<!-- footer section start -->
<footer class="footer-section">
    <div class="container">
        <img src="./src/images/ad-couture-final-logo.png" alt="" class="image-fluid">
        <p class="mail-call-text">Email: <a href="mailto:contact@adcouture.com">contact@adcouture.com</a> &nbsp; | &nbsp;  Call: <a href="tel:+919876543210">+91 9876543210</a></p>
        <p class="address-text">Address: <a href="#" target="_blank">Park Center Garmin (Khadi), 1st Floor, 24, Park St, Kolkata, West Bengal 700071</a></p>
        <div class="ad-couture-footer-menu">
            <ul>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">Gallery</a>
                </li>
                <li>
                    <a href="#">Location</a>
                </li>
                <li>
                    <a href="#">Fabrics</a>
                </li>
                <li>
                    <a href="#">Support</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <p class="copyright-text">&copy; Copyright 2022,<a href="#"> AD Couture</a> all rights reserved. <br> Designed, Developed &amp; Marketed By <a href="https://thinktoshare.com/" target="_blank">Think To Share</a></p>
    </div>
</footer>
<!-- footer section end -->

<script src="./dist/js/app.js"></script>
</body>
</html>

<!-- Blog section Start -->
 <section class="blog-section">
    <div class="container">
        <h2 class="blog-heading">Latest Blogs</h2>
        <div class="row gy-5 justify-content-center">
            <?php if($the_query->have_posts()):
                while ($the_query->have_posts()): $the_query->the_post(); ?>
                <div class="col-12 col-lg-4 col-md-6">
                    <div class="blog-text">
                        <div class="card h-100" >
                            <div class="img-container">
                                <img class="card-img-top" src="<?php echo get_the_post_thumbnail_url() ?>" alt="<?php the_title() ?>" >
                            </div>
                            <div class="card-body">
                                <p class="card-date"><?php echo get_the_date('M d, Y') ?></p>
                                <h4 class="card-heading-text"><?php the_title()?></h4>
                                <p class="card-text"><?php echo get_the_excerpt() ?></p>    
                                <a href="<?php echo get_the_permalink() ?>" class="readmore-btn">Read More <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z"/></svg></a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php 
                endwhile;
                wp_reset_postdata();
                endif;
            ?>
        </div>
        <div class="blog-btn-container">
            <a href="<?php echo home_url('blog'); ?>" class="blog-btn">View All</a>
        </div>
    </div>
</section> 
<!-- Blog section End -->