<?php
include 'header.php';
?>

    <!-- scroll-content start -->
    <div id="js-scroll-content">
      <!-- js-animsition-overlay start -->
      <div class="js-animsition-overlay" data-animsition-overlay="true">
        <!-- main start -->
        <main class="main-content">
          <!-- blog start -->
          <div id="up" class="section-bg-light" data-scroll-section>
            <!-- padding-top-bottom-150 start -->
            <div class="padding-top-bottom-150 container small">
              <h2 class="headline-xxxxl text-color-black headline-uppercase after-preloader-anim">
                <span class="d-block">
                  <span class="anim-chars-fadein" data-splitting>From the</span>
                </span>
                <span class="d-block" data-scroll data-scroll-speed="-0.4" data-scroll-position="top">
                  <span class="anim-chars-fadein" data-splitting>Blog</span>
                </span>
              </h2>

              <!-- flex-container start -->
              <div class="flex-container">
                <!-- column start -->
                
                  <?php
                    $query = $conn->prepare("SELECT * FROM blog order by id desc");
                    $query->execute();
                    $result = $query->fetchAll();
                    $row = count($result);
                    if($row) {
                        foreach ($result as $value) {
                        $blog_id = $value['id'];
                        $blog_img = $value['img'];
                        $title = $value['title'];
                        $description = $value['description'];
                        ?>
                      <div class="four-columns" style="padding:4px;">
                      <article class="padding-top-90">
                        <a href="blog_detail.php?bid=<?php echo $blog_id; ?>" class="d-block hidden-box js-pointer-large js-animsition-link">
                          <div data-scroll data-scroll-speed="-1.3">
                            <div style="background-image:url(admin/upload/gallery/<?php echo $blog_img; ?>)">
                              <img src="admin/upload/gallery/<?php echo $blog_img; ?>" style="width: 100%;height: 330px;object-fit: cover;">
                            </div>
                          </div>
                        </a>
                        <a href="blog_detail.php?bid=<?php echo $blog_id; ?>" class="d-block hidden-box js-pointer-large js-animsition-link">
                          <div data-scroll data-scroll-speed="-1.3">
                            <div class="anim-img-reveal" data-scroll style="background-image:url(blog_detail.php?bid=<?php echo $blog_id; ?>)">
                              <img src="blog_detail.php?bid=<?php echo $blog_id; ?>" alt="Post">
                            </div>
                          </div>
                        </a>
                        <div class="padding-top-bottom-20 pos-rel scrollanim-activate line-scrollanim-activate" data-scroll data-scroll-offset="30%">
                          <a href="blog_detail.php?bid=<?php echo $blog_id; ?>" class="margin-bottom-20 anim-fade-to-left js-pointer-large js-animsition-link">
                            <h3 class="headline-xxxs text-color-black"><?php if (!empty($title)) { echo substr($title,0, 30); } ?></h3>
                            <p class="body-text-xs text-color-6d6d6d margin-top-10"><?php if (!empty($description)) { echo  substr($description,0, 70); } ?></p>
                          </a>
                          <ul class="list list_row list_margin-30px text-color-black">
                            <li class="list__item">
                              <a href="#" class="subhead-xxs anim-fade-to-left js-pointer-small">By: Admin</a>
                            </li>
                            <li class="list__item">
                              <a href="#" class="subhead-xxs anim-fade-to-left tr-delay-02 js-pointer-small"><?php if (!empty($created_at)) { echo $created_at; } ?></a>
                            </li>
                          </ul>
                          <div class="anim-line-bottom black"></div>
                        </div>
                      </article>
                      </div>
                        <?php
                        }
                    }
                  ?>
                <!-- column end -->

                <!-- sidebar column start -->
                <!--  --><!-- sidebar column end -->
              </div><!-- flex-container end -->
            </div><!-- padding-top-bottom-150 end -->
          </div><!-- blog end -->
        </main><!-- main end -->

       




<?php
include 'footer.php';
?>