Match the cards before you run out of time! โฐ
- Live Site URL: https://ishantbhurani.github.io/memory-game/
- Flipping cards
- Cards arranged randomly
- Countdown timer
- Levels, with increasing cards
- Timer increases with each level
- Matching the correct pair rewards extra 2 seconds
Clone the project
git clone [email protected]:ishantbhurani/memory-game.git
Go to the project directory
cd memory-game
Run index.html
<browsername> index.html
E.g.
firefox index.html
google-chrome index.html
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- card flip animation
.card {
width: 150px;
height: 150px;
position: relative;
perspective: 800px;
cursor: pointer;
}
.card::before,
.card::after {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: 0.6s;
box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.2);
border-radius: 0.5em;
z-index: -1;
}
.card::before {
background: url("../images/default.jpg") center/cover no-repeat;
}
.card::after {
background: var(--card-img, hsl(0, 0%, 90%, 0.5)) center/cover no-repeat;
transform: rotateY(180deg);
}
.card.flipped::before {
transform: rotateY(-180deg);
}
.card.flipped::after {
transform: rotateY(0);
}
- Countdown timer
- Dynamic grid elements
- Eddy Sims Codepen - card flipping animation
- W3School - card flipping animation
- Twitter - @IShaunt