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


    

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

    <div class="title">
      <h2>Portfolio</h2>
    </div> 

    <div class="link">
      <a href="index.php">Home</a>
      <i class="fa-solid fa-angles-right"></i>
      <span class="page">Portfolio</span>
    </div>

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

 

  <!-- ==================== Portfolio Area (Start) ==================== -->
  <section class="portfolio">

    <!-- Portfolio Tab Buttons -->
    <ul class="tab-buttons">
      <li class="button active" data-filter="*">all</li> <!-- Button for displaying all portfolio items -->
      <li class="button" data-filter=".player">Player</li> <!-- Button for filtering by player -->
      <li class="button" data-filter=".trophy">Trophy</li> <!-- Button for filtering by trophy -->
      <li class="button" data-filter=".community">Community</li> <!-- Button for filtering by community -->
    </ul>

    <!-- Portfolio Items Container -->
    <div class="box-container">

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/costomerimage/34.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/costomerimage/34.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href="portfoliosingle.php"><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
            <!-- Text content -->
            <div class="text">
              <p>Player</p> <!-- Portfolio Category -->
              <a href="portfoliosingle.php"><h3>Young Talents</h3></a> <!-- Portfolio Title -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 2 - International Wins -->
      <div class="portfolio-item trophy">
        <div class="portfolio-content">
          <img src="assets/costomerimage/31.jpeg" alt="International Wins"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/costomerimage/14.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href="portfoliosingle.php"><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
            <!-- Text content -->
            <div class="text">
              <p>Trophy</p> <!-- Portfolio Category -->
              <a href="portfoliosingle.php"><h3>International Wins</h3></a> <!-- Portfolio Title -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 2 - Fan Engagement -->
      <div class="portfolio-item community">
        <div class="portfolio-content">
          <img src="assets/costomerimage/14.jpeg" alt="Fan Engagement"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/Portfolio-3.jpg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href="portfoliosingle.php"><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
            <!-- Text content -->
            <div class="text">
              <p>Community</p> <!-- Portfolio Category -->
              <a href="portfoliosingle.php"><h3>Fan Engagement</h3></a> <!-- Portfolio Title -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 4 - Championship Victories -->
      <div class="portfolio-item trophy">
        <div class="portfolio-content">
          <img src="assets/costomerimage/18.jpeg" alt="Championship Victories"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/Portfolio-4.jpg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href="portfoliosingle.php"><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
            <!-- Text content -->
            <div class="text">
              <p>Trophy</p> <!-- Portfolio Category -->
              <a href="portfoliosingle.php"><h3>Championship Victories</h3></a> <!-- Portfolio Title -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 5 - Goal Machines -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/costomerimage/19.jpeg" alt="Goal Machines"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/Portfolio-5.jpg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href="portfoliosingle.php"><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
            <!-- Text content -->
            <div class="text">
              <p>Player</p> <!-- Portfolio Category -->
              <a href="portfoliosingle.php"><h3>Goal Machines</h3></a> <!-- Portfolio Title -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 6 - Youth Development -->
      <div class="portfolio-item community">
        <div class="portfolio-content">
          <img src="assets/costomerimage/22.jpeg" alt="Youth Development"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/Portfolio-6.jpg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href="portfoliosingle.php"><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
            <!-- Text content -->
            <div class="text">
              <p>Community</p> <!-- Portfolio Category -->
              <a href="portfoliosingle.php"><h3>Youth Development</h3></a> <!-- Portfolio Title -->
            </div>
          </div>
        </div>
      </div>

    </div>

  </section>
  <!-- ==================== Portfolio Area (End) ==================== -->
 

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