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

Update newcss

Browse files
Files changed (1) hide show
  1. newcss +42 -85
newcss CHANGED
@@ -3,28 +3,18 @@ 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 {
@@ -46,34 +36,21 @@ header nav ul li a {
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;
@@ -81,33 +58,11 @@ section {
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 {
@@ -117,29 +72,28 @@ footer {
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 {
@@ -148,21 +102,24 @@ footer p {
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
  }
 
3
  font-family: Arial, sans-serif;
4
  margin: 0;
5
  padding: 0;
6
+ background: #f4f4f9;
7
+ color: #333;
8
+ transition: all 0.3s ease;
 
 
 
 
 
 
9
  }
10
 
11
  /* Header */
12
  header {
13
+ background: #6200ea;
14
  padding: 15px;
15
  color: white;
16
  text-align: center;
17
+ position: relative;
 
 
 
 
18
  }
19
 
20
  header nav ul {
 
36
  }
37
 
38
  header nav ul li a:hover {
39
+ color: #ffcc00;
40
  }
41
 
42
+ .burger-menu {
43
+ display: none;
 
 
 
44
  font-size: 1.5rem;
45
  cursor: pointer;
 
 
 
 
 
 
 
46
  }
47
 
48
  /* Section */
49
  section {
50
  padding: 40px;
51
  text-align: center;
 
 
52
  }
53
 
 
54
  .project {
55
  border: 1px solid #ccc;
56
  padding: 20px;
 
58
  max-width: 500px;
59
  border-radius: 10px;
60
  background: #f9f9f9;
61
+ transition: transform 0.3s ease;
62
  }
63
 
64
  .project:hover {
65
+ transform: scale(1.05);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  }
67
 
68
  footer {
 
72
  color: white;
73
  }
74
 
75
+ /* Responsive Styles */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  @media (max-width: 768px) {
77
  header nav ul {
78
+ display: none;
79
  flex-direction: column;
80
+ background: #6200ea;
81
+ position: absolute;
82
+ top: 60px;
83
+ right: 0;
84
+ width: 100%;
85
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
86
+ }
87
+
88
+ header nav ul.active {
89
+ display: flex;
90
  }
91
 
92
+ .burger-menu {
93
+ display: block;
94
+ position: absolute;
95
+ top: 20px;
96
+ right: 20px;
97
  }
98
 
99
  section {
 
102
 
103
  .project {
104
  max-width: 90%;
105
+ margin: 10px auto;
106
  }
107
+ }
108
 
109
+ @media (max-width: 480px) {
110
+ body {
111
+ font-size: 14px;
112
  }
 
113
 
114
+ h1, h2 {
115
+ font-size: 1.5rem;
116
+ }
 
 
117
 
118
+ button, a {
119
+ font-size: 1rem;
120
+ }
121
+
122
+ footer {
123
+ font-size: 0.8rem;
124
+ }
125
  }