sdsfns

website/style.css

@@ -1,11 +1,11 @@
-/* Algemeen stijlen */
+/* Algemene body */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     display: flex;
 }
 
-/* Linkerkant: Het menu */
+/* Linkerkant menu */
 .menu-list {
     width: 30%;
     background-color: #f2c14e;
@@ -27,38 +27,84 @@ body {
     border-radius: 8px;
     cursor: pointer;
     font-size: 1.2em;
+    transition: all 0.3s ease;
 }
 
 .menu-item:hover {
     background-color: #f59e42;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* Rechterkant: Detail weergave */
-.menu-detail {
+/* Productweergave in mooie hokjes */
+.product-display {
     width: 70%;
-    background-color: white;
+    display: flex;
+    flex-wrap: wrap;
     padding: 20px;
-    display: none; /* Start verborgen */
 }
 
-.menu-detail img {
-    width: 70%;
-    max-width: 200px;
-    max-height: 400px;
-    margin-bottom: 20px;
+.product-box {
+    width: 200px;
+    margin: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    cursor: pointer;
 }
 
-.menu-detail h2 {
+.product-box img {
+    width: 100%;
+    height: auto;
+    transition: transform 0.3s ease;
+}
+
+.product-box:hover img {
+    transform: scale(1.1);
+}
+
+.product-box h3 {
+    font-size: 1.1em;
     color: #d32f2f;
-    font-size: 2em;
+    margin: 10px 0;
 }
 
-.menu-detail p {
-    font-size: 1.2em;
-    color: #555;
+/* Modaal venster (pop-up) */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: white;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 60%;
+    text-align: center;
+}
+
+.modal img {
+    width: 100%;
+    max-width: 200px;
     margin: 20px 0;
 }
 
+.close {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 30px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
 /* Footer */
 footer {
     text-align: center;