Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
b9e8fab
·
verified ·
1 Parent(s): 1936e7d

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +54 -106
style.css CHANGED
@@ -1,138 +1,86 @@
1
- /* Reset styling untuk memastikan semua elemen berada dalam tampilan yang rapi */
2
  * {
3
  margin: 0;
4
  padding: 0;
5
  box-sizing: border-box;
6
- }
7
-
8
- /* Menetapkan body agar game terlihat proporsional di semua perangkat */
9
- body {
10
  font-family: 'Arial', sans-serif;
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- height: 100vh;
15
- background-color: #121212;
16
- }
17
-
18
- /* Kontainer utama game dengan ukuran tetap proporsional */
19
- .game-container {
20
- width: 80vw; /* Lebar 80% dari layar */
21
- height: 60vh; /* Tinggi 60% dari layar */
22
- position: relative;
23
- background: linear-gradient(45deg, #00b3b3, #cc00cc);
24
- border-radius: 10px;
25
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
26
- overflow: hidden;
27
- }
28
-
29
- /* Styling untuk bola */
30
- .ball {
31
- position: absolute;
32
- width: 30px;
33
- height: 30px;
34
- background-color: #ffcc00;
35
- border-radius: 50%;
36
- top: 10%;
37
- left: 50%;
38
- transform: translateX(-50%);
39
- animation: ballAnimation 4s linear infinite;
40
  }
41
 
42
- /* Animasi untuk pergerakan bola */
43
- @keyframes ballAnimation {
44
- 0% { top: 10%; }
45
- 50% { top: 90%; }
46
- 100% { top: 10%; }
47
- }
48
-
49
- /* Styling untuk platform */
50
- .platform {
51
- position: absolute;
52
- bottom: 5%;
53
- width: 15vw; /* Platform proporsional dengan lebar layar */
54
- height: 5vh; /* Platform proporsional dengan tinggi layar */
55
- background-color: #ff6600;
56
- border-radius: 5px;
57
- left: 50%;
58
- transform: translateX(-50%);
59
  }
60
 
61
- /* Styling untuk kontrol tombol */
62
- .controls {
63
- position: absolute;
64
- bottom: 20px;
65
  display: flex;
66
  justify-content: space-between;
67
- width: 80%;
68
- padding: 10px;
 
69
  }
70
 
71
- .controls button {
72
- font-size: 1.5rem;
73
- padding: 10px 15px;
74
- background-color: #333;
75
- color: white;
76
- border: none;
77
- border-radius: 5px;
78
- cursor: pointer;
79
- transition: background-color 0.3s;
80
  }
81
 
82
- .controls button:hover {
83
- background-color: #555;
 
 
 
84
  }
85
 
86
- /* Styling untuk skor dan nyawa */
87
- .score-board, .lives {
88
- position: absolute;
89
- top: 10px;
90
- font-size: 1.2rem;
91
- color: white;
92
- font-weight: bold;
93
  }
94
 
95
- .score-board {
96
- left: 10px;
 
 
 
 
 
97
  }
98
 
99
- .lives {
100
- right: 10px;
 
 
101
  }
102
 
103
- /* Game Over message */
104
- .game-over-message {
105
- position: absolute;
106
- top: 50%;
107
- left: 50%;
108
- transform: translate(-50%, -50%);
109
- background-color: rgba(0, 0, 0, 0.8);
110
- color: white;
111
- text-align: center;
112
- padding: 30px;
113
- border-radius: 15px;
114
- display: none; /* Hidden by default */
115
- box-shadow: 0 0 30px rgba(0, 255, 255, 0.7);
116
  }
117
 
118
- .game-over-message h2 {
119
- font-size: 2rem;
 
 
 
 
 
 
120
  }
121
 
122
- .game-over-message p {
123
- font-size: 1.5rem;
 
124
  }
125
 
126
- .game-over-message button {
127
- padding: 12px 25px;
128
- background-color: #ff6600;
129
- color: white;
130
- font-size: 1.2rem;
131
- border-radius: 10px;
132
- cursor: pointer;
133
- transition: background-color 0.2s ease;
134
  }
135
 
136
- .game-over-message button:hover {
137
- background-color: #e64a19;
138
  }
 
1
+ /* Global styles */
2
  * {
3
  margin: 0;
4
  padding: 0;
5
  box-sizing: border-box;
 
 
 
 
6
  font-family: 'Arial', sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  }
8
 
9
+ body {
10
+ background: linear-gradient(120deg, #2e3b4e, #1c2a38);
11
+ color: #fff;
12
+ font-size: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
14
 
15
+ /* Header styles */
16
+ header {
 
 
17
  display: flex;
18
  justify-content: space-between;
19
+ align-items: center;
20
+ padding: 20px;
21
+ background-color: rgba(0, 0, 0, 0.7);
22
  }
23
 
24
+ .logo {
25
+ font-size: 24px;
26
+ font-weight: bold;
27
+ color: #00ff99;
 
 
 
 
 
28
  }
29
 
30
+ nav a {
31
+ color: #00ff99;
32
+ text-decoration: none;
33
+ margin: 0 15px;
34
+ font-size: 18px;
35
  }
36
 
37
+ nav a:hover {
38
+ text-decoration: underline;
 
 
 
 
 
39
  }
40
 
41
+ /* Hero section styles */
42
+ .hero {
43
+ text-align: center;
44
+ padding: 100px 20px;
45
+ background: url('https://via.placeholder.com/1500x800') no-repeat center center;
46
+ background-size: cover;
47
+ box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
48
  }
49
 
50
+ .hero h1 {
51
+ font-size: 48px;
52
+ color: #00ff99;
53
+ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
54
  }
55
 
56
+ .hero p {
57
+ font-size: 20px;
58
+ margin: 20px 0;
 
 
 
 
 
 
 
 
 
 
59
  }
60
 
61
+ .start-btn {
62
+ background-color: #00ff99;
63
+ color: #1c2a38;
64
+ font-size: 20px;
65
+ padding: 10px 30px;
66
+ border: none;
67
+ cursor: pointer;
68
+ transition: all 0.3s ease;
69
  }
70
 
71
+ .start-btn:hover {
72
+ background-color: #008f66;
73
+ transform: scale(1.1);
74
  }
75
 
76
+ /* Footer styles */
77
+ footer {
78
+ text-align: center;
79
+ padding: 20px;
80
+ background-color: rgba(0, 0, 0, 0.7);
81
+ margin-top: 40px;
 
 
82
  }
83
 
84
+ footer p {
85
+ font-size: 14px;
86
  }