Skip to content

Commit bb98daa

Browse files
committed
add: add style code
1 parent 09794f0 commit bb98daa

File tree

1 file changed

+78
-0
lines changed

1 file changed

+78
-0
lines changed

05. Snake_Game/style.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Open Sans", sans-serif;
7+
}
8+
body {
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-height: 100vh;
13+
background: #e3f2fd;
14+
}
15+
.wrapper {
16+
width: 65vmin;
17+
height: 70vmin;
18+
display: flex;
19+
overflow: hidden;
20+
flex-direction: column;
21+
justify-content: center;
22+
border-radius: 5px;
23+
background: #293447;
24+
box-shadow: 0 20px 40px rgba(52, 87, 220, 0.2);
25+
}
26+
.game-details {
27+
color: #b8c6dc;
28+
font-weight: 500;
29+
font-size: 1.2rem;
30+
padding: 20px 27px;
31+
display: flex;
32+
justify-content: space-between;
33+
}
34+
.play-board {
35+
height: 100%;
36+
width: 100%;
37+
display: grid;
38+
background: #212837;
39+
grid-template: repeat(30, 1fr) / repeat(30, 1fr);
40+
}
41+
.play-board .food {
42+
background: #ff003d;
43+
}
44+
.play-board .head {
45+
background: #60cbff;
46+
}
47+
48+
.controls {
49+
display: none;
50+
justify-content: space-between;
51+
}
52+
.controls i {
53+
padding: 25px 0;
54+
text-align: center;
55+
font-size: 1.3rem;
56+
color: #b8c6dc;
57+
width: calc(100% / 4);
58+
cursor: pointer;
59+
border-right: 1px solid #171b26;
60+
}
61+
62+
@media screen and (max-width: 800px) {
63+
.wrapper {
64+
width: 90vmin;
65+
height: 115vmin;
66+
}
67+
.game-details {
68+
font-size: 1rem;
69+
padding: 15px 27px;
70+
}
71+
.controls {
72+
display: flex;
73+
}
74+
.controls i {
75+
padding: 15px 0;
76+
font-size: 1rem;
77+
}
78+
}

0 commit comments

Comments
 (0)