Skip to content

Commit 01e9c36

Browse files
rohithpalarohithpala
committed
Memory Crad Game using HTML, CSS & JS
1 parent 28ba438 commit 01e9c36

34 files changed

+448
-0
lines changed

‎memory-card-game/images/image0.jpg

1.33 MB
Loading

‎memory-card-game/images/image1.jpg

906 KB
Loading

‎memory-card-game/images/image10.jpg

5.62 MB
Loading

‎memory-card-game/images/image11.jpg

860 KB
Loading

‎memory-card-game/images/image12.jpg

6.13 MB
Loading

‎memory-card-game/images/image13.jpg

1.25 MB
Loading

‎memory-card-game/images/image14.jpg

3.54 MB
Loading

‎memory-card-game/images/image15.jpg

3.03 MB
Loading

‎memory-card-game/images/image16.jpg

2.82 MB
Loading

‎memory-card-game/images/image17.jpg

907 KB
Loading

‎memory-card-game/images/image18.jpg

2.5 MB
Loading

‎memory-card-game/images/image19.jpg

1.98 MB
Loading

‎memory-card-game/images/image2.jpg

798 KB
Loading

‎memory-card-game/images/image20.jpg

2.28 MB
Loading

‎memory-card-game/images/image21.jpg

1.87 MB
Loading

‎memory-card-game/images/image22.jpg

2.22 MB
Loading

‎memory-card-game/images/image23.jpg

4.3 MB
Loading

‎memory-card-game/images/image24.jpg

1.83 MB
Loading

‎memory-card-game/images/image25.jpg

871 KB
Loading

‎memory-card-game/images/image26.jpg

4.35 MB
Loading

‎memory-card-game/images/image27.jpg

1.3 MB
Loading

‎memory-card-game/images/image28.jpg

702 KB
Loading

‎memory-card-game/images/image29.jpg

4.22 MB
Loading

‎memory-card-game/images/image3.jpg

3.42 MB
Loading

‎memory-card-game/images/image4.jpg

1.16 MB
Loading

‎memory-card-game/images/image5.jpg

2.46 MB
Loading

‎memory-card-game/images/image6.jpg

1.55 MB
Loading

‎memory-card-game/images/image7.jpg

318 KB
Loading

‎memory-card-game/images/image8.jpg

6.34 MB
Loading

‎memory-card-game/images/image9.jpg

2.62 MB
Loading

‎memory-card-game/images/qm.png

8.11 KB
Loading

‎memory-card-game/memory-card-game.css

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
2+
3+
* {
4+
font-family: "Poppins", sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
:root {
11+
--cols: 4;
12+
}
13+
14+
/* N Cards Container */
15+
.n-cards-container {
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
align-items: center;
20+
height: 100vh;
21+
}
22+
23+
.n-cards-container span {
24+
margin-bottom: 10px;
25+
font-size: 17px;
26+
font-weight: 600;
27+
letter-spacing: 1px;
28+
}
29+
30+
.n-cards {
31+
position: relative;
32+
width: 350px;
33+
margin: 10px 0;
34+
padding: 20px 0 20px 20px;
35+
border: 2px solid #000;
36+
font-size: 20px;
37+
letter-spacing: 2px;
38+
cursor: pointer;
39+
transition: background-color 0.3s ease;
40+
}
41+
42+
.n-cards::after {
43+
position: absolute;
44+
right: 0;
45+
opacity: 0;
46+
content: ">";
47+
font-weight: 600;
48+
transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;
49+
}
50+
51+
.n-cards:hover::after {
52+
right: 10px;
53+
opacity: 1;
54+
}
55+
56+
.n-cards:nth-child(4n):hover {
57+
color: #FFF;
58+
background-color: #6753FD;
59+
}
60+
61+
.n-cards:nth-child(4n+1):hover {
62+
color: #FFF;
63+
background-color: #efc92f;
64+
}
65+
66+
.n-cards:nth-child(4n+2):hover {
67+
color: #FFF;
68+
background-color: #fd9753;
69+
}
70+
71+
.n-cards:nth-child(4n+3):hover {
72+
color: #FFF;
73+
background-color: #fd53cd;
74+
}
75+
76+
/* Game Container */
77+
78+
/* Navbar */
79+
nav {
80+
position: fixed;
81+
top: 0;
82+
left: 0;
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
width: 100%;
87+
padding: 30px;
88+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
89+
}
90+
91+
nav>div {
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
}
96+
97+
.moves-container {
98+
display: flex;
99+
justify-content: center;
100+
align-items: center;
101+
}
102+
103+
span.moves {
104+
font-weight: 600;
105+
margin-left: 5px;
106+
}
107+
108+
.nav-home-btn,
109+
.nav-restart-btn {
110+
display: flex;
111+
justify-content: center;
112+
align-items: center;
113+
color: #fff;
114+
background-color: #ff4848;
115+
margin-left: 10px;
116+
padding: 5px 15px;
117+
font-weight: 600;
118+
cursor: pointer;
119+
}
120+
121+
.nav-home-btn {
122+
background-color: #009700;
123+
}
124+
125+
.game-container {
126+
display: none;
127+
flex-direction: column;
128+
justify-content: center;
129+
align-items: center;
130+
height: 100vh;
131+
}
132+
133+
.game-grid {
134+
display: grid;
135+
place-items: center;
136+
grid-template-columns: repeat(var(--cols), 1fr);
137+
grid-gap: 10px;
138+
}
139+
140+
.game-grid>div {
141+
display: flex;
142+
justify-content: center;
143+
align-items: center;
144+
width: 110px;
145+
height: 110px;
146+
border: 4px solid #000;
147+
cursor: pointer;
148+
}
149+
150+
.game-grid>div img {
151+
width: 100px;
152+
height: 100px;
153+
}
154+
155+
.game-grid>div>.open {
156+
display: none;
157+
}
158+
159+
/* Modal */
160+
.final-moves,
161+
.time-taken {
162+
font-weight: 600;
163+
}
164+
165+
.button {
166+
background-color: transparent;
167+
margin: 20px 10px;
168+
padding: 4px 10px;
169+
cursor: pointer;
170+
}
171+
172+
.game-completed-modal {
173+
display: none;
174+
position: fixed;
175+
top: 0;
176+
left: 0;
177+
width: 100vw;
178+
min-height: 100vh;
179+
flex-direction: column;
180+
justify-content: center;
181+
align-items: center;
182+
background-color: rgba(0, 0, 0, 0.2);
183+
}
184+
185+
.modal {
186+
position: relative;
187+
background-color: #fff;
188+
width: 500px;
189+
max-width: 100%;
190+
text-align: center;
191+
padding: 2rem;
192+
border-radius: 5px;
193+
}
194+
195+
.modal>span {
196+
display: block;
197+
}
198+
199+
.close-btn {
200+
position: absolute;
201+
top: 10px;
202+
right: 10px;
203+
display: flex;
204+
justify-content: center;
205+
align-items: center;
206+
color: #fff;
207+
background-color: #f00;
208+
border-radius: 50%;
209+
width: 20px;
210+
height: 20px;
211+
cursor: pointer;
212+
}
213+
214+
/* Written by ... */
215+
#written-by-container {
216+
display: flex;
217+
flex-direction: column;
218+
justify-content: center;
219+
align-items: center;
220+
border: 2px solid #000;
221+
border-radius: 10px;
222+
padding: 1rem;
223+
margin-top: 30px;
224+
}
225+
226+
#written-by-container a {
227+
color: #000;
228+
}

‎memory-card-game/memory-card-game.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Memory Game | Card Game</title>
9+
10+
<link rel="stylesheet" href="memory-card-game.css">
11+
<script src="memory-card-game.js" defer></script>
12+
</head>
13+
14+
<body>
15+
<div class="n-cards-container">
16+
<span>Choose the No. of Cards to play</span>
17+
<div class="n-cards" data-n="12">12</div>
18+
<div class="n-cards" data-n="16">16</div>
19+
<div class="n-cards" data-n="20">20</div>
20+
<div class="n-cards" data-n="24">24</div>
21+
22+
<div id="written-by-container">
23+
<h3>Written by <a href="https://github.com/rohithpala" target="_blank">Rohith Pala</a> with &hearts;.</h3>
24+
<h3>You can find the code of this project
25+
<a href="https://github.com/rohithpala/HTML-CSS-JS-Projects/tree/main/memory-card-game"
26+
target="_blank">here</a>
27+
</h3>
28+
</div>
29+
</div>
30+
<div class="game-container">
31+
<nav>
32+
<div>
33+
<button class="nav-home-btn">Home</button>
34+
<button class="nav-restart-btn">Restart</button>
35+
</div>
36+
<div class="timer">
37+
<span class="minutes">00</span> :
38+
<span class="seconds">00</span>
39+
</div>
40+
<div class="moves-container">Moves : <span class="moves">0</span></div>
41+
</nav>
42+
43+
<div class="game-grid"></div>
44+
</div>
45+
46+
</body>
47+
<div class="game-completed-modal">
48+
<div class="modal">
49+
<span>
50+
You've Succesfully Completed the Game in <span class="final-moves"></span> moves
51+
<span>Time Taken : <span class="time-taken">00:00</span></span>
52+
</span>
53+
<button class="button home-btn">Go back to Home</button>
54+
<button class="button restart-btn">Restart this game</button>
55+
<button class="close-btn">x</button>
56+
</div>
57+
</div>
58+
59+
</html>

0 commit comments

Comments
 (0)