GarGerry commited on
Commit
0b0fda2
·
verified ·
1 Parent(s): aa3208d

Update newcss

Browse files
Files changed (1) hide show
  1. newcss +153 -57
newcss CHANGED
@@ -1,72 +1,168 @@
1
- /* Global styling */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
 
 
 
6
  }
7
 
8
- body {
9
- background: linear-gradient(to bottom, #0f0f0f, #131313);
10
- font-family: 'Arial', sans-serif;
11
- color: white;
12
- overflow: hidden;
13
- }
14
-
15
- .game-container {
16
- position: relative;
17
- width: 100vw;
18
- height: 100vh;
19
- display: flex;
20
- justify-content: center;
21
- align-items: center;
22
- flex-direction: column;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
- .ball {
26
- position: absolute;
27
- width: 30px;
28
- height: 30px;
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 {
35
- position: absolute;
36
- width: 100px;
37
- height: 20px;
38
- background: linear-gradient(to left, #FF007A, #E5006D);
39
- bottom: 0;
40
- border-radius: 10px;
41
- box-shadow: 0 0 20px rgba(255, 0, 122, 0.8);
 
42
  }
43
 
44
- #score {
45
- position: absolute;
46
- top: 20px;
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
- width: 100%;
64
- text-align: center;
65
- font-size: 24px; /* Sama dengan ukuran skor dan level */
66
  }
67
 
68
- .life {
69
- margin-right: 10px;
70
- color: red; /* Red hearts */
71
- font-size: 24px; /* Sama dengan ukuran skor dan level */
72
  }
 
1
+ /* Global Styles */
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ background: #f4f4f9; /* Latar belakang terang */
7
+ color: #333; /* Teks terang */
8
+ transition: all 0.3s ease; /* Haluskan transisi untuk perubahan */
9
  }
10
 
11
+ /* Mode Gelap */
12
+ body.dark-mode {
13
+ background-color: #333; /* Latar belakang gelap */
14
+ color: white; /* Teks putih untuk gelap */
15
+ }
16
+
17
+ /* Header */
18
+ header {
19
+ background: #6200ea; /* Warna header terang */
20
+ padding: 15px;
21
+ color: white;
22
+ text-align: center;
23
+ transition: background-color 0.3s ease; /* Haluskan perubahan warna latar */
24
+ }
25
+
26
+ header.dark-mode {
27
+ background-color: #444; /* Warna header saat mode gelap */
28
+ }
29
+
30
+ header nav ul {
31
+ display: flex;
32
+ justify-content: center;
33
+ list-style: none;
34
+ padding: 0;
35
+ }
36
+
37
+ header nav ul li {
38
+ margin: 0 15px;
39
+ }
40
+
41
+ header nav ul li a {
42
+ color: white;
43
+ text-decoration: none;
44
+ font-size: 1.1rem;
45
+ transition: color 0.3s ease;
46
+ }
47
+
48
+ header nav ul li a:hover {
49
+ color: #ffcc00; /* Warna saat hover */
50
+ }
51
+
52
+ /* Tombol Mode Gelap */
53
+ #toggleDarkMode {
54
+ background: none;
55
+ border: none;
56
+ color: white;
57
+ font-size: 1.5rem;
58
+ cursor: pointer;
59
+ padding: 5px 10px;
60
+ margin-left: 20px;
61
+ }
62
+
63
+ #toggleDarkMode:hover {
64
+ background-color: rgba(0, 0, 0, 0.1);
65
+ border-radius: 5px;
66
  }
67
 
68
+ /* Section */
69
+ section {
70
+ padding: 40px;
71
+ text-align: center;
72
+ opacity: 0;
73
+ animation: fadeIn 1s forwards; /* Animasi muncul */
 
74
  }
75
 
76
+ /* Kotak Project */
77
+ .project {
78
+ border: 1px solid #ccc;
79
+ padding: 20px;
80
+ margin: 10px auto;
81
+ max-width: 500px;
82
+ border-radius: 10px;
83
+ background: #f9f9f9;
84
+ transition: transform 0.3s ease, background-color 0.3s ease; /* Tambahkan transisi untuk background */
85
  }
86
 
87
+ .project:hover {
88
+ transform: scale(1.05); /* Efek saat hover */
 
 
 
 
89
  }
90
 
91
+ /* Mode Gelap - Kotak Project */
92
+ body.dark-mode .project {
93
+ background: #444; /* Ubah latar belakang kotak saat mode gelap */
94
+ border-color: #666; /* Ubah warna border untuk mode gelap */
95
+ }
96
+
97
+ #chatbox {
98
+ margin-top: 20px;
99
+ padding: 10px;
100
+ border: 1px solid #6200ea;
101
+ border-radius: 5px;
102
+ display: none;
103
+ transition: all 0.3s ease;
104
+ }
105
+
106
+ /* Mode Gelap - Chatbox */
107
+ body.dark-mode #chatbox {
108
+ background-color: #444; /* Ubah latar belakang chatbox saat mode gelap */
109
+ color: white; /* Ubah warna teks menjadi putih */
110
+ border-color: #6200ea; /* Tetap pertahankan border berwarna ungu */
111
+ }
112
+
113
+ footer {
114
+ text-align: center;
115
+ padding: 10px;
116
+ background: #6200ea;
117
+ color: white;
118
+ }
119
+
120
+ /* Mode Gelap - Footer */
121
+ body.dark-mode footer {
122
+ background-color: #444; /* Ubah warna footer saat mode gelap */
123
+ }
124
+
125
+ footer p {
126
+ margin: 0;
127
+ }
128
+
129
+ /* Animasi Fade In */
130
+ @keyframes fadeIn {
131
+ 0% { opacity: 0; }
132
+ 100% { opacity: 1; }
133
+ }
134
+
135
+ /* Responsive Design untuk Layar Kecil (Mobile) */
136
+ @media (max-width: 768px) {
137
+ header nav ul {
138
+ flex-direction: column;
139
+ }
140
+
141
+ header nav ul li {
142
+ margin-bottom: 10px;
143
+ }
144
+
145
+ section {
146
+ padding: 20px;
147
+ }
148
+
149
+ .project {
150
+ max-width: 90%;
151
+ margin: 10px;
152
+ }
153
+
154
+ #chatMessage {
155
+ font-size: 1rem;
156
+ }
157
  }
158
 
159
+ /* Efek Halus untuk Tombol dan Links */
160
+ button, a {
161
+ cursor: pointer;
162
+ transition: all 0.3s ease;
 
 
163
  }
164
 
165
+ button:hover, a:hover {
166
+ background-color: #6200ea;
167
+ color: white;
 
168
  }