Skip to content

Commit 87c9fa5

Browse files
aayush105aayush105
authored
Merge pull request #843 from ARP-Proworks07/master
matching cards name
2 parents 015989d + c3f2a63 commit 87c9fa5

File tree

2 files changed

+175
-0
lines changed

2 files changed

+175
-0
lines changed

‎Memory-Matching-Game/index.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Memory Matching Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="game-container">
11+
<!-- Row 1 -->
12+
<button class="card" data-match="1">
13+
<div class="card-face front">🌟</div>
14+
<div class="card-face back"></div>
15+
</button>
16+
<button class="card" data-match="1">
17+
<div class="card-face front">🌟</div>
18+
<div class="card-face back"></div>
19+
</button>
20+
<button class="card" data-match="2">
21+
<div class="card-face front">🎈</div>
22+
<div class="card-face back"></div>
23+
</button>
24+
<button class="card" data-match="2">
25+
<div class="card-face front">🎈</div>
26+
<div class="card-face back"></div>
27+
</button>
28+
<!-- Row 2 -->
29+
<button class="card" data-match="3">
30+
<div class="card-face front">🎮</div>
31+
<div class="card-face back"></div>
32+
</button>
33+
<button class="card" data-match="3">
34+
<div class="card-face front">🎮</div>
35+
<div class="card-face back"></div>
36+
</button>
37+
<button class="card" data-match="4">
38+
<div class="card-face front">🎨</div>
39+
<div class="card-face back"></div>
40+
</button>
41+
<button class="card" data-match="4">
42+
<div class="card-face front">🎨</div>
43+
<div class="card-face back"></div>
44+
</button>
45+
<!-- Row 3 -->
46+
<button class="card" data-match="5">
47+
<div class="card-face front">🌈</div>
48+
<div class="card-face back"></div>
49+
</button>
50+
<button class="card" data-match="5">
51+
<div class="card-face front">🌈</div>
52+
<div class="card-face back"></div>
53+
</button>
54+
<button class="card" data-match="6">
55+
<div class="card-face front">🎵</div>
56+
<div class="card-face back"></div>
57+
</button>
58+
<button class="card" data-match="6">
59+
<div class="card-face front">🎵</div>
60+
<div class="card-face back"></div>
61+
</button>
62+
<!-- Row 4 -->
63+
<button class="card" data-match="7">
64+
<div class="card-face front">🚀</div>
65+
<div class="card-face back"></div>
66+
</button>
67+
<button class="card" data-match="7">
68+
<div class="card-face front">🚀</div>
69+
<div class="card-face back"></div>
70+
</button>
71+
<button class="card" data-match="8">
72+
<div class="card-face front">🎪</div>
73+
<div class="card-face back"></div>
74+
</button>
75+
<button class="card" data-match="8">
76+
<div class="card-face front">🎪</div>
77+
<div class="card-face back"></div>
78+
</button>
79+
</div>
80+
</body>
81+
</html>

‎Memory-Matching-Game/style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: #1a1a1a;
13+
font-family: Arial, sans-serif;
14+
}
15+
16+
.game-container {
17+
display: grid;
18+
grid-template-columns: repeat(4, 1fr);
19+
gap: 1rem;
20+
perspective: 1000px;
21+
}
22+
23+
.card {
24+
position: relative;
25+
width: 100px;
26+
height: 100px;
27+
transform-style: preserve-3d;
28+
transition: transform 0.5s;
29+
cursor: pointer;
30+
}
31+
32+
.card-face {
33+
position: absolute;
34+
width: 100%;
35+
height: 100%;
36+
backface-visibility: hidden;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
font-size: 2em;
41+
border-radius: 10px;
42+
box-shadow: 0 0 10px rgba(0,0,0,0.5);
43+
}
44+
45+
.front {
46+
background: #2196f3;
47+
transform: rotateY(180deg);
48+
}
49+
50+
.back {
51+
background: #ff4081;
52+
}
53+
54+
.card:focus {
55+
outline: none;
56+
transform: rotateY(180deg);
57+
}
58+
59+
.card:focus ~ .card:focus {
60+
transform: rotateY(0deg);
61+
}
62+
63+
.card:nth-child(2n):focus ~ .card:nth-child(2n):focus {
64+
background: #4caf50;
65+
}
66+
67+
/* Match pairs using tabindex and focus states */
68+
.card[data-match="1"]:focus ~ .card[data-match="1"]:focus,
69+
.card[data-match="2"]:focus ~ .card[data-match="2"]:focus,
70+
.card[data-match="3"]:focus ~ .card[data-match="3"]:focus,
71+
.card[data-match="4"]:focus ~ .card[data-match="4"]:focus,
72+
.card[data-match="5"]:focus ~ .card[data-match="5"]:focus,
73+
.card[data-match="6"]:focus ~ .card[data-match="6"]:focus,
74+
.card[data-match="7"]:focus ~ .card[data-match="7"]:focus,
75+
.card[data-match="8"]:focus ~ .card[data-match="8"]:focus {
76+
transform: rotateY(180deg);
77+
pointer-events: none;
78+
}
79+
80+
/* Matched cards styling */
81+
.card:focus:valid {
82+
transform: rotateY(180deg) scale(0.95);
83+
opacity: 0.8;
84+
}
85+
86+
@media (max-width: 500px) {
87+
.game-container {
88+
grid-template-columns: repeat(3, 1fr);
89+
}
90+
.card {
91+
width: 80px;
92+
height: 80px;
93+
}
94+
}

0 commit comments

Comments
 (0)