Skip to content

Commit 7fe6a9b

Browse files
he-is-talhahe-is-talha
authored
Update style.css with mode selection
1 parent 7f7a10c commit 7fe6a9b

File tree

1 file changed

+120
-54
lines changed

1 file changed

+120
-54
lines changed

‎01-Candy-Crush-Game/style.css‎

Lines changed: 120 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,121 @@
1+
/* General Styling */
2+
body {
3+
background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png');
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
font-family: 'Montserrat', sans-serif;
9+
color: #85796b;
10+
}
11+
112
.grid {
2-
display: flex;
3-
flex-wrap: wrap;
4-
height: 560px;
5-
min-width: 560px;
6-
margin-left: 80px;
7-
margin-top: 50px;
8-
background-color: rgba(109, 127, 151, 0.5);
9-
padding: 5px;
10-
color: #85796b;
11-
border-radius: 10px;
12-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
13-
}
14-
15-
.grid div {
16-
height: 70px;
17-
width: 70px;
18-
}
19-
20-
h3 {
21-
font-family: "Montserrat", sans-serif;
22-
text-transform: uppercase;
23-
}
24-
25-
h1 {
26-
font-family: "Montserrat", sans-serif;
27-
text-transform: uppercase;
28-
margin-top: -10px;
29-
}
30-
31-
.invisible {
32-
background-color: white;
33-
}
34-
35-
body {
36-
background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png');
37-
max-width: 100vh;
38-
display: flex;
39-
}
40-
41-
.scoreBoard {
42-
background-color: cyan;
43-
border-radius: 20px;
44-
margin-top: 200px;
45-
margin-left: 200px;
46-
width: auto;
47-
height: 120px;
48-
padding: 20px;
49-
display: flex;
50-
flex-direction: column;
51-
justify-content: space-between;
52-
align-items: center;
53-
text-align: center;
54-
color: #85796b;
55-
}
13+
display: flex;
14+
flex-wrap: wrap;
15+
height: 560px;
16+
width: 560px;
17+
background-color: rgba(109, 127, 151, 0.5);
18+
padding: 5px;
19+
border-radius: 10px;
20+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
21+
margin-left: 80px;
22+
margin-top: 50px;
23+
}
24+
25+
.grid div {
26+
height: 70px;
27+
width: 70px;
28+
background-size: cover;
29+
background-position: center;
30+
border-radius: 5px;
31+
transition: transform 0.2s ease; /* Smooth animation for interactions */
32+
}
33+
34+
/* Hover effect for interactivity */
35+
.grid div:hover {
36+
transform: scale(1.05); /* Slightly enlarge on hover */
37+
}
38+
39+
/* Scoreboard Styling */
40+
.scoreBoard {
41+
background-color: cyan;
42+
border-radius: 20px;
43+
margin-top: 200px;
44+
margin-left: 200px;
45+
width: auto;
46+
height: 120px;
47+
padding: 20px;
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: space-between;
51+
align-items: center;
52+
text-align: center;
53+
color: #85796b;
54+
}
55+
56+
h3, h1 {
57+
font-family: 'Montserrat', sans-serif;
58+
text-transform: uppercase;
59+
margin: 0;
60+
}
61+
62+
h1 {
63+
margin-top: -10px;
64+
}
65+
66+
.grid div:hover {
67+
transform: scale(1.05); /* Slightly enlarge on hover */
68+
}
69+
70+
/* Mode Selection Styling */
71+
#modeSelection {
72+
display: flex;
73+
flex-direction: column;
74+
align-items: center;
75+
justify-content: center;
76+
height: 100vh;
77+
background-color: #f0f0f0;
78+
font-family: 'Montserrat', sans-serif;
79+
position: absolute;
80+
top: 0;
81+
left: 0;
82+
width: 100%;
83+
z-index: 10;
84+
}
85+
86+
#modeSelection h2 {
87+
margin-bottom: 20px;
88+
color: #333;
89+
}
90+
91+
#modeSelection button {
92+
margin: 10px;
93+
padding: 10px 20px;
94+
font-size: 16px;
95+
cursor: pointer;
96+
background-color: #87ceeb;
97+
border: none;
98+
border-radius: 5px;
99+
color: white;
100+
}
101+
102+
/* Timer and Change Mode Button */
103+
#timer {
104+
font-size: 18px;
105+
margin-top: 10px;
106+
}
107+
108+
#changeMode {
109+
margin-top: 10px;
110+
padding: 5px 10px;
111+
background-color: #ff6347;
112+
color: white;
113+
border: none;
114+
border-radius: 5px;
115+
cursor: pointer;
116+
}
117+
118+
/* Initially Hide Game Elements */
119+
.grid, .scoreBoard {
120+
display: none;
121+
}

0 commit comments

Comments
 (0)