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/230:18108132/11815
./.glitch-assets:18108127/372
This commit is contained in:
Glitch (hello-webpage) 2020-07-29 21:52:43 +00:00
parent f8c33f7cb4
commit 0f18c39cdd
2 changed files with 23 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.glitch-assets
View file

@ -46,3 +46,4 @@
{"name":"diamonds-3.svg","date":"2020-07-29T21:16:41.996Z","url":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fdiamonds-3.svg","type":"image/svg+xml","size":2682,"imageWidth":97,"imageHeight":150,"thumbnail":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fdiamonds-3.svg","thumbnailWidth":97,"thumbnailHeight":150,"uuid":"lRFmeqAK0tR9jkQV"}
{"name":"hearts-a.svg","date":"2020-07-29T21:17:30.138Z","url":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fhearts-a.svg","type":"image/svg+xml","size":2116,"imageWidth":97,"imageHeight":150,"thumbnail":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fhearts-a.svg","thumbnailWidth":97,"thumbnailHeight":150,"uuid":"zsnHxxq0O4OjsIFc"}
{"name":"diamonds-9.svg","date":"2020-07-29T21:19:17.539Z","url":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fdiamonds-9.svg","type":"image/svg+xml","size":3312,"imageWidth":97,"imageHeight":150,"thumbnail":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fdiamonds-9.svg","thumbnailWidth":97,"thumbnailHeight":150,"uuid":"Mz0jxuYjHlQhmvA9"}
{"name":"card-back.svg","date":"2020-07-29T21:50:07.981Z","url":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fcard-back.svg","type":"image/svg+xml","size":5152,"imageWidth":101,"imageHeight":150,"thumbnail":"https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fcard-back.svg","thumbnailWidth":101,"thumbnailHeight":150,"uuid":"JXjjFls9NHr5BM0N"}

54
style.css
View file

@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700&display=swap");
body {
font-family: 'Montserrat Alternates', sans-serif;
font-family: "Montserrat Alternates", sans-serif;
background-color: hsla(208, 80%, 98%, 1);
padding: 0 10rem;
margin: 0;
@ -11,7 +11,7 @@ body {
flex-direction: column;
}
h2{
h2 {
margin-bottom: 2rem;
text-align: center;
}
@ -23,17 +23,18 @@ h2{
.cards-row {
display: flex;
min-height: 400px;
min-width: 600px;
height: 70%;
width: 100%;
justify-content: center;
margin-top:2rem;
margin-top: 2rem;
align-items: center;
}
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0px 10px 18px rgba(12, 64, 110, .1);
box-shadow: 0px 10px 18px rgba(12, 64, 110, 0.1);
border: 2px solid hsla(208, 80%, 95%, 1);
height: 100%;
padding: 2rem;
@ -56,27 +57,27 @@ h2{
align-content: center;
}
.congrats-container{
display:flex;
height:100%;
.congrats-container {
display: flex;
height: 100%;
flex-direction: column;
align-items:center;
justify-content:center;
align-items: center;
justify-content: center;
}
.congrats-container h3{
.congrats-container h3 {
font-weight: 400;
}
.cell {
.cell {
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
filter: drop-shadow(0 4px 3px rgba(0,0,0,.2));
filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2));
}
.flipped-cell {
background-image: url("https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fcard-back.png?v=1596022698967") !important;
background-image: url("https://cdn.glitch.com/56d96ce9-5171-477f-8560-558ec3af0051%2Fcard-back.svg?v=1596059407981") !important;
animation: flip-out 500ms forwards;
}
@ -103,13 +104,13 @@ h2{
.choose-username h1 {
margin: 0;
padding-bottom: 1rem;
color: hsla(208, 80%, 50%, .5);
color: hsla(208, 80%, 50%, 0.5);
}
input[type="text"] {
margin: 1.5rem 0;
font-size: 1rem;
padding: .8rem .5rem;
padding: 0.8rem 0.5rem;
text-align: center;
outline: none;
border-radius: 100px;
@ -122,7 +123,7 @@ input[type="text"] {
input[type="text"]:focus {
transform: scale(1.1) translateY(-8px);
box-shadow: 0 6px 12px rgba(12, 64, 110, .1);
box-shadow: 0 6px 12px rgba(12, 64, 110, 0.1);
}
input[type="text"]:focus ~ .placeholder {
@ -139,7 +140,7 @@ input[type="text"]:focus ~ .placeholder {
.placeholder {
position: absolute;
pointer-events: none;
color: hsla(208, 80%, 10%, .25);
color: hsla(208, 80%, 10%, 0.25);
transition: 300ms ease-out;
}
@ -190,8 +191,7 @@ strong {
width: 90%;
position: relative;
z-index: 2;
filter: drop-shadow(6px 9px 6px rgba(12, 64, 110, .2));
filter: drop-shadow(6px 9px 6px rgba(12, 64, 110, 0.2));
}
.score-title {
@ -224,19 +224,9 @@ strong {
width: 35px;
}
@media(max-height: 865px) {
@media (max-height: 865px) {
#user-scores {
max-height: 73%;
overflow-y: auto;
}
}
@media(max-width: 760px) {
.cards-row {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card
}
}