jasterv/MEMORY-CARD-GAME
1
0
Fork 0
mirror of https://codeberg.org/JasterV/MEMORY-CARD-GAME.git synced 2026-04-26 18:20:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🛬🏜 Checkpoint

Browse source 
./style.css:18108127/275
./index.html:18108127/109
This commit is contained in:
Glitch (hello-webpage) 2020-07-29 22:04:20 +00:00
parent 0f18c39cdd
commit f75a68776c
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -30,12 +30,12 @@
<div class="congrats-container hide">
<h1>
YOU WIN! 🎉
You win! 🎉
</h1>
<h3>
You won in <strong id="user-seconds"></strong>
</h3>
<button id="play-again-btn" class="game-button">Play Again</button>
<button id="play-again-btn" class="game-button"><i class="fas fa-undo-alt"></i></button>
</div>
</div>

11
style.css
View file

@ -23,7 +23,6 @@ h2 {
.cards-row {
display: flex;
min-height: 400px;
min-width: 600px;
height: 70%;
width: 100%;
justify-content: center;
@ -44,7 +43,7 @@ h2 {
width: 100%;
height: 100%;
min-width: 420px;
max-width: 720px;
max-width: 550px;
}
.images-grid {
@ -115,15 +114,17 @@ input[type="text"] {
outline: none;
border-radius: 100px;
border: 2px solid hsla(208, 80%, 80%, 1);
transition: 300ms ease-out;
font-family: "Montserrat Alternates", sans-serif;
letter-spacing: 1px;
color: hsla(208, 80%, 70%, 1);
transition: 300ms ease-out;
}
input[type="text"]:focus {
transform: scale(1.1) translateY(-8px);
box-shadow: 0 6px 12px rgba(12, 64, 110, 0.1);
box-shadow: 0 3px 6px rgba(12, 64, 110, 0.1);
border: 2px solid hsla(208, 80%, 60%, 1);
filter: drop-shadow(0 0 6px hsla(208, 100%, 90%, 1));
}
input[type="text"]:focus ~ .placeholder {
@ -162,7 +163,7 @@ input[type="text"]:focus ~ .placeholder {
box-shadow: 0 0px 0 #1b6fb8;
}
.game-button i {
.game-button i, .fa-undo-alt {
font-size: 1.5rem;
}