Update style.css

style.css

@@ -1,138 +1,94 @@
-/* Style untuk Navbar */
-.navbar {
-    background-color: #4CAF50; /* Hijau */
-    padding: 10px;
-    text-align: center;
+/* Reset margin dan padding untuk body */
+body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; /* Menonaktifkan geser horizontal */
+    font-family: Arial, sans-serif;
 }
 
-.navbar .logo {
-    width: 120px; /* Ukuran logo */
-    height: auto;
+/* 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%;
 }
 
-/* Style untuk Headline */
-.headline {
-    text-align: center;
-    margin-top: 20px;
-    padding: 20px;
-    background-color: #f1f1f1; /* Latar belakang terang untuk headline */
+/* Logo */
+.logo img {
+    height: 40px; /* Atur ukuran logo sesuai keinginan */
+    width: auto;
 }
 
-.headline h1 {
-    font-size: 36px;
-    color: #333;
+/* Nama Brand */
+.brand-name h1 {
+    color: white;
+    margin: 0;
+    font-size: 24px;
 }
 
-.headline p {
-    font-size: 18px;
-    color: #666;
+/* Menambahkan padding pada konten agar tidak tertutup navbar */
+.content {
+    margin-top: 60px; /* Disesuaikan dengan tinggi navbar */
+    padding: 20px;
 }
 
-/* Style untuk Container dan Converter */
-.container {
-    margin-top: 30px;
+/* Menyesuaikan warna latar belakang konten */
+.headline {
+    background-color: #004d00; /* Warna hijau tua */
+    color: white;
     padding: 20px;
     text-align: center;
 }
 
-.converter {
-    margin-top: 20px;
-    display: inline-block;
-    background-color: #ffffff;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Input dan select */
-label, select, input {
-    margin: 10px 0;
-    font-size: 16px;
-}
-
-input, select {
-    padding: 10px;
-    width: 200px;
-    font-size: 16px;
-    margin: 10px 0;
-}
-
-button {
-    background-color: #4CAF50;
+/* Styling untuk footer */
+.footer {
+    background-color: #808080; /* Warna abu-abu */
     color: white;
-    padding: 10px 20px;
-    border: none;
-    cursor: pointer;
-    font-size: 18px;
-}
-
-button:hover {
-    background-color: #45a049;
-}
-
-#result {
-    font-size: 18px;
-    margin-top: 20px;
-    color: #333;
+    padding: 20px;
+    text-align: center;
 }
 
-/* Style untuk How to Use */
+/* Styling untuk box How To Use */
 .steps {
-    margin-top: 50px;
-    text-align: center;
+    background-color: #004d00;
+    color: white;
     padding: 20px;
-    background-color: #f9f9f9;
-}
-
-.steps h2 {
-    font-size: 30px;
-    color: #333;
+    margin-top: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+/* Styling untuk kotak Step-by-Step */
 .step-box {
-    background-color: #f1f1f1;
-    margin: 20px;
+    background-color: #cccccc;
     padding: 20px;
-    border-radius: 8px;
-    display: inline-block;
-    width: 30%;
-    text-align: left;
-}
-
-.step-box h3 {
-    font-size: 22px;
-    color: #333;
+    margin: 10px 0;
+    border-radius: 10px;
+    text-align: center;
 }
 
-.step-box p {
-    font-size: 16px;
-    color: #666;
-}
+/* Untuk desktop (web mode) */
+@media screen and (min-width: 768px) {
+    .steps {
+        display: flex;
+        justify-content: space-between;
+    }
 
-/* Responsif - Atur tampilan step-box agar stack secara vertikal pada layar kecil */
-@media (max-width: 768px) {
     .step-box {
-        width: 100%;
-        margin: 10px 0;
+        width: 30%;
     }
 }
 
-/* Style untuk Footer */
-.footer {
-    background-color: #4CAF50;
-    padding: 20px;
-    text-align: center;
-    color: white;
-    font-size: 16px;
-    margin-top: 50px;
-}
-
-.footer p {
-    margin: 0;
-}
-
-/* Style untuk tombol convert */
-#convert-btn {
-    display: inline-block;
-    margin-top: 20px;
-}
+/* Untuk mobile (mode vertikal) */
+@media screen and (max-width: 767px) {
+    .steps {
+        display: block;
+    }