Skip to content

Commit bb5b5c0

Browse files
sudhanshu-rajsudhanshu-raj
committed
Merge remote-tracking branch 'upstream/master'
Merging remote changes to local :wq .
2 parents 044bc46 + b46f0ce commit bb5b5c0

32 files changed

+1356
-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+
}

‎Pokemon-Mewtwo-Card/G-letter.png‎

1.21 MB
Loading

‎Pokemon-Mewtwo-Card/Mewtwo.mp4‎

2.33 MB
Binary file not shown.

‎Pokemon-Mewtwo-Card/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Mewtwo Pokémon Card (CSS-only)
2+
3+
A CSS-only Pokémon card featuring Mewtwo. Built with pure HTML and CSS, custom webfonts, and layered imagery. No JavaScript.
4+
5+
## Demo
6+
7+
- Open the live demo page: `Pokemon-Mewtwo-Card/mewtwo.html`
8+
9+
## Preview
10+
11+
![Mewtwo Card Thumbnail](../images/mewtwo-card.png)
12+
13+
<video src="./Mewtwo.mp4" controls width="640" poster="../images/mewtwo-card.png">
14+
Your browser does not support the video tag.
15+
</video>
16+
17+
## Files
18+
19+
- `mewtwo.html` – markup for the card
20+
- `mewtwo.css` – styling for layout, fonts, and effects
21+
- `mewtwo1.jpeg` – Mewtwo artwork
22+
- `pokeball.png` – favicon
23+
- `dark.gif` – background
24+
- `G-letter.png`, `X1.png` – GX badge images
25+
- `fonts/` – bundled webfonts used by the card
26+
27+
## Credits
28+
29+
- Made by **SamXop123** – https://github.com/SamXop123
30+
- Assets included for demo purposes per repository license guidelines.
31+
32+
## License
33+
34+
This demo is contributed under the project license (**GPL-3.0**). See the root `LICENSE` file for details.

‎Pokemon-Mewtwo-Card/X1.png‎

76.4 KB
Loading

‎Pokemon-Mewtwo-Card/dark.gif‎

18.1 MB
Loading

‎Pokemon-Mewtwo-Card/fonts/comic-webfont.woff‎

35.2 KB
Binary file not shown.

‎Pokemon-Mewtwo-Card/fonts/comic-webfont.woff2‎

27.7 KB
Binary file not shown.

‎Pokemon-Mewtwo-Card/fonts/erasbd-webfont.woff‎

30.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)