<?php
include "include/header.php";
?>

  <!-- ==================== Page-Title (Start) ==================== -->
  <div class="page-title">

    <div class="title">
      <h2>Blog Grid</h2>
    </div> 

    <div class="link">
      <a href="../../index-2.html">Home</a>
      <i class="fa-solid fa-angles-right"></i>
      <span class="page">Blog Grid</span>
    </div>

  </div>
  <!-- ==================== Page-Title (End) ==================== -->



  <!-- ==================== Blog Grid (Start) ==================== -->
  <section class="blog grid"> 

    <!-- ========== Blog Sidebar Area (Start) ========== -->
    <div class="sidebar">

      <!-- ===== Search Area (Start) ===== -->
      <div class="search sidebar-item">

        <div class="sidebar-heading">
          <h2>search</h2>
        </div>

        <!-- Blog Search Form -->
        <form class="blog-search-container box-container">
          <div class="input-box">
            <input type="search" id="blog-search" placeholder="search..." required> <!-- Search Input -->
            <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
          </div>
        </form>

      </div>
      <!-- ===== Search Area (End) ===== -->

      <!-- ===== Category Area (Start) ===== -->
      <div class="category sidebar-item">

        <div class="sidebar-heading">
          <h2>categories</h2>
        </div>

        <!-- Blog Categories -->
        <div class="box-container">
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Sport Center</span> <p>(30)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Analysis</span> <p>(20)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Interviews</span> <p>(15)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Match Report</span> <p>(10)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Tounaments</span> <p>(05)</p> </a>
        </div>

      </div>
      <!-- ===== Category Area (End) ===== -->

      <!-- ===== Recent Posts Area (Start) ===== -->
      <div class="recent-posts sidebar-item">

        <div class="sidebar-heading">
          <h2>recent posts</h2>
        </div>
 
        <!-- Recent Posts -->
        <div class="box-container">

          <!-- Recent Post 1 -->
          <div class="post-item">
            <img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Recent-Post-Image"> <!-- Post image -->
            <a class="main-heading" href="Blog-Single.html">Complete List Of Football Equipment</a> <!-- Post title -->
          </div>

          <!-- Recent Post 2 -->
          <div class="post-item">
            <img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Recent-Post-Image"> <!-- Post image -->
            <a class="main-heading" href="Blog-Single.html">A Brief History Of Royal Rebels</a> <!-- Post title -->
          </div>

          <!-- Recent Post 3 -->
          <div class="post-item">
            <img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Recent-Post-Image"> <!-- Post image -->
            <a class="main-heading" href="Blog-Single.html">We Are A Family, Not Just A Team</a> <!-- Post title -->
          </div>

        </div>

      </div>
      <!-- ===== Recent Posts Area (End) ===== -->

      <!-- ===== Tags Area (Start) ===== -->
      <div class="tags sidebar-item">

        <div class="sidebar-heading">
          <h2>tags</h2>
        </div>

        <!-- Tags -->
        <div class="box-container">
          <a href="#" class="tag-item">Matches</a>
          <a href="#" class="tag-item">fixtures</a>
          <a href="#" class="tag-item">results</a>
          <a href="#" class="tag-item">Team</a>
          <a href="#" class="tag-item">Players</a>
          <a href="#" class="tag-item">Tournaments</a>
          <a href="#" class="tag-item">Store</a>
        </div>

      </div>
      <!-- ===== Tags Area (End) ===== -->

    </div>
    <!-- ========== Blog Sidebar Area (End) ========== -->

    <!-- ========== Blog Container (Start) ========== -->
    <div class="blog-container grid"> 

      <!-- ===== Blogs (Start) ===== -->
      <div class="blog-items">

        <!-- Blog-1 -->
        <div class="blog-item">
          <div class="image">
            <img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date"><span>02</span> Dec</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">Complete List of Football Equipment</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Sport Center</span></h3> <!-- Category -->
            </div>
          </div>
        </div>
  
        <!-- Blog-2 -->
        <div class="blog-item">
          <div class="image">
            <img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date"><span>25</span> nov</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">A Brief History of Royal Rebels</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Analysis</span></h3> <!-- Category -->
            </div>
          </div>
        </div>
  
        <!-- Blog-3 -->
        <div class="blog-item">
          <div class="image">
            <img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date"><span>17</span> Nov</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">We Are a Family, Not Just a Team</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Interviews</span></h3> <!-- Category -->
            </div>
          </div>
        </div>
  
        <!-- Blog-4 -->
        <div class="blog-item">
          <div class="image">
            <img src="../../assets/images/Blog/Blogs/Blog-4.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date"><span>05</span> Nov</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">10 Best Coaching Staff Members for Football</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Analysis</span></h3> <!-- Category -->
            </div>
          </div>
        </div>
  
        <!-- Blog-5 -->
        <div class="blog-item">
          <div class="image">
            <img src="../../assets/images/Blog/Blogs/Blog-5.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date"><span>27</span> Oct</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">How to Stay Motivated for Daily Training</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Match Report</span></h3> <!-- Category -->
            </div>
          </div>
        </div>
  
        <!-- Blog-6 -->
        <div class="blog-item">
          <div class="image">
            <img src="../../assets/images/Blog/Blogs/Blog-6.jpg" alt="Blog-Image"> <!-- Blog Image -->
            <div class="date"><span>20</span> Oct</div> <!-- Blog Date -->
          </div>
          <div class="content">
            <a class="main-heading" href="Blog-Single.html">New Season Fixture Announcement</a> <!-- Blog Title -->
            <div class="details">
              <h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Author -->
              <h3><i class="fa-regular fa-folder-open"></i><span>Tounaments</span></h3> <!-- Category -->
            </div>
          </div>
        </div>
  
      </div>
    
      <!-- ===== Blogs (End) ===== -->

      <!-- ===== Pagination (Start) ===== -->
      <div class="pages-no">

          <div class="container">

              <!-- Previous page button -->
              <div class="item">
                  <i class="fas fa-arrow-left"></i> 
              </div>

              <!-- Page numbers -->
              <div class="numbers">
                  <div class="item active">1</div> <!-- Active page number -->
                  <div class="item">2</div> <!-- Page number 2 -->
                  <div class="item">3</div> <!-- Page number 3 -->
              </div>

              <!-- Next page button-->
              <div class="item">
                  <i class="fa-solid fa-arrow-right"></i> 
              </div>
          
          </div>

      </div>
      <!-- ===== Pagination (End) ===== -->

    </div>
    <!-- ========== Blog Container (End) ========== -->

  </section>
  <!-- ==================== Blog Grid (End) ==================== -->


    
  
<?php
include "include/footer.php";
?>