-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (107 loc) · 5.73 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
<!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="OMG JS - A collection of fun games developed with JavaScript. Play games like Guess the Number and Rock Paper Scissors.">
<meta property="og:title" content="OMG JS - GAME">
<meta property="og:description" content="Fun game collection developed with JavaScript.">
<meta property="og:type" content="website">
<!-- viewport -->
<title>OMG JS - GAME</title>
<link rel="stylesheet" href="css/min.custom.css">
<link rel="icon" href="omg-js.png" type="image/png">
</head>
<body>
<div class="body-wrapper">
<!-- Header Section -->
<header class="header">
<h1>OMG JS - GAME</h1>
<!-- Navigation Section -->
<nav class="nav-bar-section" aria-label="Main Navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#games">Game</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main class="content">
<!-- Hero Section -->
<section class="hero-section">
<!-- hero image -->
<img src="omg-js.png" alt="Hero Image" class="hero-image">
<h2>A CTF like fun game collection developed with JavaScript</h2>
<p>Navigate each game down below and have fun!</p>
</section>
<!-- Games Section -->
<section class="games-section" id="games">
<!-- Game Card 1 -->
<article class="game-card">
<h3>BMW Winner</h3>
<p>
A simple game that asks for your name input and if you entered correct name, you win a BMW car.
This simple code game developed for
understanding the basic concepts like variables <span class="code-inline">var</span>, <span
class="code-inline">Array</span>,
and <span class="code-inline">window.prompt()</span>, and <span class="code-inline">
document.write()</span> functions.
hints: Check console by inspecting
</p>
<a href="./games/bmw-winner/index.html" class="play-button" aria-label="Play BMW Winner">Play</a>
</article>
<!-- Game Card 2 -->
<article class="game-card">
<h3>Magic Heading</h3>
<p>
Find out the magic keyword and win the easter egg, This is a advanced version of BMW Winner
game, In here
ask for a magic keyword and if you entered correct keyword, you win the easter egg, and reveal
the hidden link.
In here explores the concepts <span class="code-inline">document.querySelector()</span>
function, <span class="code-inline">addEventListener()</span>.
function and java script<span class="code-inline"> function()</span>.
</p>
<a href="./games/magic-heading/index.html" class="play-button" aria-label="Play Magic Heading">Play</a>
</article>
<!-- Gamec Card 3 -->
<article class="game-card">
<h3>Magic Heading Updated</h3>
<p>
A updated version of Magic Heading game, in here externalized the java script code and added some css to make it more interactive.
nothing really special about this version, with this version just for understanding how to externalize the java script code to your projects.
</p>
<a href="./games/magic-heading-updated/index.html" class="play-button"
aria-label="Play Magic Heading Updated">Play</a>
</article>
<!-- Game Card 4 -->
<article class="game-card">
<h3>Magic Number</h3>
<p>
A secret number guessing game, where you have to guess the secret number, guess the correct number and win the game. With this game you are able to get an idea about,
how to use the mathematical functions like <span class="code-inline">Math.floor()</span>, <span class="code-inline">Math.random()</span>, JavaScript
<span class="code-inline">Objects</span> and functions.
</p>
<a href="../omg-js/games/magic-number/index.html" class="play-button" aria-label="Play Magic Number">Play</a>
</article>
</section>
<!-- About Section -->
<section class="about-section" id="about">
<h2>About OMG JS - GAME</h2>
<p>
OMG JS - GAME is a collection of fun games developed with JavaScript. The main purpose of this project
is to explore the JavaScript concepts and to have fun while learning. The games are simple and easy to
understand, and they are developed with basic JavaScript concepts. Feel free to explore the games and
have fun!
</p>
</section>
</main>
<!-- Footer Section -->
<footer class="footer">
<p>Developed by: <a href="https://github.com/anoxtovo/" target="_blank" rel="noopener">@anoxtovo</a></p>
</footer>
</div>
</body>
</html>