2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merapihkan card

Browse Source
This commit is contained in:
Evelyn 2025-12-08 07:30:57 +07:00
parent a0efd7d8b3
commit f6ceabc9e6
2 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
gameboard-easy.html
View File

@ -198,14 +198,50 @@ body {
font-weight: 600; font-weight: 600;
} }
.gameboard {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 25px 40px;
box-sizing: border-box;
place-items: center;
}
.card {
width: 100%;
aspect-ratio: 4 / 3;
perspective: 1000px;
cursor: pointer;
}
.play-again { background: #b700ff; color: white; } .play-again { background: #b700ff; color: white; }
.leaderboard { background: gold; } .leaderboard { background: gold; }
.back-menu { background: #444; color: white; } /* ← DITAMBAHKAN */ .back-menu { background: #444; color: white; }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity:0; transform: scale(0.8); } from { opacity:0; transform: scale(0.8); }
to { opacity:1; transform: scale(1); } to { opacity:1; transform: scale(1); }
} }
@media (max-width: 900px) {
.gameboard {
grid-template-columns: repeat(3, 1fr);
padding: 20px;
gap: 12px;
}
}
@media (max-width: 600px) {
.gameboard {
grid-template-columns: repeat(2, 1fr);
padding: 14px;
gap: 10px;
}
}
</style> </style>
</head> </head>
<body> <body>

32
gameboard-medium.html
View File

@ -200,10 +200,42 @@ body {
font-weight: 600; font-weight: 600;
} }
.gameboard {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 25px 40px;
box-sizing: border-box;
place-items: center;
}
.card {
width: 100%;
aspect-ratio: 4 / 3;
perspective: 1000px;
cursor: pointer;
}
.play-again { background: #b700ff; color: white; } .play-again { background: #b700ff; color: white; }
.leaderboard { background: gold; } .leaderboard { background: gold; }
.back-menu { background: #444; color: white; } .back-menu { background: #444; color: white; }
@media (max-width: 900px) {
.gameboard {
grid-template-columns: repeat(3, 1fr);
padding: 20px;
gap: 12px;
}
}
@media (max-width: 600px) {
.gameboard {
grid-template-columns: repeat(2, 1fr);
padding: 14px;
gap: 10px;
}
}
</style> </style>
</head> </head>
<body> <body>