Update style.css
Browse files
style.css
CHANGED
@@ -73,6 +73,7 @@ section {
|
|
73 |
animation: fadeIn 1s forwards; /* Animasi muncul */
|
74 |
}
|
75 |
|
|
|
76 |
.project {
|
77 |
border: 1px solid #ccc;
|
78 |
padding: 20px;
|
@@ -80,13 +81,19 @@ section {
|
|
80 |
max-width: 500px;
|
81 |
border-radius: 10px;
|
82 |
background: #f9f9f9;
|
83 |
-
transition: transform 0.3s ease;
|
84 |
}
|
85 |
|
86 |
.project:hover {
|
87 |
transform: scale(1.05); /* Efek saat hover */
|
88 |
}
|
89 |
|
|
|
|
|
|
|
|
|
|
|
|
|
90 |
#chatbox {
|
91 |
margin-top: 20px;
|
92 |
padding: 10px;
|
@@ -96,6 +103,13 @@ section {
|
|
96 |
transition: all 0.3s ease;
|
97 |
}
|
98 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
99 |
footer {
|
100 |
text-align: center;
|
101 |
padding: 10px;
|
@@ -103,6 +117,15 @@ footer {
|
|
103 |
color: white;
|
104 |
}
|
105 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
106 |
/* Animasi Fade In */
|
107 |
@keyframes fadeIn {
|
108 |
0% { 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 |
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;
|
|
|
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;
|
|
|
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; }
|