Upload New File

style.css

+/* Global Styling */
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #8b8a7e;
+}
+
+/* Form and Result Box Styling */
+.booking-form, .booking-details {
+    border: 1px solid #e4e3d6;
+    padding: 20px;
+    margin: 20px;
+    background-color: #8b8a7e;
+    border-radius: 15px;
+    width: 100%; /* Set width to 100% for flexible scaling */
+    max-width: 600px; /* Adjust max width for larger screens */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.container {
+    width: 100%;
+    max-width: 600px; /* Increased max width to make the form larger */
+}
+
+.card {
+    width: 100%;
+    box-shadow: 0 4px 8px rgba(88, 129, 93, 0.1);
+}
+
+/* Heading Styling */
+h2 {
+    font-size: 28px; /* Make the heading bigger */
+    margin-bottom: 20px;
+}
+/* Styling untuk hasil booking tabel */
+table {
+    width: 100%; /* Tabel mengisi lebar penuh */
+    border-collapse: collapse; /* Hilangkan jarak antara border sel tabel */
+    margin-bottom: 20px;
+}
+
+table th, table td {
+    padding: 10px; /* Tambahkan padding untuk ruang yang lebih rapi */
+    border: 1px solid #ddd; /* Border tipis untuk sel */
+    text-align: left; /* Pastikan teks rata kiri */
+}
+
+table th {
+    background-color: #8b8a7e; /* Tambahkan background untuk header tabel */
+}
+
+table td {
+    background-color: #d9d9d9;
+}
+
+.booking-details {
+    background-color: #d9d9d9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Form Input Styling */
+input[type="text"], input[type="date"], select {
+    width: 100%;
+    padding: 12px; /* Increase padding for better usability */
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #7aa17b;
+    color: rgb(159, 171, 157);
+    padding: 12px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    font-size: 16px; /* Increase button font size */
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+/* Adjustments for smaller screens */
+@media screen and (max-width: 768px) {
+    .booking-form, .booking-details {
+        width: 100%;
+        max-width: 450px; /* Make the form responsive for smaller screens */
+    }
+}