update

index.html

@@ -70,7 +70,7 @@ <h1>Building Sales Data in New York City</h1>
         <button id="prevBtn">&lt;</button>
         <div class="dropdown">
           <select id="chartDropdown">
-            <option value="default" selected>Pilih di sini</option>
+            <option value="default" selected>Select here</option>
             <option value="filterbcc1">Building Class Category 1</option>
             <option value="filterbcc2">Building Class Category 2</option>
             <option value="filterbcc4">Building Class Category 4</option>

styles.css

@@ -114,7 +114,7 @@ nav ul li a:hover {
     transition: all 0.3s;
 }
 
-@media (max-width: 450px) {
+@media (max-width: 400px) {
     nav ul {
         flex-direction: column;
         align-items: center;
@@ -177,7 +177,7 @@ nav ul li a:hover {
 
     #hero {
         position: relative;
-        height: 610px;
+        height: 768px;
         background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.3), rgba(0, 0, 0, 0.3)), url('./asset/background.jpg');
         background-size: cover;
         background-position: center;
@@ -258,6 +258,7 @@ nav ul li a:hover {
         flex-wrap: wrap;
         justify-content: center;
         margin-top: 20px;
+        max-height: fit-content;
     }
 
     .chart-images {
@@ -274,29 +275,29 @@ nav ul li a:hover {
         width: calc(20% - 20px);
         margin: 10px;
     }
-/* Add transitions for the .chart-row */
-.chart-row {
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.5s ease, transform 0.5s ease;
-}
 
-/* When .chart-row is inside an active .chart-images */
-.chart-images.active .chart-row {
-    opacity: 1;
-    transform: translateY(0);
-}
+    .chart-row {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        margin-bottom: 20px;
+        opacity: 0;
+        transform: translateY(20px);
+        transition: opacity 0.5s ease, transform 0.5s ease;
+    }
 
-/* Existing .chart-container styles */
-.chart-container {
-    flex: 1 1 calc(50% - 40px); 
-    margin: 20px;
-    max-width: 600px; /* Optional: control max size of the charts */
-}
+    /* When .chart-row is inside an active .chart-images */
+    .chart-images.active .chart-row {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    /* Existing .chart-container styles */
+    .chart-container {
+        flex: 1 1 calc(50% - 40px); 
+        margin: 20px;
+        max-width: 600px; /* Optional: control max size of the charts */
+    }
     /* Tambahkan garis untuk sel dan batas */
     #data-table {
         border-collapse: collapse;
@@ -430,25 +431,25 @@ nav ul li a:hover {
     }
 
 
-/*table*/ 
-    table {
-  width: 100%;
-  border-collapse: collapse;
+/* Default table styles */
+table {
+    max-width: 99%;
+    border-collapse: collapse;
 }
 
 th, td {
-  padding: 8px;
-  text-align: left;
-  border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+    border: 1px solid #ddd;
 }
 
 th {
-  background-color: #f2f2f2;
-  font-weight: bold;
+    background-color: #f2f2f2;
+    font-weight: bold;
 }
 
 tr:nth-child(even) {
-  background-color: #f9f9f9;
+    background-color: #f9f9f9;
 }
 
 .chart--container {
@@ -457,7 +458,83 @@ tr:nth-child(even) {
     width: 90%;
     height: 900%;
     margin-bottom: 50px;
-  }
+}
+
 .zc-ref {
     display: none;
-  }
+}
+
+/* Media queries for responsiveness */
+@media screen and (max-width: 1200px) {
+    .chart--container {
+        width: 95%;
+        height: 800%;
+    }
+
+    th, td {
+        padding: 6px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .chart--container {
+        width: 100%;
+        height: 700%;
+    }
+
+    th, td {
+        padding: 5px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .chart--container {
+        width: 100%;
+        height: 600%;
+    }
+
+    th, td {
+        padding: 4px;
+        font-size: 14px;
+    }
+
+    th {
+        font-size: 16px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .chart--container {
+        width: 100%;
+        height: 500%;
+    }
+
+    th, td {
+        padding: 3px;
+        font-size: 12px;
+    }
+
+    th {
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .chart--container {
+        width: 100%;
+        height: 400%;
+    }
+
+    th, td {
+        padding: 2px;
+        font-size: 10px;
+    }
+
+    th {
+        font-size: 12px;
+    }
+
+    table {
+        max-width: 100%;
+    }
+}