Skip to content

Commit ac3e926

Browse files
EmilSkoltEmilSkolt
EmilSkolt
authored and
EmilSkolt
committed
Added sass
1 parent 6fbae38 commit ac3e926

8 files changed

+340
-182
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5502
3+
}

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Memory game</title>
8-
<link rel="stylesheet" href="/style.css" />
8+
<link rel="stylesheet" href="styles/styling.css">
99
</head>
1010

1111
<body>
12-
<h1 class="page__title">Memory Game with African Pictures</h1>
12+
<h1 class="page__title">African Themed Memory Game</h1>
1313

1414
<div class="game-container">
1515
<div class="card">

‎style.css

-180
This file was deleted.

‎styles/_animations.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@keyframes hover-jump {
2+
0% {
3+
transform: translateY(0);
4+
}
5+
50% {
6+
transform: translateY(-10px);
7+
}
8+
100% {
9+
transform: translateY(0);
10+
}
11+
}

‎styles/_variables.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$background-color-brown: #4b2e2e;
2+
$border-container-color-gold: goldenrod;
3+
$card-boarder-black: black;
4+
$card-background-grey: #aaa;
5+
$card-hover-white: rgb(69, 61, 61);
6+
$card-label-color-white: rgba(255, 255, 255, 0.8);
7+
$standard-border-radius: 10px;
8+
$standard-width: 100%;
9+
$standard-height: 100%;

‎styles/styling.css

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");
2+
@keyframes hover-jump {
3+
0% {
4+
transform: translateY(0);
5+
}
6+
50% {
7+
transform: translateY(-10px);
8+
}
9+
100% {
10+
transform: translateY(0);
11+
}
12+
}
13+
@keyframes hover-jump {
14+
0% {
15+
transform: translateY(0);
16+
}
17+
50% {
18+
transform: translateY(-10px);
19+
}
20+
100% {
21+
transform: translateY(0);
22+
}
23+
}
24+
* {
25+
box-sizing: border-box;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
body {
31+
text-align: center;
32+
background-color: #4b2e2e;
33+
}
34+
35+
.game-container {
36+
border: solid goldenrod;
37+
max-width: 80%;
38+
max-height: 100%;
39+
margin: auto;
40+
background-image: url(../images/african-background.jpeg);
41+
background-repeat: round;
42+
border-radius: 10px;
43+
}
44+
45+
.page__title {
46+
text-align: center;
47+
margin-top: 50px;
48+
font-size: 40px;
49+
font-family: "Nabla", cursive;
50+
margin-bottom: 2em;
51+
}
52+
53+
.card {
54+
width: 200px;
55+
height: 200px;
56+
margin: 10px;
57+
border-radius: 10px;
58+
cursor: pointer;
59+
position: relative;
60+
display: inline-block;
61+
position: relative;
62+
background: #aaa;
63+
margin: 2em;
64+
border: solid black;
65+
background: #aaa;
66+
margin: 2em;
67+
border: solid black;
68+
}
69+
70+
.card__img {
71+
display: block;
72+
width: 100%;
73+
height: 100%;
74+
-o-object-fit: cover;
75+
object-fit: cover;
76+
}
77+
78+
.card__checkbox {
79+
display: none;
80+
}
81+
82+
.card:hover {
83+
background-color: rgb(69, 61, 61);
84+
}
85+
86+
.card:after {
87+
content: "";
88+
position: absolute;
89+
top: 0;
90+
left: 0;
91+
width: 100%;
92+
height: 100%;
93+
border-radius: 10px;
94+
z-index: 1;
95+
opacity: 0;
96+
transition: opacity 0.2s ease-in-out;
97+
}
98+
99+
.card:hover:after {
100+
opacity: 1;
101+
}
102+
103+
.card__label {
104+
display: block;
105+
position: relative;
106+
width: 100%;
107+
height: 100%;
108+
border-radius: 10px;
109+
overflow: hidden;
110+
}
111+
112+
.card__label::after {
113+
background: rgba(255, 255, 255, 0.8);
114+
content: "";
115+
height: 100%;
116+
left: 0;
117+
position: absolute;
118+
top: 0;
119+
width: 100%;
120+
z-index: 1;
121+
}
122+
123+
.card__label img {
124+
position: absolute;
125+
top: 0;
126+
left: 0;
127+
width: 100%;
128+
height: 100%;
129+
-o-object-fit: cover;
130+
object-fit: cover;
131+
opacity: 0;
132+
transition: opacity 0.2s ease-in-out;
133+
z-index: 2;
134+
}
135+
136+
.card__checkbox:checked + label img {
137+
opacity: 1;
138+
}
139+
140+
.card__checkbox:checked ~ .card-checkbox:checked + label img {
141+
opacity: 1;
142+
}
143+
144+
.matched {
145+
pointer-events: none;
146+
}
147+
148+
@media (max-width: 768px) {
149+
.game-container {
150+
max-width: 500px;
151+
margin: 0 auto;
152+
}
153+
}
154+
img#replay {
155+
display: block;
156+
margin: 2% auto;
157+
max-height: 30%;
158+
max-width: 30%;
159+
cursor: pointer;
160+
margin: 2% auto;
161+
}
162+
163+
img#replay:hover {
164+
animation: hover-jump 1s infinite;
165+
}/*# sourceMappingURL=styling.css.map */

‎styles/styling.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)