Update style.css
Browse files
style.css
CHANGED
@@ -29,6 +29,7 @@ body {
|
|
29 |
background: radial-gradient(circle, #00FFAB, #00B89C);
|
30 |
border-radius: 50%;
|
31 |
box-shadow: 0 0 20px rgba(0, 255, 171, 0.8);
|
|
|
32 |
}
|
33 |
|
34 |
.platform {
|
@@ -36,37 +37,46 @@ body {
|
|
36 |
width: 100px;
|
37 |
height: 20px;
|
38 |
background: linear-gradient(to left, #FF007A, #E5006D);
|
39 |
-
bottom:
|
40 |
border-radius: 10px;
|
41 |
box-shadow: 0 0 20px rgba(255, 0, 122, 0.8);
|
42 |
}
|
43 |
|
44 |
-
#score {
|
45 |
position: absolute;
|
46 |
-
|
47 |
-
left: 20px;
|
48 |
-
font-size: 24px;
|
49 |
text-shadow: 0 0 10px rgba(0, 255, 171, 0.8);
|
50 |
}
|
51 |
|
|
|
|
|
|
|
|
|
|
|
52 |
#level {
|
53 |
-
position: absolute;
|
54 |
top: 20px;
|
55 |
-
right: 20px;
|
56 |
-
font-size: 24px;
|
57 |
-
text-shadow: 0 0 10px rgba(0, 255, 171, 0.8);
|
58 |
}
|
59 |
|
60 |
#lives {
|
61 |
position: absolute;
|
62 |
-
top: 20px;
|
63 |
-
|
64 |
-
|
65 |
-
|
|
|
66 |
}
|
67 |
|
68 |
.life {
|
69 |
-
|
70 |
color: red; /* Red hearts */
|
71 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
72 |
}
|
|
|
29 |
background: radial-gradient(circle, #00FFAB, #00B89C);
|
30 |
border-radius: 50%;
|
31 |
box-shadow: 0 0 20px rgba(0, 255, 171, 0.8);
|
32 |
+
animation: fall 3s linear infinite;
|
33 |
}
|
34 |
|
35 |
.platform {
|
|
|
37 |
width: 100px;
|
38 |
height: 20px;
|
39 |
background: linear-gradient(to left, #FF007A, #E5006D);
|
40 |
+
bottom: 20px; /* Platform sedikit lebih tinggi dari bawah */
|
41 |
border-radius: 10px;
|
42 |
box-shadow: 0 0 20px rgba(255, 0, 122, 0.8);
|
43 |
}
|
44 |
|
45 |
+
#score, #level {
|
46 |
position: absolute;
|
47 |
+
font-size: 24px; /* Ukuran font untuk skor dan level */
|
|
|
|
|
48 |
text-shadow: 0 0 10px rgba(0, 255, 171, 0.8);
|
49 |
}
|
50 |
|
51 |
+
#score {
|
52 |
+
top: 20px;
|
53 |
+
left: 20px; /* Posisi kiri atas */
|
54 |
+
}
|
55 |
+
|
56 |
#level {
|
|
|
57 |
top: 20px;
|
58 |
+
right: 20px; /* Posisi kanan atas */
|
|
|
|
|
59 |
}
|
60 |
|
61 |
#lives {
|
62 |
position: absolute;
|
63 |
+
top: 20px; /* Posisikan di bagian atas */
|
64 |
+
display: flex;
|
65 |
+
justify-content: center;
|
66 |
+
align-items: center;
|
67 |
+
gap: 10px; /* Ruang antar ikon ♥️ */
|
68 |
}
|
69 |
|
70 |
.life {
|
71 |
+
font-size: 24px; /* Ukuran font untuk ikon ♥️ */
|
72 |
color: red; /* Red hearts */
|
73 |
+
}
|
74 |
+
|
75 |
+
@keyframes fall {
|
76 |
+
0% {
|
77 |
+
top: -30px;
|
78 |
+
}
|
79 |
+
100% {
|
80 |
+
top: 100%;
|
81 |
+
}
|
82 |
}
|