GarGerry commited on
Commit
459f8c6
·
verified ·
1 Parent(s): c530330

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +25 -37
style.css CHANGED
@@ -5,63 +5,51 @@
5
  }
6
 
7
  body {
8
- background-color: #121212;
9
  font-family: 'Arial', sans-serif;
10
- overflow: hidden;
11
  }
12
 
13
  .game-container {
14
  position: relative;
15
  width: 100vw;
16
  height: 100vh;
 
 
 
 
 
17
  }
18
 
19
- .player {
20
- position: absolute;
21
- bottom: 20px;
22
- left: 50%;
23
- width: 50px;
24
- height: 50px;
25
- background-color: #00ff00;
26
- border-radius: 50%;
27
- transform: translateX(-50%);
28
- animation: movePlayer 2s infinite alternate;
29
- }
30
-
31
- .falling-ball {
32
  position: absolute;
33
- top: -50px;
34
- left: 50%;
35
  width: 30px;
36
  height: 30px;
37
- background-color: #ff007f;
38
  border-radius: 50%;
39
  animation: fall 3s linear infinite;
40
  }
41
 
42
- @keyframes fall {
43
- 0% {
44
- top: -50px;
45
- }
46
- 100% {
47
- top: 100vh;
48
- }
 
 
 
 
 
 
49
  }
50
 
51
- @keyframes movePlayer {
52
  0% {
53
- left: 50%;
54
- }
55
- 25% {
56
- left: 30%;
57
- }
58
- 50% {
59
- left: 70%;
60
- }
61
- 75% {
62
- left: 30%;
63
  }
64
  100% {
65
- left: 50%;
66
  }
67
  }
 
5
  }
6
 
7
  body {
8
+ background: linear-gradient(to bottom, #1e1e1e, #0a0a0a);
9
  font-family: 'Arial', sans-serif;
10
+ color: white;
11
  }
12
 
13
  .game-container {
14
  position: relative;
15
  width: 100vw;
16
  height: 100vh;
17
+ overflow: hidden;
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ flex-direction: column;
22
  }
23
 
24
+ .ball {
 
 
 
 
 
 
 
 
 
 
 
 
25
  position: absolute;
 
 
26
  width: 30px;
27
  height: 30px;
28
+ background-color: #00FFAB;
29
  border-radius: 50%;
30
  animation: fall 3s linear infinite;
31
  }
32
 
33
+ .platform {
34
+ position: absolute;
35
+ width: 100px;
36
+ height: 20px;
37
+ background-color: #FF007A;
38
+ bottom: 0;
39
+ border-radius: 10px;
40
+ }
41
+
42
+ #score {
43
+ position: absolute;
44
+ top: 20px;
45
+ font-size: 24px;
46
  }
47
 
48
+ @keyframes fall {
49
  0% {
50
+ top: -30px;
 
 
 
 
 
 
 
 
 
51
  }
52
  100% {
53
+ top: 100%;
54
  }
55
  }