index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GameZone</title>
  
  

  <!-- Primary Meta Tags -->
  <meta name="title" content="GameZone" />
  <meta name="description"
    content="Welcome to GameZone, the ultimate online gaming destination! Enjoy a vast collection of small games across genres like casual, puzzles, etc. Play directly in your browser. GameZone: endless fun at your fingertips!" />
  <meta name="language" content="English">
  <meta name="keywords"
    content="GameZone, Online games, browser games, casual gaming, puzzle games, action games, gaming website, Snake Game, Simon Game, Dino Runner Game.">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://kunjgit.github.io/GameZone/" />
  <meta property="og:title" content="GameZone" />
  <meta property="og:description"
    content="Welcome to GameZone, the ultimate online gaming destination! Enjoy a vast collection of small games across genres like casual, puzzles, etc. Play directly in your browser. GameZone: endless fun at your fingertips!" />
  <meta property="og:image"
    content="https://github.com/kunjgit/GameZone/assets/56786344/080b7034-0e60-4069-b95c-aa0aba147a94" />


  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://kunjgit.github.io/GameZone/" />
  <meta property="twitter:title" content="GameZone" />
  <meta property="twitter:description"
    content="Welcome to GameZone, the ultimate online gaming destination! Enjoy a vast collection of small games across genres like casual, puzzles, etc. Play directly in your browser. GameZone: endless fun at your fingertips!" />
  <meta property="twitter:image"
    content="https://github.com/kunjgit/GameZone/assets/56786344/080b7034-0e60-4069-b95c-aa0aba147a94" />
  <!--
    - favicon
  -->
  <link rel="shortcut icon" href="./assets/images/gamezone.png" type="image/x-icon">

  <!--
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="./assets/css/scroll.css">
  <link rel="stylesheet" href="./assets/css/particles.css">
  <link rel="stylesheet" href="./assets/css/contributors.css">
  <link rel="stylesheet" href="./assets/css/navbar.css">
  <link rel="stylesheet" href="./assets/css/gameCard.css">
  <link rel="stylesheet" href="./assets/css/cursor_transition.css">
  

  <!--
    - google font link
  -->
  <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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
  <script src="https://cdn.tailwindcss.com"></script>
  <!--
    - Audio file for click sound
  -->
  <audio id="clickSound" src="./assets/audio/click-sound.wav"></audio>
  <style>
    .preloader{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: black;
transition: opacity 5s, visibility 5s;
z-index: 1000;
}

.preloader--hidden{
opacity: 0;
visibility: hidden;
}
.preloader img{
height: 200px;
width: 200px;
border-radius: 1000px;
}
  </style>
</head>


<!-- NavBar -->

<header class="header">
  <a href="#homelink" class="logox"><span>GAMEΖΟΝΕ</span>🕹️</a> 
  <input type="checkbox" id="check">
  <label for="check" class="icons">
    <i class='bx bx-menu-alt-right'  id="menu-icon"></i>
    <i class='bx bx-x' id="close-icon"></i>

  <nav class="navbarr">
    
      
    </label>

    <a href="#homelink"  style="--i:0">Home</a>
    <a href="#games" style="--i:1">Games</a>
    <a href="#homelink" id="Aboutbutton" style="--i:2">About</a></li>
    <a href="#contributorslink" style="--i:3">Contributors</a>
    <a href="#footer" style="--i:4">Contact</a>
  
  <!-- Light-Dark theme SWITCH -->
  <!-- <label id="themeToggleWrapper"  class="theme-toggle" for="themeToggle">
    <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
    <span class="slider" style="width: 40px; height: 20px;"></span>
  </label> -->

</nav>
</header>











<body>
        <div class="area" >

  <div class="preloader">
    <img src="loader.gif" class="center">
  </div>
  <script>
    
    window.addEventListener("load", () => {
const loader = document.querySelector(".preloader");

loader.classList.add("preloader--hidden");

loader.addEventListener("transitionend", () => {
document.body.removeChild(loader);
});
});
  </script>
  <div class="cursor"></div>
  <div class="progress-bar">
    <div class="filled"></div>
  </div>


  <div class="abcd" id="homelink">

    <main>
     

      <div class="main-content">

        <div class="bgContainer"></div>




        <!--
        - #NAVBAR
      -->
        <div class="heading fromTop">
          <span>🕹️&nbsp;</span><span>G</span><span>A</span><span>M</span><span>E</span><span>Z</span><span>O</span><span>N</span><span>E</span>
        </div>

        <!-- About section -->

        <div id="about" class="zoomIn">

        
        <div class="zoomIn" id="about" style="color:aqua;">
        

          Welcome to our website! Your ultimate destination for a vast collection of free-to-play games. Dive into a world of
          endless entertainment and excitement as you explore our diverse selection of games, ranging from timeless classics to
          modern masterpieces. With something for everyone, our website offers an immersive gaming experience that is accessible
          to all.
        
          <br><br>
        
          Whether you're a seasoned gamer or just looking for some casual fun, our platform has you covered. Join our community
          of gamers and embark on an epic journey through the world of online gaming. Get ready to play, explore, and discover
          new adventures—all for free!
        </div>
        
        <br><br><br>


        <div class="search-container" id="search-container-id">

          <input type="text" class="search-input" placeholder="🕹️ Search for Games..."  id="searchbar">

          <div class="search-btn">
            <i class="fa fa-search" aria-hidden="true"></i>
            <div class="favorites-link">
              <a href="pages/fav.html" target="_self">
                <img src="assets/images/FavFolder.png" alt="fav" />
              </a>
              
          </div>
          
          </div>
        </div>
        <br>
        <ul id="suggestion-list" style="display: none;"></ul>
        
        <div id="search-related">
          <p>Showing results for <span id="search-term"></span></p>
          <button id="clear-search">Clear</button>
        </div>
        
        <br>

        <!-- Games -->


        <ul id="games" class="project-list">
        </ul>

        <div class="pagination">
          <button id="prev-page-tile" onclick="goToPreviousPage()">Previous</button>
          <div class="pagination_section"></div>
          <button id="next-page-tile" onclick="goToNextPage()">Next</button>
        </div>


      </div>
  </div>
  </main>
  <br>
  <br>
  <br>


  <!-- Contributors section -->
  <div class="contributors" id="contributorslink">
    <h1 style="font-family: 'Agency FB', Times, serif; color: aqua;">Our Valuable Contributors</h1>
     <!-- display number of contributors-->
    <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB', Times, serif; color: aqua;"></h2> 
    <div id="contributor"></div>
    <div class="pagination" id="pagination"></div>
  </div>

  <!-- Contact section -->
  <div id="contact">
    <!-- Add your Contact content here -->
  </div>

  <!-- Contribute section -->
  <div id="contribute">
    <!-- Add your Contribute content here -->
  </div>

  <!--
        FOOTER
  -->
  <div class="abcd" id="footer">
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="wave-creation">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,133,0.9)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(153,51,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgb(238,106,220,0.3)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#FA8DF3" />
        </g>
      </svg>
    </div>


    <footer class="page-footer font-small unique-color-dark pt-4">
      <div class="container" style="margin-left: 50px;">
        <div class="list-unstyled list-inline text-center py-2 text-black">
          <br><br>
    
          <!-- Created div Tag with Proper Styling for Footer Text aligned to Center just above Social Links -->
          <div class="socials-text" style="text-align: center; margin-bottom: 50px;">
            <div class="footer-links" style="display: flex; justify-content: space-around; margin-bottom: 30px;">
              <!-- Quick Links Section -->
              <div class="quick-links">
                <h3>Quick Links</h3>
                <ul>
                  <li><a href="#about">About Us</a></li>
                  <li><a href="#contact">Contact</a></li>
                  <li><a href="#contribute">Contribute Here</a></li>
                </ul>
              </div>
    
              <!-- Subscribe to Newsletter Section -->
              <div class="newsletter">
                <h3>Subscribe to our newsletter</h3>
                <form action="submit" method="post">
                  <input type="email" name="email" placeholder="Email" id="mail" class="contact-form-email" required />
                  <button type="submit">Submit</button>
                </form>
              </div>
            </div>
            <h7>Developed with 💗 by Kunj</h7>
            <br>
            <p style="font-size: 20px; font-style: cursive; cursor: pointer; color: rgb(215, 213, 85); font-family: 'Agency FB', Times, serif;">
              Make sure you checkout my socials and also ⭐ GameZone on github
            </p>
          </div>
    
          <div>
            <ul class="example-2" style="display: flex; justify-content: center; padding: 0;">
              <li class="icon-content" style="margin: 0 10px;">
                <a href="https://www.linkedin.com/in/kunj199/" aria-label="LinkedIn" data-social="linkedin">
                  <div class="filled"></div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" xml:space="preserve">
                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" fill="currentColor"></path>
                  </svg>
                </a>
              </li>
              <li class="icon-content" style="margin: 0 10px;">
                <a href="https://x.com/kunj_199" aria-label="Twitter" data-social="twitter">
                  <div class="filled"></div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16" xml:space="preserve">
                    <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" fill="currentColor"></path>
                  </svg>
                </a>
              </li>
              <li class="icon-content" style="margin: 0 10px;">
                <a href="https://github.com/kunjgit" aria-label="GitHub" data-social="github">
                  <div class="filled"></div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" xml:space="preserve">
                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" fill="currentColor"></path>
                  </svg>
                </a>
              </li>
              <li class="icon-content">
                <a
                  href="https://www.instagram.com/your_instagram_username"
                  aria-label="Instagram"
                  data-social="instagram"
                >
                  <div class="filled"></div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-instagram"
                    viewBox="0 0 16 16"
                  >
                    <path d="M8 0C5.8 0 5.5 0 4.7.1 3.9.1 3.3.3 2.8.5c-.5.2-.9.5-1.3.9-.4.4-.7.8-.9 1.3-.2.5-.4 1.1-.5 1.9C0 5.5 0 5.8 0 8s0 2.5.1 3.3c.1.8.3 1.4.5 1.9.2.5.5.9.9 1.3.4.4.8.7 1.3.9.5.2 1.1.4 1.9.5.8.1 1.1.1 3.3.1s2.5 0 3.3-.1c.8-.1 1.4-.3 1.9-.5.5-.2.9-.5 1.3-.9.4-.4.7-.8.9-1.3.2-.5.4-1.1.5-1.9.1-.8.1-1.1.1-3.3s0-2.5-.1-3.3c-.1-.8-.3-1.4-.5-1.9-.2-.5-.5-.9-.9-1.3-.4-.4-.8-.7-1.3-.9-.5-.2-1.1-.4-1.9-.5C10.5 0 10.2 0 8 0zm0 1.5c2.2 0 2.5 0 3.3.1.7.1 1.1.2 1.4.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.7.3 1.4.1.8.1 1.1.1 3.3s0 2.5-.1 3.3c-.1.7-.2 1.1-.3 1.4-.1.3-.3.5-.5.7-.2.2-.4.4-.7.5-.3.1-.7.2-1.4.3-.8.1-1.1.1-3.3.1s-2.5 0-3.3-.1c-.7-.1-1.1-.2-1.4-.3-.3-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.7-.3-1.4-.1-.8-.1-1.1-.1-3.3s0-2.5.1-3.3c.1-.7.2-1.1.3-1.4.1-.3.3-.5.5-.7.2-.2.4-.4.7-.5.3-.1.7-.2 1.4-.3.8-.1 1.1-.1 3.3-.1zm0 2.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 1.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm4.5-.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </br></br>
          <hr style="margin: 20px; background-color:yellow; opacity: 0.8;">
          <!-- Copyright -->
          
          <p id="copyright" style="color:rgb(222, 222, 222)">&copy; 2024 GameZone || All Rights Reserved.</p>
          
        </div>
      </div>
    </footer>
    
  </div>



  </section>

  </article>
  </div>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' >




 




  <!--
    - custom js link
  -->
  <script src="./assets/js/index.js"></script>
  <script src="./assets/js/script.js"></script>
  <script src="./assets/js/scroll.js"></script>
  <script src="./assets/js/contributors.js"></script>
  <script src="./assets/js/cursor_transition.js"></script>
  <script src="./assets/js/contributors.js"></script>
  <script src="./assets/js/background.js"></script>
 
  
  

  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <div>
  </div>

    <ion-icon name="arrow-up-outline"></ion-icon>
  </button>

  <!-- SCROLL TO TOP BUTTON -->
  <div id="progress">
    <span id="progress-value">&#x1F815;</span>
  </div>
  <script>
    
    window.embeddedChatbotConfig = {
    chatbotId: "cH7USH1tj9yFXJDJcv4dc",
    domain: "www.chatbase.co"
    }
    </script>
    <script
    src="https://www.chatbase.co/embed.min.js"
    chatbotId="cH7USH1tj9yFXJDJcv4dc"
    domain="www.chatbase.co"
    defer>
    </script>
</body>

</html>