Update style.css

style.css

@@ -1,16 +1,20 @@
+/* Global Styles */
 body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   background: #f4f4f9;
   color: #333;
+  transition: all 0.3s ease; /* Haluskan transisi untuk perubahan */
 }
 
+/* Header */
 header {
   background: #6200ea;
   padding: 15px;
   color: white;
   text-align: center;
+  transition: background-color 0.3s ease; /* Haluskan perubahan warna latar */
 }
 
 header nav ul {
@@ -27,11 +31,20 @@ header nav ul li {
 header nav ul li a {
   color: white;
   text-decoration: none;
+  font-size: 1.1rem;
+  transition: color 0.3s ease;
 }
 
+header nav ul li a:hover {
+  color: #ffcc00; /* Warna saat hover */
+}
+
+/* Section */
 section {
   padding: 40px;
   text-align: center;
+  opacity: 0;
+  animation: fadeIn 1s forwards; /* Animasi muncul */
 }
 
 .project {
@@ -41,6 +54,11 @@ section {
   max-width: 500px;
   border-radius: 10px;
   background: #f9f9f9;
+  transition: transform 0.3s ease;
+}
+
+.project:hover {
+  transform: scale(1.05); /* Efek saat hover */
 }
 
 #chatbox {
@@ -49,6 +67,7 @@ section {
   border: 1px solid #6200ea;
   border-radius: 5px;
   display: none;
+  transition: all 0.3s ease;
 }
 
 footer {
@@ -58,6 +77,39 @@ footer {
   color: white;
 }
 
-.hidden {
-  display: none;
+/* Responsive Design */
+@media (max-width: 768px) {
+  header nav ul {
+    flex-direction: column;
+  }
+
+  header nav ul li {
+    margin-bottom: 10px;
+  }
+
+  section {
+    padding: 20px;
+  }
+
+  .project {
+    max-width: 90%;
+    margin: 10px;
+  }
+
+  #chatMessage {
+    font-size: 1rem;
+  }
+}
+
+/* Animasi Scroll */
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+/* Efek saat halaman di-scroll */
+@media (max-width: 768px) {
+  section {
+    opacity: 1 !important; /* Pastikan animasi tetap terlihat */
+  }
 }