Scribd
Upload
10 views17 pages

Game 12 Code

The document is an HTML template for a gaming website called 'Gaming Hub', featuring a header, navigation menu, hero section, and a news section showcasing the latest in gaming. It includes styles for layout and design, emphasizing a dark theme with vibrant accents. The content highlights various gaming news items and a gallery of gaming visuals, aiming to engage users with the latest updates and experiences in the gaming world.

Uploaded by

Usha Yadav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views17 pages

Game 12 Code

The document is an HTML template for a gaming website called 'Gaming Hub', featuring a header, navigation menu, hero section, and a news section showcasing the latest in gaming. It includes styles for layout and design, emphasizing a dark theme with vibrant accents. The content highlights various gaming news items and a gallery of gaming visuals, aiming to engage users with the latest updates and experiences in the gaming world.

Uploaded by

Usha Yadav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 17

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming Hub</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #ffffff;
margin: 0;
padding: 0;
}
header {
background-color: #1a1a1a;
padding: 20px;
text-align: center;
}
header h1 {
color: #00ffcc;
font-size: 2.5em;
}
nav {
display: flex;
justify-content: center;
background-color: #333333;
padding: 10px 0;
}
nav a {
color: #ffffff;
text-decoration: none;
margin: 0 15px;
font-size: 1.2em;
}
nav a:hover {
color: #00ffcc;
}
.hero {
background: url('https://placehold.co/1920x600') no-repeat center
center/cover;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.hero h2 {
font-size: 3em;
color: #00ffcc;
}
.content {
padding: 20px;
}
.news-section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.news-item {
background-color: #1a1a1a;
margin: 10px;
padding: 20px;
width: 300px;
border-radius: 10px;
}
.news-item img {
width: 100%;
border-radius: 10px;
}
.news-item h3 {
color: #00ffcc;
font-size: 1.5em;
}
.news-item p {
color: #cccccc;
}
footer {
background-color: #1a1a1a;
text-align: center;
padding: 20px;
}
footer p {
color: #cccccc;
}
</style>
</head>
<body>

<!-- Header -->


<header>
<h1>Gaming Hub</h1>
</header>

<!-- Navigation -->


<nav>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#reviews">Game Reviews</a>
<a href="#news">News</a>
<a href="#guides">Guides</a>
<a href="#forums">Forums</a>
<a href="#events">Events</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact Us</a>
<a href="#privacy">Privacy Policy</a>
</nav>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Gaming Hero & Gallery</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
}

/* Hero Section */
.hero {
background-image: url('https://images.unsplash.com/photo-1593642532973-
d31b6557fa68'); /* Appealing gaming background */
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
color: #fff;
}

.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}

.hero h2 {
font-size: 3em;
margin: 0;
z-index: 2;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
}

/* Gallery Section */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
padding: 20px;
max-width: 1200px;
margin: 20px auto;
}

figure {
margin: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-align: center;
transition: transform 0.3s ease;
}

figure:hover {
transform: translateY(-8px);
}

img {
width: 100%;
height: auto;
display: block;
}

figcaption {
padding: 10px;
font-size: 0.9em;
color: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
.hero h2 {
font-size: 2em;
}
}

@media (max-width: 480px) {


.hero h2 {
font-size: 1.5em;
}
}
</style>
</head>

<body>

<!-- Hero Section -->


<div class="hero">
<h2>Welcome to the Future of Gaming</h2>
</div>

<!-- Gallery Section -->


<main id="gallery">
<h2 style="text-align: center; margin: 20px 0; font-size: 2em;">Our Gaming
Highlights</h2>
<p style="text-align: center; margin-bottom: 20px; font-size:
1.1em;">Explore stunning gaming visuals and iconic moments from popular games.</p>
<div class="gallery">
<!-- Gaming Images -->
<figure>
<img src="https://cdn.mos.cms.futurecdn.net/uCM5mfWWfT9wFtFfK8HHt-
1200-80.jpg" alt="Epic Fortnite Battle Scene" loading="lazy">
<figcaption>Epic Fortnite Action</figcaption>
</figure>
<figure>
<img
src="https://cdnb.artstation.com/p/assets/images/images/034/350/092/large/aaron-
garcia-minecraft.jpg" alt="Minecraft Exploration" loading="lazy">
<figcaption>Explore the Minecraft World</figcaption>
</figure>
<figure>
<img src="https://cdn.mos.cms.futurecdn.net/9KwEdF9gSHn9wU38XZpXq-
1200-80.jpg" alt="Zelda Tears of the Kingdom" loading="lazy">
<figcaption>The Legend of Zelda - Tears of the Kingdom</figcaption>
</figure>
<figure>
<img src="https://images.pexels.com/photos/1233456/pexels-photo-
1233456.jpeg" alt="Cyberpunk futuristic city view" loading="lazy">
<figcaption>Cyberpunk - Cityscapes</figcaption>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2016/11/21/15/15/game-
1835791_960_720.jpg" alt="Apex Legends intense battle" loading="lazy">
<figcaption>Apex Legends - Intense Battle</figcaption>
</figure>
</div>
</main>

</body>

</html>

<!-- Main Content -->


<div class="content" id="home">
<h2>Latest in Gaming</h2>
<p>Stay updated with the latest news, reviews, and guides in the gaming world!
</p>

<section class="news-section">
<div class="news-item">
<img alt="A futuristic cityscape with neon lights and flying cars"
height="200"
src="https://storage.googleapis.com/a1aa/image/IzxoL05LrrIxA9hiJlNFVyT8mfogiUrfW4Wo
63WAbxjSNV7TA.jpg" width="300"/>
<h3>New Cyberpunk Game Released</h3>
<p>Experience the thrill of the latest cyberpunk game with stunning
graphics and an immersive storyline.</p>
</div>
<div class="news-item">
<img alt="A group of gamers playing a multiplayer game in a dark room
with neon lights" height="200"
src="https://storage.googleapis.com/a1aa/image/4kMx6MfCTg0JfUb0POi
9KxAq5dv4qMq5yeYd8wNyf3f1rpafE.jpg" width="300"/>
<h3>Multiplayer Madness</h3>
<p>Join the ultimate multiplayer experience with our new game modes and
features.</p>
</div>
<div class="news-item">
<img alt="A close-up of a gaming console with a futuristic design"
height="200"
src="https://storage.googleapis.com/a1aa/image/JbTNhZtL7T6pB1k5qvfBaJ5nlfVFsAQqQ4j7
BlSxfhHLbq2nA.jpg" width="300"/>
<h3>Next-Gen Console</h3>
<p>Discover the power of the next-generation gaming console with
unparalleled performance.</p>
</div>
<div class="news-item">
<img alt="A gamer wearing a VR headset immersed in a virtual world"
height="200"
src="https://storage.googleapis.com/a1aa/image/Ozev80AZWwU1HyF4gsIwpwJbnOe3YKSImqSt
B1CiVk1aNV7TA.jpg" width="300"/>
<h3>Virtual Reality Revolution</h3>
<p>Step into a new dimension with our latest VR games and
experiences.</p>
</div>
<div class="news-item">
<img alt="A detailed view of a fantasy game world with dragons and
castles" height="200"
src="https://storage.googleapis.com/a1aa/image/D8nDCEYpof0NfEnT5fryWgO8GUVjJpoTBZGv
30MQOtDmaq2nA.jpg" width="300"/>
<h3>Fantasy World Awaits</h3>
<p>Embark on an epic adventure in our new fantasy game, filled with
magic and mystery.</p>
</div>
<div class="news-item">
<img alt="A competitive esports event with a large audience and players
on stage" height="200"
src="https://storage.googleapis.com/a1aa/image/HXuY6E3a1uq0LVoLneA4QzqqX1XgMLv7lWfO
mNThaRCiNV7TA.jpg" width="300"/>
<h3>Esports Extravaganza</h3>
<p>Get ready for the biggest esports event of the year, featuring top
players and teams.</p>
</div>
<div class="news-item">
<img alt="A futuristic racing game with high-speed cars on a neon-lit
track" height="200"
src="https://storage.googleapis.com/a1aa/image/g15NRrg1RjKCP548PmY2zVFnSWhU7KgRYoH2
3ePKYozxmq9JA.jpg" width="300"/>
<h3>High-Speed Racing</h3>
<p>Feel the adrenaline rush in our new high-speed racing game with
cutting-edge graphics.</p>
</div>
<div class="news-item">
<img alt="A gamer using a high-tech gaming setup with multiple monitors
and RGB lighting" height="200"
src="https://storage.googleapis.com/a1aa/image/egeYAbeNJRY7Lp68og5fOx3MAvzKhmS2GFF8
5nsUfI4gspafE.jpg" width="300"/>
<h3>Ultimate Gaming Setup</h3>
<p>Upgrade your gaming experience with the ultimate setup, featuring
the latest tech and accessories.</p>
</div>
<div class="news-item">
<img alt="A detailed view of a post-apocalyptic game world with ruins
and survivors" height="200"
src="https://storage.googleapis.com/a1aa/image/5KgMAzt7Sez9AaDJkV9gfCNe4RYUiADHuhHl
8j49fr611UtPB.jpg" width="300"/>
<h3>Post-Apocalyptic Adventure</h3>
<p>Survive in a post-apocalyptic world with our new game, offering
intense action and strategy.</p>
</div>
<div class="news-item">
<img alt="A gamer playing a horror game with a terrified expression"
height="200"
src="https://storage.googleapis.com/a1aa/image/mRWcbM7XOV4HKNuYkTzBYisic6pppWR0R0zF
VGoRv77VT1eJA.jpg" width="300"/>
<h3>Horror Game Night</h3>
<p>Prepare for a spine-chilling experience with our latest horror game,
guaranteed to scare you.</p>
</div>
<div class="news-item">
<img alt="A detailed view of a sci-fi game world with alien landscapes
and futuristic technology" height="200"
src="https://storage.googleapis.com/a1aa/image/azdd7nsotNbgChbyJhMvgIgfFbbpQpIumRzM
wNiauw2vmq9JA.jpg" width="300"/>
<h3>Sci-Fi Exploration</h3>
<p>Explore the unknown in our new sci-fi game, featuring alien worlds
and advanced technology.</p>
</div>
<div class="news-item">
<img alt="A gamer participating in a battle royale game with intense
action" height="200"
src="https://storage.googleapis.com/a1aa/image/Y1xrOodnIGaSHBvJewperq6xT7IByht438dc
rMLDiZ1ZNV7TA.jpg" width="300"/>
<h3>Battle Royale</h3>
<p>Join the fight in our new battle royale game, where only the
strongest survive.</p>
</div>
<div class="news-item">
<img alt="A detailed view of a medieval game world with knights and
castles" height="200"
src="https://storage.googleapis.com/a1aa/image/rJ8QFBegAesNcEDzu833gmeXoeFw1TDhV9Zu
s7QZzIYX1UtPB.jpg" width="300"/>
<h3>Medieval Quest</h3>
<p>Embark on a medieval quest in our new game, featuring knights,
castles, and epic battles.</p>
</div>
<div class="news-item">
<img alt="A gamer using a high-tech gaming chair and accessories"
height="200"
src="https://storage.googleapis.com/a1aa/image/QgbcSf9W2kw3H6ZAOgabVrkS9GMOPOIz9Yyr
4bz56XNumq9JA.jpg" width="300"/>
<h3>Gaming Accessories</h3>
<p>Enhance your gaming experience with our range of high-tech
accessories and gear.</p>
</div>
<div class="news-item">
<img alt="A detailed view of a space exploration game with spaceships
and planets" height="200"
src="https://storage.googleapis.com/a1aa/image/wfxppWWybowpb6imJgZxYYfrAbH9PizTWHfr
K6f1RbSH1UtPB.jpg" width="300"/>
<h3>Space Exploration</h3>
<p>Venture into the cosmos with our new space exploration game,
featuring stunning visuals and gameplay.</p>
</div>
</section>
</div>

<!-- About Us -->


<main id="about">
<h2>About Us</h2>
<p>Our mission is to provide gamers with the latest news, reviews, and
community support.</p>
</main>

<!-- Game Reviews -->


<main id="reviews">
<h2>Game Reviews</h2>

<article>
<h3>Cyberpunk 2077</h3>
<p><strong>Genre:</strong> Action RPG</p>
<p><strong>Release Date:</strong> December 10, 2020</p>
<p><strong>Platforms:</strong> PC, PS4, PS5, Xbox One, Xbox Series X/S</p>
<p>
Set in the sprawling futuristic city of Night City, *Cyberpunk 2077*
immerses players in a vibrant open world filled with dynamic characters, high-tech
gadgets, and gripping storylines. While its launch was plagued by bugs, subsequent
updates have improved the experience significantly. The game offers deep
customization, thrilling combat, and a compelling narrative featuring Keanu Reeves
as Johnny Silverhand.
<strong>Rating:</strong> 8/10
</p>
</article>

<article>
<h3>The Legend of Zelda: Breath of the Wild</h3>
<p><strong>Genre:</strong> Action-Adventure</p>
<p><strong>Release Date:</strong> March 3, 2017</p>
<p><strong>Platforms:</strong> Nintendo Switch, Wii U</p>
<p>
This groundbreaking installment in the Zelda series redefined open-
world exploration. Players control Link as he journeys across the stunning
landscapes of Hyrule, solving puzzles, fighting enemies, and uncovering secrets.
The game encourages creativity and experimentation, making every playthrough
unique. Its breathtaking art style and atmospheric soundtrack further enhance the
experience.
<strong>Rating:</strong> 10/10
</p>
</article>

<article>
<h3>God of War: Ragnarok</h3>
<p><strong>Genre:</strong> Action-Adventure</p>
<p><strong>Release Date:</strong> November 9, 2022</p>
<p><strong>Platforms:</strong> PS4, PS5</p>
<p>
*God of War: Ragnarok* is the highly anticipated sequel to the 2018
hit, continuing the story of Kratos and his son, Atreus. This Norse-mythology-
inspired adventure delivers jaw-dropping visuals, brutal yet strategic combat, and
an emotionally resonant narrative. The dynamic father-son relationship forms the
emotional core of the story, elevating this game to a new level of storytelling in
gaming.
<strong>Rating:</strong> 9.5/10
</p>
</article>
</main>

<!-- News -->


<main id="news">
<h2>Gaming News</h2>
<article>
<h3>News Title 1</h3>
<p>Details about the latest gaming news, including releases and
updates.</p>
</article>
<article>
<h3>News Title 2</h3>
<p>Information on upcoming events and announcements in the gaming
industry.</p>
</article>
</main>

<main id="gaming-portal">
<h1>Gaming Portal</h1>

<!-- Gaming Guides -->


<section id="guides">
<h2>Gaming Guides</h2>
<article>
<h3>Mastering Elden Ring</h3>
<p>Discover the ultimate strategies and tips to excel in Elden Ring.
From beginner tactics to advanced gameplay mechanics, we have you covered.</p>
</article>
<article>
<h3>Conquer Apex Legends</h3>
<p>Learn insider tricks and expert techniques to dominate Apex Legends.
Perfect for players aiming to climb the leaderboards!</p>
</article>
</section>

<!-- Latest News -->


<section id="news">
<h2>Latest News</h2>
<article>
<h3>Cyberpunk 2077 Expansion "Phantom Liberty" Receives Acclaim</h3>
<p>The newly released "Phantom Liberty" expansion for Cyberpunk 2077
has been praised for its engaging narrative and significant gameplay improvements.
CD Projekt Red has also announced further updates to enhance player experience.</p>
</article>
<article>
<h3>Fortnite Introduces Unreal Editor for Custom Content Creation</h3>
<p>Epic Games has unveiled a new Unreal Editor for Fortnite, allowing
players to create highly detailed custom maps and experiences. This update aims to
revolutionize community-generated content and expand the creative possibilities
within the game.</p>
</article>
<article>
<h3>GTA VI Trailer Breaks Records</h3>
<p>The first official trailer for Grand Theft Auto VI has shattered
online viewership records, garnering millions of views within hours of release.
Rockstar Games teased an expansive open world and hinted at a 2025 release
date.</p>
</article>
</section>

<!-- Community Forums -->


<section id="forums">
<h2>Gaming Forums</h2>
<p>Join the discussion with gamers worldwide! Share your experiences,
strategies, and favorite moments in our interactive forums.</p>
<a href="/forums" class="button">Visit Forums</a>
</section>
<!-- Competitions -->
<section id="competitions">
<h2>Competitions</h2>
<article>
<h3>Weekly Tournaments</h3>
<p>Compete in our weekly tournaments for Apex Legends and win exclusive
prizes. Registration is free and open now!</p>
</article>
<article>
<h3>Seasonal Esports Championship</h3>
<p>Test your skills against the best in the Seasonal Esports
Championship. Qualifiers begin next month!</p>
</article>
</section>

<!-- Gaming Facts -->


<section id="facts">
<h2>Did You Know?</h2>
<ul>
<li>The global gaming industry is valued at over $200 billion, making
it larger than the movie and music industries combined.</li>
<li>The first video game ever created was "Tennis for Two," developed
in 1958.</li>
<li>Esports tournaments now offer prize pools exceeding $40 million,
with Dota 2's "The International" being a leading example.</li>
<li>Over 2.7 billion people play video games worldwide, accounting for
one-third of the global population.</li>
<li>The longest gaming marathon lasted over 35 hours, achieved during a
session of *World of Warcraft*.</li>
<li>In 2020, Animal Crossing: New Horizons became a cultural
phenomenon, selling over 37 million copies globally.</li>
<li>The PlayStation 2 remains the best-selling console of all time,
with over 155 million units sold since its launch in 2000.</li>
</ul>
</section>

<!-- Upcoming Events -->


<section id="events">
<h2>Upcoming Events</h2>
<article>
<h3>Game Expo 2024</h3>
<p>Experience the latest in gaming technology and meet industry leaders
at Game Expo 2024. Tickets are on sale now.</p>
</article>
<article>
<h3>Community Meetup</h3>
<p>Join fellow gamers in a local meetup to share stories, play games,
and forge new friendships. Check our events page for locations.</p>
</article>
</section>
</main>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Gaming Hub - Your ultimate destination for
the latest gaming news, reviews, and community support.">
<meta name="keywords" content="gaming, news, reviews, guides, forums, events,
gallery">
<title>Gaming Hub</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>

<style>
/* General Reset & Body */
body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #ffffff;
margin: 0;
padding: 0;
}

/* Header & Footer */


header {
background-color: #1a1a1a;
padding: 10px 20px;
text-align: center;
color: #00ffcc;
font-size: 2em;
}

footer {
background-color: #1a1a1a;
padding: 10px;
text-align: center;
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
}

/* General Game Container */


.game-container {
margin: 20px auto;
padding: 20px;
background-color: #1a1a1a;
border-radius: 10px;
text-align: center;
max-width: 800px;
}

/* Game Titles */
h3 {
color: #ffffff;
}

/* Buttons */
.game-button {
cursor: pointer;
color: #000;
background-color: #00ffcc;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 1em;
margin: 5px;
}

/* Tic Tac Toe Grid */


#ticTacToeBoard {
display: grid;
gap: 5px;
margin: 10px auto;
grid-template-columns: repeat(3, 50px);
}

.ticTacToeCell {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
color: #fff;
cursor: pointer;
height: 50px;
width: 50px;
}

/* Memory Game Grid */


#memoryGameBoard {
display: grid;
gap: 5px;
margin: 10px auto;
grid-template-columns: repeat(4, 50px);
}

.memoryCard {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 1em;
color: #fff;
cursor: pointer;
height: 50px;
width: 50px;
}

.matched {
background-color: #00ffcc;
}
</style>
</head>
<body>

<header>
Gaming Hub
</header>

<!-- Rock Paper Scissors -->


<div class="game-container">
<div>
<h3>Rock Paper Scissors</h3>
<button class="game-button" onclick="playRPS('Rock')">Rock</button>
<button class="game-button" onclick="playRPS('Paper')">Paper</button>
<button class="game-button" onclick="playRPS('Scissors')">Scissors</button>
<div id="rpsResult"></div>
</div>
</div>

<!-- Tic Tac Toe -->


<div class="game-container">
<div>
<h3>Tic Tac Toe</h3>
<button class="game-button" onclick="startTicTacToe()">Start Game</button>
<div id="ticTacToeBoard"></div>
</div>
</div>

<!-- Lucky 7 -->


<div class="game-container">
<div>
<h3>Lucky 7</h3>
<button class="game-button" onclick="playLucky7()">Play Lucky 7</button>
<div id="lucky7Result"></div>
</div>
</div>

<!-- Memory Card Game -->


<div class="game-container">
<div>
<h3>Memory Card Game</h3>
<button class="game-button" onclick="startMemoryGame()">Start Memory
Game</button>
<div id="memoryGameBoard"></div>
</div>
</div>

<footer>
&copy; 2023 Gaming Hub. All rights reserved.
</footer>

<script>
// Rock Paper Scissors Logic
function playRPS(userChoice) {
const choices = ['Rock', 'Paper', 'Scissors'];
const computerChoice = choices[Math.floor(Math.random() * 3)];
let result = '';

if (userChoice === computerChoice) {


result = "It's a tie!";
} else if (
(userChoice === 'Rock' && computerChoice === 'Scissors') ||
(userChoice === 'Paper' && computerChoice === 'Rock') ||
(userChoice === 'Scissors' && computerChoice === 'Paper')
) {
result = 'You win!';
} else {
result = 'You lose!';
}
document.getElementById('rpsResult').innerText =
`You chose ${userChoice}. Computer chose ${computerChoice}. ${result}`;
}

// Tic Tac Toe Logic


let ticTacToeBoard = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';

function startTicTacToe() {
ticTacToeBoard = Array(9).fill('');
currentPlayer = 'X';
renderTicTacToe();
}

function renderTicTacToe() {
const board = document.getElementById('ticTacToeBoard');
board.innerHTML = '';
ticTacToeBoard.forEach((cell, index) => {
const div = document.createElement('div');
div.className = 'ticTacToeCell';
div.innerText = cell;
div.onclick = () => handleMove(index);
board.appendChild(div);
});
}

function handleMove(index) {
if (ticTacToeBoard[index] || !currentPlayer) return;
ticTacToeBoard[index] = currentPlayer;
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
renderTicTacToe();
checkWinner();
}

function checkWinner() {
const winCombos = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
[0, 4, 8], [2, 4, 6] // Diagonals
];

for (let combo of winCombos) {


if (ticTacToeBoard[combo[0]] &&
ticTacToeBoard[combo[0]] === ticTacToeBoard[combo[1]] &&
ticTacToeBoard[combo[0]] === ticTacToeBoard[combo[2]]) {
alert(`${ticTacToeBoard[combo[0]]} wins!`);
startTicTacToe();
return;
}
}

if (!ticTacToeBoard.includes('')) {
alert("It's a tie!");
startTicTacToe();
}
}

// Lucky 7 Game Logic


function playLucky7() {
const number = Math.floor(Math.random() * 10) + 1;
document.getElementById('lucky7Result').innerText =
number === 7 ? 'Lucky 7! You win!' : `You rolled a ${number}`;
}
</script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming Moments Gallery</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

h2 {
text-align: center;
margin: 20px 0;
color: #222;
}

p {
text-align: center;
margin-bottom: 20px;
}

/* Gallery Section */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

figure {
margin: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
transition: transform 0.3s ease;
}
figure:hover {
transform: translateY(-8px);
}

img {
width: 100%;
height: auto;
display: block;
}

figcaption {
padding: 10px;
font-size: 0.9em;
color: #555;
}
</style>
</head>
<body>

<!-- Gallery -->


<main id="gallery">
<h2>Our Gaming Moments</h2>
<p>Explore our collection of gaming screenshots and fan art.</p>
<div class="gallery">
<figure>
<img src="download.jpg" alt="Fortnite battle scene" loading="lazy">
<figcaption>Fortnite - An epic battle moment</figcaption>
</figure>
<figure>
<img src="download.webp" alt="Minecraft Trails & Tales artwork"
loading="lazy">
<figcaption>Minecraft - Creative Trails & Tales
adventure</figcaption>
</figure>
<figure>
<img src="download (1).webp" alt="The Legend of Zelda: Tears of the
Kingdom" loading="lazy">
<figcaption>The Legend of Zelda - Tears of the Kingdom</figcaption>
</figure>
</div>
</main>

</body>
</html>

<!-- Contact Us -->


<main id="contact">
<h2>Contact Us</h2>
<p>If you have any questions or feedback, feel free to reach out!</p>
<form action="submit_contact.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</main>

<!-- Privacy Policy -->


<main id="privacy">
<h2>Your Privacy Matters</h2>
<p>Learn how we protect your personal information and privacy.</p>
<h3>Information We Collect</h3>
<p>We collect information that you provide to us directly, such as your name
and email address when you contact us.</p>
<h3>How We Use Your Information</h3>
<p>Your information is used to respond to your inquiries and improve our
services.</p>
<h3>Data Security</h3>
<p>We take reasonable measures to protect your information from unauthorized
access.</p>
</main>

<!-- Footer -->


<footer>
<p>&copy; 2023 Gaming Hub. All rights reserved.</p>
</footer>

</body>
</html>

You might also like