This repository has been archived by the owner on Jul 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (142 loc) · 4.93 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
<!--
* Shubham Prakash
* Email: [email protected]
* LinkedIn: https://www.linkedin.com/in/ishubhamprakash/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shubham's Memory Game</title>
<meta name="description" content="Shubham's Memory card game">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch|M+PLUS+Rounded+1c" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="popup start-popup">
<div class="game-start">
<h1 class="heading">MEMORY CARD GAME</h1>
<h2 class="sub-heading">- Test your memory -</h2>
<ul>
<li>You have <b>5 seconds</b> to remember the positions of different cards.</li>
<li>All the cards will be flipped back and you will find the pairs.</li>
<li>One who find all pair in least time will win the game.</li>
</ul>
<h2 class="sub-heading">The game begins once the timer starts</h2>
<button class="myButton start-game">Let's get started</button>
</div>
</div>
<div class="popup end-popup hide-popup">
<div class="game-over">
<h1 class="heading">Congratulations!</h1>
<h2 class="sub-heading"><i class="fa fa-trophy"> </i>   You Won!!</h2>
<div class="show-star"></div>
<h2>Time: <span class="time-show"></span></h2>
<h2>Your score: <span class="score-show"></span></h2>
<button class="myButton reStartGame">Restart the game</button>
</div>
</div>
<div class="container">
<header>
<h1 class="heading">Shubham's Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li>
<i class="fa fa-star star"></i>
</li>
<li>
<i class="fa fa-star star"></i>
</li>
<li>
<i class="fa fa-star star"></i>
</li>
<li>
<i class="fa fa-star star"></i>
</li>
<li>
<i class="fa fa-star star"></i>
</li>
</ul>
<div class="move-time-container">
<span class="moves">0</span> Moves  
<i class="time"> <span class="min">00 </span>min :<span class="sec"> 00 </span> sec </i>
</div>
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card show match">
<i class="fa fa-diamond"></i>
</li>
<li class="card show match">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card show match">
<i class="fa fa-anchor"></i>
</li>
<li class="card show match">
<i class="fa fa-bolt"></i>
</li>
<li class="card show match">
<i class="fa fa-cube"></i>
</li>
<li class="card show match">
<i class="fa fa-anchor"></i>
</li>
<li class="card show match">
<i class="fa fa-leaf"></i>
</li>
<li class="card show match">
<i class="fa fa-bicycle"></i>
</li>
<li class="card show match">
<i class="fa fa-diamond"></i>
</li>
<li class="card show match">
<i class="fa fa-bomb"></i>
</li>
<li class="card show match">
<i class="fa fa-leaf"></i>
</li>
<li class="card show match">
<i class="fa fa-bomb"></i>
</li>
<li class="card show match">
<i class="fa fa-bolt"></i>
</li>
<li class="card show match">
<i class="fa fa-bicycle"></i>
</li>
<li class="card show match">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card show match">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<div class="instruction-container">
<h1 class="heading">How The Game Works</h1>
<p>The game board consists of sixteen "cards" arranged in a grid. The deck is made up of eight different pairs of
cards, each with different symbols on one side. The cards are arranged randomly on the grid with the symbol face
down.</p>
<p><b>The gameplay rules are very simple:</b><i> Flip over two hidden cards at a time to locate the ones that
match!</i></p>
<b>Each turn:</b>
<ul>
<li>The player flips one card over to reveal its underlying symbol.</li>
<li>Player then turns over a second card, trying to find the corresponding card with the same symbol.</li>
<li> If the cards match, both cards stay flipped over.</li>
<li>If the cards do not match, both cards are flipped face down.</li>
</ul>
<p><b>The game ends once all cards have been correctly matched.</b></p>
</div>
<footer class="footer">Made with <i class="fa fa-heart"> </i> by Shubham</footer>
<script src="js/app.js"></script>
</body>
</html>