Update style.css

style.css

@@ -1,94 +1,85 @@
-/* Reset margin dan padding untuk body */
 body {
+    font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    overflow-x: hidden; /* Menonaktifkan geser horizontal */
-    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
 }
 
-/* Navbar */
 .navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #004d00; /* Warna hijau tua */
-    padding: 10px 20px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    width: 100%;
-}
-
-/* Logo */
-.logo img {
-    height: 40px; /* Atur ukuran logo sesuai keinginan */
-    width: auto;
-}
-
-/* Nama Brand */
-.brand-name h1 {
+    background-color: #006400; /* Green color */
+    padding: 10px;
     color: white;
-    margin: 0;
-    font-size: 24px;
-}
-
-/* Menambahkan padding pada konten agar tidak tertutup navbar */
-.content {
-    margin-top: 60px; /* Disesuaikan dengan tinggi navbar */
-    padding: 20px;
+    text-align: center;
 }
 
-/* Menyesuaikan warna latar belakang konten */
 .headline {
-    background-color: #004d00; /* Warna hijau tua */
+    background-color: #006400;
     color: white;
-    padding: 20px;
     text-align: center;
+    padding: 20px;
 }
 
-/* Styling untuk footer */
-.footer {
-    background-color: #808080; /* Warna abu-abu */
-    color: white;
+.converter {
     padding: 20px;
     text-align: center;
 }
 
-/* Styling untuk box How To Use */
-.steps {
-    background-color: #004d00;
+.amount-input, .currency-select {
+    padding: 10px;
+    margin: 10px;
+    font-size: 16px;
+}
+
+#swap-btn {
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+}
+
+#convert-btn {
+    padding: 10px 20px;
+    background-color: #006400;
     color: white;
-    padding: 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+#result {
     margin-top: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+}
+
+.how-to-use {
+    padding: 30px;
+    background-color: #f2f2f2;
+}
+
+.steps {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
 }
 
-/* Styling untuk kotak Step-by-Step */
-.step-box {
-    background-color: #cccccc;
+.step {
+    background-color: #ccc;
     padding: 20px;
-    margin: 10px 0;
+    margin: 10px;
     border-radius: 10px;
     text-align: center;
+    flex: 1;
+    min-width: 250px;
 }
 
-/* Untuk desktop (web mode) */
-@media screen and (min-width: 768px) {
-    .steps {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .step-box {
-        width: 30%;
-    }
+.footer {
+    background-color: #808080;
+    color: white;
+    padding: 10px;
+    text-align: center;
 }
 
-/* Untuk mobile (mode vertikal) */
-@media screen and (max-width: 767px) {
+/* Responsiveness */
+@media screen and (max-width: 768px) {
     .steps {
-        display: block;
-    }
+        flex-direction: column;
+    }
+}