-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (165 loc) · 6.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GameWorld - Play the Best Online Games</title>
<meta name="description" content="Play the best online games for free on GameWorld. Explore action, puzzle, racing, and adventure games.">
<meta name="keywords" content="online games, free games, puzzle, racing, action, adventure">
<meta name="author" content="GameWorld">
<meta property="og:title" content="GameWorld - Play the Best Online Games">
<meta property="og:description" content="Enjoy the most exciting online games on GameWorld. Free and fun games for everyone!">
<meta property="og:image" content="https://example.com/gameworld-thumbnail.jpg">
<meta property="og:url" content="https://example.com">
<link rel="icon" type="image/png" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #121212;
color: #e4e4e4;
overflow-x: hidden;
}
#particle-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.website-name {
font-size: 2rem;
font-weight: bold;
color: #ff5722;
}
.game-container iframe {
width: 100%;
height: 400px;
border-radius: 10px;
border: 0;
}
.game-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}
/* Updated link hover effect */
.nav-link, footer a {
transition: color 0.3s ease-in-out, text-decoration 0.3s;
}
.nav-link:hover, footer a:hover {
color: #ff5722 !important;
text-decoration: underline;
}
</style>
</head>
<body>
<canvas id="particle-canvas"></canvas>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg p-3">
<div class="container">
<a class="navbar-brand website-name" href="#">GameWorld</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link text-light" href="#">Puzzle</a></li>
<li class="nav-item"><a class="nav-link text-light" href="#">Racing</a></li>
<li class="nav-item"><a class="nav-link text-light" href="#">Action</a></li>
<li class="nav-item"><a class="nav-link text-light" href="#">Adventure</a></li>
</ul>
</div>
</div>
</nav>
<div class="text-center bg-danger text-white py-3">
Advertise your game here! Contact us for details.
</div>
<div class="container my-4 text-center">
<div class="game-container p-3 bg-dark rounded">
<iframe src="https://htmlxm.github.io/h3/tag/" title="Game"></iframe>
</div>
<div class="game-details bg-secondary p-4 mt-4 rounded">
<h2 class="text-warning">Fast Track Racer</h2>
<p>Dive into the world of endless racing! Challenge your friends, conquer tracks, and unlock new levels with stunning visuals.</p>
</div>
</div>
<div class="container my-5">
<h3 class="text-center text-warning">Other Games You Might Like</h3>
<div class="row row-cols-2 row-cols-md-4 g-4 mt-3">
<div class="col">
<div class="game-card text-center bg-dark p-3 rounded">
<img src="https://via.placeholder.com/140" class="img-fluid rounded" alt="Game 1">
<p class="mt-2">Game 1</p>
</div>
</div>
<div class="col">
<div class="game-card text-center bg-dark p-3 rounded">
<img src="https://via.placeholder.com/140" class="img-fluid rounded" alt="Game 2">
<p class="mt-2">Game 2</p>
</div>
</div>
<div class="col">
<div class="game-card text-center bg-dark p-3 rounded">
<img src="https://via.placeholder.com/140" class="img-fluid rounded" alt="Game 3">
<p class="mt-2">Game 3</p>
</div>
</div>
<div class="col">
<div class="game-card text-center bg-dark p-3 rounded">
<img src="https://via.placeholder.com/140" class="img-fluid rounded" alt="Game 4">
<p class="mt-2">Game 4</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-center text-light py-4 mt-4">
<a href="#" class="text-light mx-2">About</a>
<a href="#" class="text-light mx-2">Terms of Use</a>
<a href="#" class="text-light mx-2">Privacy Policy</a>
<a href="#" class="text-light mx-2">Contact</a>
</footer>
<script>
const canvas = document.getElementById("particle-canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particlesArray = [];
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 4 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > canvas.width || this.x < 0) this.x = Math.random() * canvas.width;
if (this.y > canvas.height || this.y < 0) this.y = Math.random() * canvas.height;
}
draw() {
ctx.fillStyle = "rgba(255, 87, 34, 0.8)";
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function initParticles() {
for (let i = 0; i < 100; i++) {
particlesArray.push(new Particle());
}
}
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particlesArray.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animateParticles);
}
initParticles();
animateParticles();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>