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

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

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

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

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

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

    <!-- Section Heading -->
    <div class="heading">
      <h2><span>Gallery</span></h2>
    </div>

    <!-- 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/images/Portfolio/Portfolio/1.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/1.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/33.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/33.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/2.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/2.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/32.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/32.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/3.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/3.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/31.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/31.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/4.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/4.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/30.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/30.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/5.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/5.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/29.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/29.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/6.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/6.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/28.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/28.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/7.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/7.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/27.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/27.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/8.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/8.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/26.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/26.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/9.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/9.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/25.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/25.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/10.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/10.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/24.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/24.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/11.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/11.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/23.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/23.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/12.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/12.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>
      
       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/22.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/22.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/13.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/13.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/23.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/23.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/14.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/14.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/22.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/22.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/15.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/15.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

      <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/21.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/21.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/16.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/16.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/20.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/20.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/17.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/17.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/19.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/19.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>

       <!-- Portfolio Item 1 - Young Talents -->
      <div class="portfolio-item player">
        <div class="portfolio-content">
          <img src="assets/images/Portfolio/Portfolio/18.jpeg" alt="Young Talents"> <!-- Portfolio Image -->
          <div class="content">
            <!-- Buttons container -->
            <div class="btn-container">
              <a class="view" href="assets/images/Portfolio/Portfolio/18.jpeg"><i class="fa-solid fa-camera-retro"></i></a> <!-- View image button -->
              <a href=""><i class="fa-solid fa-link"></i></a> <!-- Link to portfolio single page -->
            </div>
          </div>
        </div>
      </div>
    

    </div>

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

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