added the temporary webgame collection

footer.js

@@ -38,7 +38,7 @@ class Footer extends HTMLElement {
 
     // Add event listener for button click
     this.querySelector('.secret-button').addEventListener('click', () => {
-      window.location.href = 'secret/explenation.html'; // Open the secret.html file
+      window.location.href = 'secret/index.html'; // Open the secret.html file
     });
   }
 }

index.html

@@ -37,9 +37,15 @@
         <h1>Our Projects</h1>
 
         <h2>Our Games</h2>
+        <ul>
+          <a href="webGames/index.html" target="_blank" class="listElement">
+            <li>Web game collection</li>
+          </a>
+        </ul>
+
         <ul>
           <li>
-            <p>Previously we had unfinished Games listed here.</p>
+            <p>Previously we had more unfinished Games listed here.</p>
             <p>We decided against displaying them and giving people the impression we are working on them currently.</p>
             <p>In the Future we will display the released games here</p>
           </li>

secret/asteroidDestroyer/game.js

@@ -0,0 +1,376 @@
+"use strict";
+// Canvas setup
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// Game elements
+const player = {
+  x: canvas.width / 2,
+  y: canvas.height - 60,
+  width: 40,
+  height: 40,
+  color: 'white',
+  speed: 5,
+  dx: 0
+};
+
+let bullets = [];
+let asteroids = [];
+let items = [];
+let score = 0;
+let totalBulletsFired = 0;
+let isGameOver = false;
+let lastBulletTime = 0;
+let ammo = 100; // Ammo counter
+
+// Difficulty control
+let asteroidSpawnInterval = 800; // Faster spawn rate
+let asteroidSpeedMultiplier = 1.5; // Faster asteroids from the start
+let difficultyIncreaseRate = 0.2; // Faster scaling every 10 seconds
+
+// Controls
+let canShoot = true; // Flag to control shooting
+let rapidFireActive = false;
+let shotgunActive = false;
+let rainbowActive = false;
+let lastShotgunTime = 0;
+
+// Controls for sphere effects
+let blueSphereCooldown = 0;
+let yellowSphereCooldown = 0;
+let greenSphereCooldown = 0;
+let rainbowSphereCooldown = 0;
+
+// Sphere types
+const sphereTypes = ['blue', 'yellow', 'green', 'rainbow'];
+
+/// Control for left button press and release
+function btnMoveLeft(isPressed) {
+  if (isPressed) {
+    player.dx = -player.speed;  // Start moving left
+  } else {
+    player.dx = 0;  // Stop moving when button is released
+  }
+}
+
+// Control for shoot button click (simulates spacebar press)
+function btnShoot() {
+  if (canShoot && !isGameOver) {
+    shootBullet();
+    canShoot = false; // Prevent shooting until the button is "released"
+  }
+}
+
+// Control for right button press and release
+function btnMoveRight(isPressed) {
+  if (isPressed) {
+    player.dx = player.speed;  // Start moving right
+  } else {
+    player.dx = 0;  // Stop moving when button is released
+  }
+}
+
+document.getElementById('shootBtn').addEventListener('mouseup', () => {
+  canShoot = true; // Allow shooting again when button is released
+});
+
+window.addEventListener('keydown', (e) => {
+  if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed;
+  if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed;
+
+  // Shoot only if it's not a hold, and we can shoot
+  if (e.key === ' ' && canShoot && !isGameOver) {
+    shootBullet();
+    canShoot = false; // Prevent shooting until the key is released
+  }
+
+  if (e.key === 'r' && isGameOver) restartGame();
+});
+
+window.addEventListener('keyup', (e) => {
+  // Stop moving when either the arrow keys or the 'a'/'d' keys are released
+  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') {
+    player.dx = 0;
+  }
+
+  // Allow shooting again when the space key is released
+  if (e.key === ' ') {
+    canShoot = true;
+  }
+});
+
+// Bullet mechanics with cooldown
+function shootBullet() {
+  const now = Date.now();
+  if (now - lastBulletTime < 100) return; // Enforce cooldown of 0.1 seconds
+  if (ammo <= 0) return; // Prevent shooting if ammo is empty
+  lastBulletTime = now;
+  ammo--; // Decrease ammo
+
+  totalBulletsFired++; // Increment total bullets fired
+
+  if (rapidFireActive) {
+    // If rapid fire is active, fire bullets continuously with a short delay
+    for (let i = 0; i < 3; i++) {
+      setTimeout(() => {
+        bullets.push({
+          x: player.x + player.width / 2 - 2.5,
+          y: player.y,
+          width: 5,
+          height: 10,
+          color: 'yellow',
+          speed: 7
+        });
+      }, i * 50); // Fire bullets with 50ms delay between shots
+    }
+  } else if (shotgunActive) {
+    // Shotgun effect, firing 3 bullets with a spread
+    for (let i = -1; i <= 1; i++) {
+      bullets.push({
+        x: player.x + player.width / 2 - 2.5,
+        y: player.y,
+        width: 5,
+        height: 10,
+        color: 'yellow',
+        speed: 7,
+        angle: i * 10 // Spray the bullets at different angles
+      });
+    }
+  } else {
+    // Normal bullet
+    bullets.push({
+      x: player.x + player.width / 2 - 2.5,
+      y: player.y,
+      width: 5,
+      height: 10,
+      color: 'yellow',
+      speed: 7
+    });
+  }
+}
+
+// Generate random color
+function getRandomColor() {
+  const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink'];
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+
+// Asteroid mechanics
+function createAsteroid() {
+  const size = Math.random() * 40 + 30; // Bigger asteroids (min: 30, max: 70)
+  asteroids.push({
+    x: Math.random() * canvas.width,
+    y: -size,
+    width: size,
+    height: size,
+    color: getRandomColor(),
+    speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed
+  });
+}
+
+// Item mechanics
+function createItem() {
+  const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
+  const size = 30;
+  const x = Math.random() * canvas.width;
+  items.push({
+    x: x,
+    y: -size,
+    width: size,
+    height: size,
+    type: randomType,
+    color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow',
+    speed: 3
+  });
+}
+
+// Update game elements
+function updatePlayer() {
+  player.x += player.dx;
+  if (player.x < 0) player.x = 0;
+  if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
+}
+
+function updateBullets() {
+  bullets.forEach((bullet, index) => {
+    bullet.y -= bullet.speed;
+    if (bullet.y + bullet.height < 0) bullets.splice(index, 1);
+  });
+}
+
+function updateAsteroids() {
+  asteroids.forEach((asteroid, index) => {
+    asteroid.y += asteroid.speed;
+    if (asteroid.y > canvas.height) asteroids.splice(index, 1);
+  });
+}
+
+function updateItems() {
+  items.forEach((item, index) => {
+    item.y += item.speed;
+    if (item.y > canvas.height) items.splice(index, 1);
+    // Check if player collects the item
+    if (
+      player.x < item.x + item.width &&
+      player.x + player.width > item.x &&
+      player.y < item.y + item.height &&
+      player.y + player.height > item.y
+    ) {
+      applyItemEffect(item.type);
+      items.splice(index, 1); // Remove the item after it is collected
+    }
+  });
+}
+
+function applyItemEffect(type) {
+  let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
+  if (type === 'blue') {
+    rapidFireActive = true;
+    setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire
+  } else if (type === 'yellow') {
+    shotgunActive = true;
+    setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun
+  } else if (type === 'green') {
+    ammo = 100; // Refill ammo
+  } else if (type === 'rainbow') {
+    rapidFireActive = true;
+    shotgunActive = true;
+    setTimeout(() => {
+      rapidFireActive = false;
+      shotgunActive = false;
+    }, 15000); // 15 seconds with all effects
+  }
+  score += points; // Add points when an item is collected
+}
+
+// Collision detection
+function checkCollisions() {
+  bullets.forEach((bullet, bIndex) => {
+    asteroids.forEach((asteroid, aIndex) => {
+      if (
+        bullet.x < asteroid.x + asteroid.width &&
+        bullet.x + bullet.width > asteroid.x &&
+        bullet.y < asteroid.y + asteroid.height &&
+        bullet.y + bullet.height > asteroid.y
+      ) {
+        bullets.splice(bIndex, 1);
+        asteroids.splice(aIndex, 1);
+        score += Math.floor(Math.random() * 5) + 1; // Add points when an asteroid is destroyed
+        // Visual feedback for destroyed asteroid
+        createExplosion(asteroid.x, asteroid.y);
+      }
+    });
+  });
+
+  asteroids.forEach((asteroid) => {
+    if (
+      player.x < asteroid.x + asteroid.width &&
+      player.x + player.width > asteroid.x &&
+      player.y < asteroid.y + asteroid.height &&
+      player.y + player.height > asteroid.y
+    ) {
+      isGameOver = true;
+    }
+  });
+}
+
+// Explosion effect
+function createExplosion(x, y) {
+  ctx.fillStyle = 'yellow';
+  ctx.beginPath();
+  ctx.arc(x, y, 20, 0, Math.PI * 2);
+  ctx.fill();
+  setTimeout(() => ctx.clearRect(x - 20, y - 20, 40, 40), 200); // Clear explosion after 200ms
+}
+
+// Draw elements
+function drawPlayer() {
+  ctx.fillStyle = player.color;
+  ctx.fillRect(player.x, player.y, player.width, player.height);
+}
+
+function drawBullets() {
+  bullets.forEach((bullet) => {
+    ctx.fillStyle = bullet.color;
+    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+  });
+}
+
+function drawAsteroids() {
+  asteroids.forEach((asteroid) => {
+    ctx.fillStyle = asteroid.color;
+    ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);
+  });
+}
+
+function drawItems() {
+  items.forEach((item) => {
+    ctx.fillStyle = item.color;
+    ctx.beginPath();
+    ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2);
+    ctx.fill();
+  });
+}
+
+function drawScore() {
+  ctx.fillStyle = 'white';
+  ctx.font = '24px Arial';
+  ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
+}
+
+function drawAmmo() {
+  ctx.fillStyle = 'white';
+  ctx.font = '24px Arial';
+  ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
+}
+
+function drawGameOver() {
+  if (isGameOver) {
+    ctx.fillStyle = 'white';
+    ctx.font = '40px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40);
+    ctx.font = '24px Arial';
+    ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2);
+    ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40);
+    ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80);
+  }
+}
+
+// Restart game
+function restartGame() {
+  window.location.reload();
+}
+
+// Main game loop
+function gameLoop() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  if (!isGameOver) {
+    updatePlayer();
+    updateBullets();
+    updateAsteroids();
+    updateItems();
+    checkCollisions();
+  }
+
+  drawPlayer();
+  drawBullets();
+  drawAsteroids();
+  drawItems();
+  drawScore();
+  drawAmmo();
+  drawGameOver();
+
+  if (!isGameOver) {
+    if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid
+    if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item
+  }
+
+  requestAnimationFrame(gameLoop);
+}
+
+// Start game loop
+gameLoop();

secret/asteroidDestroyer/secret.html

@@ -11,9 +11,9 @@
 
   <!-- Virtual buttons for mobile -->
   <div class="controls">
-    <button id="leftBtn" class="control-btn" onmousedown="btnMoveLeft(true)" onmouseup="btnMoveLeft(false)">Left</button>
+    <button id="leftBtn" class="control-btn">Left</button>
     <button id="shootBtn" class="control-btn" onclick="btnShoot()">Shoot</button>
-    <button id="rightBtn" class="control-btn" onmousedown="btnMoveRight(true)" onmouseup="btnMoveRight(false)">Right</button>
+    <button id="rightBtn" class="control-btn">Right</button>
   </div>
 
   <script src="game.js"></script>

secret/asteroidDestroyer/styles.css

@@ -0,0 +1,74 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body, html {
+    height: 100%;
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #000;
+    color: white;
+    overflow: hidden;
+  }
+  
+  .landing-page {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .game-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
+    backdrop-filter: blur(8px); /* Apply blur effect to the background */
+    z-index: -1; /* Ensures it's in the background */
+    pointer-events: none; /* Prevent interaction with the blurred background */
+  }
+  
+  .content {
+    text-align: center;
+    z-index: 1; /* Ensure content appears above the game background */
+    padding: 20px;
+    max-width: 600px; /* Limit the width of the content */
+    position: relative;
+    color: white;
+    backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */
+  }
+  
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+  }
+  
+  p {
+    font-size: 1.2rem;
+    margin-bottom: 30px;
+  }
+  
+  button {
+    padding: 12px 24px;
+    background-color: #ffcc00;
+    color: black;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    border-radius: 5px;
+    text-transform: uppercase;
+    transition: background-color 0.3s ease;
+  }
+  
+  button:hover {
+    background-color: #ff9900;
+  }
+  

secret/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Secret Game Collection</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Secret Game Collection</h1>
+    </header>
+
+    <main>
+        <div class="grid-container">
+            <a href="asteroidDestroyer/explenation.html" target="_blank" class="item">
+                <img src="images/asteroid.png" alt="Image can't be displayed">
+                <h2>Secret Asteroid Shooter</h2>
+                <div class="description">
+                    <p>In this game, you control a spaceship that shoots at asteroids to avoid destruction and collect items for power-ups.</p>
+                    <p>Your goal is to survive as long as possible while scoring points!</p>
+                </div>
+            </a>
+            <a href="link_to_blackjack_game" target="_blank" class="item">
+                <img src="images/blackjack.jpg" alt="Image can't be displayed">
+                <h2>Secret Blackjack</h2>
+                <div class="description">
+                    <p>Try to beat the dealer by getting a hand value as close to 21 as possible without going over.</p>
+                </div>
+            </a>
+            <a href="link_to_snake_game" target="_blank" class="item">
+                <img src="images/snake.png" alt="Image can't be displayed">
+                <h2>Snake</h2>
+                <div class="description">
+                    <p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
+                </div>
+            </a>
+            <a href="link_to_solitaire_game" target="_blank" class="item">
+                <img src="images/solitaire.png" alt="Image can't be displayed">
+                <h2>Solitaire</h2>
+                <div class="description">
+                    <p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
+                </div>
+            </a>
+            <a href="link_to_minesweeper_game" target="_blank" class="item">
+                <img src="images/minesweeper.png" alt="Image can't be displayed">
+                <h2>Minesweeper</h2>
+                <div class="description">
+                    <p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
+                </div>
+            </a>
+            <a href="link_to_guess_my_number_game" target="_blank" class="item">
+                <img src="images/number.jpeg" alt="Image can't be displayed">
+                <h2>Guess My Number</h2>
+                <div class="description">
+                    <p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
+                </div>
+            </a>
+            <a href="link_to_endless_runner_game" target="_blank" class="item">
+                <img src="images/endless_runner.png" alt="Image can't be displayed">
+                <h2>Endless Runner</h2>
+                <div class="description">
+                    <p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p>
+                </div>
+            </a>
+        </div>
+    </main>
+
+    <footer>
+        <p>&copy; 2025 Game Collection</p>
+    </footer>
+</body>
+</html>

secret/styles.css

@@ -1,74 +1,120 @@
+/* Reset and box-sizing */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-  }
+}
 
-  body, html {
-    height: 100%;
+/* General Styles */
+body {
     font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #000;
+    background-color: #282c34;
+    color: #ffffff;
+    margin: 0;
+}
+
+header {
+    background-color: #4CAF50;
     color: white;
-    overflow: hidden;
-  }
-  
-  .landing-page {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .game-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
-    backdrop-filter: blur(8px); /* Apply blur effect to the background */
-    z-index: -1; /* Ensures it's in the background */
-    pointer-events: none; /* Prevent interaction with the blurred background */
-  }
-  
-  .content {
     text-align: center;
-    z-index: 1; /* Ensure content appears above the game background */
-    padding: 20px;
-    max-width: 600px; /* Limit the width of the content */
-    position: relative;
+    padding: 1em 0;
+    font-size: 1.5rem;
+}
+
+footer {
+    background-color: #333;
     color: white;
-    backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */
-  }
+    text-align: center;
+    padding: 1em 0;
+    margin-top: 20px;
+}
 
-  h1 {
-    font-size: 2rem;
-    margin-bottom: 20px;
-  }
+/* Grid Styles */
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px; /* Space between items */
+    padding: 20px; /* Space around the grid */
+}
 
-  p {
-    font-size: 1.2rem;
-    margin-bottom: 30px;
-  }
+/* Game Item */
+.item {
+    position: relative;
+    background-color: #444;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
+    width: 100%; /* Ensure it takes full width of the column */
+    height: 400px; /* Set a fixed height for all items */
+    display: flex;
+    flex-direction: column; /* Stack children vertically */
+}
 
-  button {
-    padding: 12px 24px;
-    background-color: #ffcc00;
-    color: black;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
+/* Ensure the image takes the top part of the card */
+.item img {
+    width: 100%;
+    height: 100%; /* Set a height for the image */
+    object-fit: cover;
+}
+
+.item .description { 
+    padding: 30px;
+    font-size: 1rem;
+    color: #ddd;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0 0 10px 10px;
+    flex-grow: 1; /* Allow description to take remaining space */
+}
+
+p { 
+    text-decoration: none;
+}
+
+/* Hover effect for scaling and glowing */
+.item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+    filter: brightness(1.2);
+}
+
+.item:hover img {
+    transform: scale(1.1); /* Slight zoom-in effect for the image */
+    filter: brightness(1.1); /* Increase image brightness */
+}
+
+.item h2 {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 1.5rem;
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 5px 15px;
     border-radius: 5px;
-    text-transform: uppercase;
-    transition: background-color 0.3s ease;
-  }
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
 
-  button:hover {
-    background-color: #ff9900;
-  }
+.item:hover h2 {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
+}
 
+/* Mobile Optimization */
+@media (max-width: 600px) {
+    header {
+        font-size: 1.2rem;
+    }
+
+    .item {
+        height: auto; /* Allow auto height on mobile for better responsiveness */
+        width: auto;
+    }
+
+    .grid-container{
+        grid-template-columns: repeat(1, 1fr);
+    }
+}

webGames/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game Collection</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Game Collection</h1>
+    </header>
+
+    <main>
+        <div class="grid-container">
+            <a href="link_to_snake_game" target="_blank" class="item">
+                <img src="../secret/../secret/images/snake.png" alt="Image can't be displayed">
+                <h2>Snake</h2>
+                <div class="description">
+                    <p>Guide the snake to eat food and grow longer while avoiding collisions with the walls and itself.</p>
+                </div>
+            </a>
+            <a href="link_to_solitaire_game" target="_blank" class="item">
+                <img src="../secret/images/solitaire.png" alt="Image can't be displayed">
+                <h2>Solitaire</h2>
+                <div class="description">
+                    <p>A classic card game where the objective is to move all cards to foundation piles in ascending order.</p>
+                </div>
+            </a>
+            <a href="link_to_minesweeper_game" target="_blank" class="item">
+                <img src="../secret/images/minesweeper.png" alt="Image can't be displayed">
+                <h2>Minesweeper</h2>
+                <div class="description">
+                    <p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
+                </div>
+            </a>
+            <a href="link_to_guess_my_number_game" target="_blank" class="item">
+                <img src="../secret/images/number.jpeg" alt="Image can't be displayed">
+                <h2>Guess My Number</h2>
+                <div class="description">
+                    <p>A simple game where you try to guess a randomly chosen number within a certain range.</p>
+                </div>
+            </a>
+            <a href="link_to_endless_runner_game" target="_blank" class="item">
+                <img src="../secret/images/endless_runner.png" alt="Image can't be displayed">
+                <h2>Endless Runner</h2>
+                <div class="description">
+                    <p>Run through an endless landscape, avoiding obstacles and collecting items to score points.</p>
+                </div>
+            </a>
+        </div>
+    </main>
+
+    <footer>
+        <p>&copy; 2025 Game Collection</p>
+    </footer>
+</body>
+</html>

webGames/styles.css

@@ -0,0 +1,120 @@
+/* Reset and box-sizing */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #282c34;
+    color: #ffffff;
+    margin: 0;
+}
+
+header {
+    background-color: #4CAF50;
+    color: white;
+    text-align: center;
+    padding: 1em 0;
+    font-size: 1.5rem;
+}
+
+footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1em 0;
+    margin-top: 20px;
+}
+
+/* Grid Styles */
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px; /* Space between items */
+    padding: 20px; /* Space around the grid */
+}
+
+/* Game Item */
+.item {
+    position: relative;
+    background-color: #444;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
+    width: 100%; /* Ensure it takes full width of the column */
+    height: 400px; /* Set a fixed height for all items */
+    display: flex;
+    flex-direction: column; /* Stack children vertically */
+}
+
+/* Ensure the image takes the top part of the card */
+.item img {
+    width: 100%;
+    height: 100%; /* Set a height for the image */
+    object-fit: cover;
+}
+
+.item .description { 
+    padding: 30px;
+    font-size: 1rem;
+    color: #ddd;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0 0 10px 10px;
+    flex-grow: 1; /* Allow description to take remaining space */
+}
+
+p { 
+    text-decoration: none;
+}
+
+/* Hover effect for scaling and glowing */
+.item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+    filter: brightness(1.2);
+}
+
+.item:hover img {
+    transform: scale(1.1); /* Slight zoom-in effect for the image */
+    filter: brightness(1.1); /* Increase image brightness */
+}
+
+.item h2 {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 1.5rem;
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 5px 15px;
+    border-radius: 5px;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.item:hover h2 {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
+}
+
+/* Mobile Optimization */
+@media (max-width: 600px) {
+    header {
+        font-size: 1.2rem;
+    }
+
+    .item {
+        height: auto; /* Allow auto height on mobile for better responsiveness */
+        width: auto;
+    }
+
+    .grid-container{
+        grid-template-columns: repeat(1, 1fr);
+    }
+}