Initial commit für PRADA293 Projekt

Dockerfile

+# Basis-Image: PHP 8.1 mit Apache
+FROM php:8.1-apache
+
+# Kopiere alle Dateien ins Webserver-Verzeichnis
+COPY . /var/www/html/
+
+# Setze die richtigen Dateiberechtigungen
+RUN chown -R www-data:www-data /var/www/html \
+    && chmod -R 755 /var/www/html
+
+# Exponiere Port 80
+EXPOSE 80
+
+# Starte Apache
+CMD ["apache2-foreground"]

css/style.css

+/* W3.CSS Zusätzliche Theme-Klassen */
+.w3-theme-l5 {
+    color: #000 !important;
+    background-color: #f0f0f0 !important
+}
+
+.w3-theme-l4 {
+    color: #000 !important;
+    background-color: #cccccc !important
+}
+
+.w3-theme-l3 {
+    color: #fff !important;
+    background-color: #999999 !important
+}
+
+.w3-theme-l2 {
+    color: #fff !important;
+    background-color: #666666 !important
+}
+
+.w3-theme-l1 {
+    color: #fff !important;
+    background-color: #333333 !important
+}
+
+.w3-theme-d1 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d2 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+/* Füge alle anderen w3-theme Klassen hier hinzu */
+body {
+    font-family: 'Georgia', serif;
+}
+
+/* Apply to paragraphs and any specific container */
+p, .marfa-text, .prada-story-section {
+    text-align: justify;
+    hyphens: auto; /* Enable hyphenation */
+}
+
+/* Optional: Apply to all general text elements */
+.w3-container, .w3-panel, .w3-row, .w3-row-padding {
+    text-align: justify;
+    hyphens: auto;
+}
+/* Styles for the Prada's Legacy container */
+.prada-legacy-container {
+    display: flex; /* Flexbox for main container */
+    gap: 20px; /* Space between the main elements */
+    align-items: flex-start;
+    flex-wrap: wrap; /* Allow wrapping for smaller screens */
+}
+
+/* Text Section Styles */
+.prada-legacy-text {
+    flex: 1 1 40%; /* Make the text section flexible */
+    padding-right: 20px; /* Space between text and image */
+    min-width: 300px; /* Prevent the text from becoming too narrow */
+}
+
+/* Image Sections Container */
+.prada-legacy-images {
+    flex: 2 1 60%; /* Flexible space for images */
+    display: flex; /* Flexbox for images */
+    gap: 20px; /* Space between images */
+}
+
+/* Individual Image Container */
+.prada-legacy-image {
+    flex: 1 1 30%; /* Each image takes a third of the remaining space */
+    min-width: 200px; /* Minimum width to maintain layout */
+}
+
+/* Image Styles */
+.prada-legacy-image img {
+    width: 100%;
+    height: auto;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+    .prada-legacy-container {
+        flex-direction: column; /* Stack elements on smaller screens */
+    }
+
+    .prada-legacy-images {
+        flex-direction: column; /* Stack images on smaller screens */
+    }
+}
+
+@font-face {
+    font-family: 'Engry';
+    src: url('Engry.otf') format('opentype'); /* Passe den Pfad an, falls notwendig */
+}
+
+.prada-image {
+    border-radius: 10px;
+}
+
+/* Apply Engry font to Navbar */
+.w3-bar-item {
+    font-family: 'Engry';
+    font-weight: bold; /* Optional: makes the text bold */
+    text-transform: uppercase; /* Optional: transforms the text to uppercase */
+}
+
+.prada-font, h1, h2, h3, h4, h5, h6 {
+    font-family: 'Engry';
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+/* Textzentrierung */
+.w3-center h1, .w3-center h2, .w3-center h3, .w3-center h4, .w3-center h5, .w3-center h6 {
+    text-align: center;
+}
+
+/* Styling für den Luxuriösen Titel auf dem Hauptbild (Prada Marfa) */
+.hero-title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: black;
+    font-family: 'Engry';
+    font-size: 48px;
+    font-weight: bold;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+    text-transform: uppercase;
+    text-align: center;
+}
+
+/* Styling für die 4 einflussreichsten Prada Stores (Bilder nebeneinander) */
+.store-gallery {
+    display: flex;
+    justify-content: space-between;
+    margin: 50px 0;
+}
+
+/* More specific selector for store images */
+#stores .w3-quarter img {
+    width: 90%; /* Adjusts the image width */
+    height: auto;
+    object-fit: cover;
+    border-radius: 230px !important; /* Use !important to override other styles */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow */
+}
+
+
+/* Styling für die Geschichte von Prada und die Stores */
+.prada-story-section {
+    padding: 20px;
+    font-size: 18px;
+    line-height: 1.6;
+    color: #333;
+}
+
+/* Styling for the Prada Marfa Grid */
+.marfa-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    align-items: center;
+    margin-top: 50px;
+}
+
+/* Styling for images in 5:7 ratio */
+.marfa-image img {
+    width: 100%;
+    object-fit: cover;
+}
+
+/* Styling for the text in Marfa Section */
+.marfa-text {
+    text-align: left;
+    padding: 20px;
+}
+
+.marfa-text h3 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.marfa-text p {
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+/* Responsive Styling for Prada Marfa Section */
+@media (max-width: 768px) {
+    /* Stack grid items on smaller screens */
+    .marfa-grid {
+        grid-template-columns: 1fr; /* Einspaltiges Layout */
+    }
+
+    /* Center align text and reduce padding */
+    .marfa-text {
+        text-align: center;
+        padding: 10px;
+    }
+
+    /* Adjust text size for small screens */
+    .marfa-text h3 {
+        font-size: 20px;
+    }
+
+    .marfa-text p {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    /* Further adjustments for very small screens */
+    .marfa-text h3 {
+        font-size: 18px;
+    }
+
+    .marfa-text p {
+        font-size: 12px;
+    }
+
+    /* Reduce gap between items */
+    .marfa-grid {
+        gap: 10px;
+    }
+}
+
+/* Kleinere Bilder am Ende */
+.end-gallery {
+    display: flex;
+    gap: 20px;
+    justify-content: space-around;
+    margin: 50px 0;
+}
+
+.end-gallery img {
+    width: 30%;
+    height: auto;
+    object-fit: cover;
+}
+
+/* Feedback Section Styling */
+.feedback-container {
+    display: flex; /* Use flexbox for layout */
+    justify-content: space-between; /* Space between the two sections */
+    align-items: flex-start; /* Align items at the top */
+    min-width: 100%; /* Minimum width to prevent stretching */
+    margin: 0 auto; /* Center the container */
+    gap: 30px; /* Space between form and social footer */
+}
+
+/* Feedback Form Styling */
+.feedback-form {
+    flex: 1; /* Take equal space as the social footer */
+    min-width: 600px; /* Minimum width for the form */
+    padding: 50px; /* Inner padding for spacing */
+    background-color: #f7f7f7; /* Light background to separate it visually */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
+}
+
+/* Container-Styling */
+/* Container for the footer, centering the content */
+.social-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;  /* Centers items horizontally */
+    justify-content: center; /* Centers items vertically */
+    text-align: center;
+    background-color: #333;
+    padding: 200px;
+    margin-right: 100%;
+    color: #fff;
+}
+
+/* Social buttons with responsive sizes */
+.social-buttons {
+    display: flex;
+    gap: 10px;  /* Space between buttons */
+    justify-content: center;
+    margin-top: 20px;
+}
+
+/* Button styling */
+.social-button {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    font-size: 20px;
+    border-radius: 50%; /* Make buttons circular */
+    transition: background-color 0.3s;
+}
+
+/* Specific platform colors */
+.facebook {
+    background-color: #3b5998;
+}
+
+.instagram {
+    background: radial-gradient(circle at 30% 30%, #fdf497 0%, #fd5949 50%, #d6249f 75%, #285AEB 100%);
+}
+
+.linkedin {
+    background-color: #0077b5;
+}
+
+/* Hover effect */
+.social-button:hover {
+    opacity: 0.8;
+}
+
+/* Footer text styling */
+.social-footer p {
+    margin-top: 10px;
+    color: #ccc;
+}
+
+.social-footer p a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.social-footer p a:hover {
+    text-decoration: underline;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .social-footer {
+        padding: 10px;
+    }
+    
+    .social-buttons {
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .social-button {
+        width: 35px;
+        height: 35px;
+        font-size: 18px;
+    }
+}
+
+.container {
+    width: 100%; /* Nimmt 100% der Elternelementbreite ein */
+    padding: 20px; /* Verwende relative Padding-Größen */
+}
+
+.image {
+    max-width: 100%; /* Bild skaliert, ohne die Breite des Containers zu überschreiten */
+    height: auto; /* Höhe proportional anpassen */
+}
+
+/* Schriftfarbe des Impressum-Modals ändern */
+#impressumModal .w3-container {
+    color: #000; /* Dunkle Schriftfarbe */
+}
+.video_prada {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file

css/w3-theme-black.css

+.w3-theme-l5 {
+    color: #000 !important;
+    background-color: #f0f0f0 !important
+}
+
+.w3-theme-l4 {
+    color: #000 !important;
+    background-color: #cccccc !important
+}
+
+.w3-theme-l3 {
+    color: #fff !important;
+    background-color: #999999 !important
+}
+
+.w3-theme-l2 {
+    color: #fff !important;
+    background-color: #666666 !important
+}
+
+.w3-theme-l1 {
+    color: #fff !important;
+    background-color: #333333 !important
+}
+
+.w3-theme-d1 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d2 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d3 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d4 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d5 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-light {
+    color: #000 !important;
+    background-color: #f0f0f0 !important
+}
+
+.w3-theme-dark {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-action {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-text-theme {
+    color: #000000 !important
+}
+
+.w3-border-theme {
+    border-color: #000000 !important
+}
+
+.w3-hover-theme:hover {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-hover-text-theme:hover {
+    color: #000000 !important
+}
+
+.w3-hover-border-theme:hover {
+    border-color: #000000 !important
+}
\ No newline at end of file

css/w3-theme-dark-grey.css

+.w3-theme-l5 {color:#000 !important; background-color:#f6f6f6 !important}
+.w3-theme-l4 {color:#000 !important; background-color:#dfdfdf !important}
+.w3-theme-l3 {color:#000 !important; background-color:#c0c0c0 !important}
+.w3-theme-l2 {color:#fff !important; background-color:#a0a0a0 !important}
+.w3-theme-l1 {color:#fff !important; background-color:#818181 !important}
+.w3-theme-d1 {color:#fff !important; background-color:#575757 !important}
+.w3-theme-d2 {color:#fff !important; background-color:#4e4e4e !important}
+.w3-theme-d3 {color:#fff !important; background-color:#444444 !important}
+.w3-theme-d4 {color:#fff !important; background-color:#3a3a3a !important}
+.w3-theme-d5 {color:#fff !important; background-color:#303030 !important}
+
+.w3-theme-light {color:#000 !important; background-color:#f6f6f6 !important}
+.w3-theme-dark {color:#fff !important; background-color:#303030 !important}
+.w3-theme-action {color:#fff !important; background-color:#272727 !important}
+
+.w3-theme {color:#fff !important; background-color:#474747 !important}
+.w3-text-theme {color:#313131 !important}
+.w3-border-theme {border-color:#393939 !important}
+
+.w3-hover-theme:hover {color:#fff !important; background-color:#616161 !important}
+.w3-hover-text-theme:hover {color:#414141 !important}
+.w3-hover-border-theme:hover {border-color:#141414 !important}
\ No newline at end of file

deployment.yaml

+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: webapp
+  namespace: prada-projekt
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: webapp
+  template:
+    metadata:
+      labels:
+        app: webapp
+    spec:
+      containers:
+        - name: web
+          image: ahmedjakubovic/mein-webserver:latest
+          ports:
+            - containerPort: 80

docker-compose.yaml

+version: "3.8"
+
+services:
+  web:
+    image: ahmedjakubovic/mein-webserver:latest  # <-- Hier dein Docker Hub Image nutzen
+    ports:
+      - "8080:80"
+    restart: always

feedback.php

+<?php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = $_POST['Name'];
+    $email = $_POST['Email'];
+    $subject = $_POST['Subject'];
+    $message = $_POST['Message'];
+
+    $to = "aja149367@stud.gibb.ch";
+    $headers = "From: " . $email . "\r\n" .
+               "Reply-To: " . $email . "\r\n" .
+               "X-Mailer: PHP/" . phpversion();
+    $fullMessage = "Name: " . $name . "\n\n" .
+                   "Message:\n" . $message;
+
+    if (mail($to, $subject, $fullMessage, $headers)) {
+        echo "Danke für Ihr Feedback.";
+    } else {
+        echo "Es gab ein Problem beim Versenden Ihrer Nachricht.";
+    }
+}
+?>

index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prada Marfa Concept</title>
+    <link rel="stylesheet" href="css/w3.css">
+    <link rel="stylesheet" href="css/w3-theme-dark-grey.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body id="myPage">
+    <!-- Navbar -->
+    <div class="w3-top">
+        <div class="w3-bar w3-theme-d2 w3-left-align">
+            <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-hover-white w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
+            <a href="#home" class="w3-bar-item w3-button w3-teal"><i class="fa fa-home w3-margin-right"></i>Prada</a>
+            <a href="#stores" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Stores</a>
+            <a href="#story" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Story</a>
+            <a href="#marfa" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Prada Marfa</a>
+            <a href="#contact" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a>
+            <!-- Impressum Button -->
+            <a href="javascript:void(0);" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-white" onclick="document.getElementById('impressumModal').style.display='block'">Impressum</a>
+        </div>
+
+        <!-- Navbar on small screens -->
+        <div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium">
+            <a href="#stores" class="w3-bar-item w3-button">Stores</a>
+            <a href="#story" class="w3-bar-item w3-button">Story</a>
+            <a href="#marfa" class="w3-bar-item w3-button">Prada Marfa</a>
+            <a href="#contact" class="w3-bar-item w3-button">Contact</a>
+            <!-- Impressum for small screens -->
+            <a href="javascript:void(0);" class="w3-bar-item w3-button" onclick="document.getElementById('impressumModal').style.display='block'">Impressum</a>
+        </div>
+    </div>
+
+    <!-- Image Header with two side-by-side images -->
+    <div class="first-image w3-animate-opacity" id="home">
+        <img src="prada_1_1.jpeg" alt="Prada Marfa 1" class="w3-half prada-image">
+        <img src="prada_1_1.jpeg" alt="Prada Marfa 2" class="w3-half prada-image">
+        <!-- Text on the Title Photo -->
+        <div class="hero-title">Prada</div>
+    </div>
+
+    <!-- Stores Section -->
+    <div class="w3-container w3-padding-64 w3-center" id="stores">
+        <h2 class="w3-wide">Prada Stores around the world</h2>
+        <p>Explore the most iconic Prada stores worldwide</p>
+        <div class="w3-row"><br>
+            <div class="w3-quarter">
+                <a href="https://www.google.com/maps/place/Prada+Milano+Galleria+Uomo/@45.4656153,9.1876059,16z/data=!3m2!4b1!5s0x4786b70022af471d:0xdacfde6063ee408!4m6!3m5!1s0x7a47397d05b403f:0xd75ac8e34d91cbe6!8m2!3d45.4656116!4d9.1901808!16s%2Fg%2F1tppqvkc?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D" target="_blank">
+                    <img src="prada_milano1.jpeg" alt="Galleria Vittorio Emanuele II, Milan" style="width:90%" class="w3-hover-opacity w3-round">
+                </a>
+                <h3>Milan</h3>
+                <a href="https://www.google.com/maps/place/Prada+Milano+Galleria+Uomo/@45.4656153,9.1876059,16z/data=!3m2!4b1!5s0x4786b70022af471d:0xdacfde6063ee408!4m6!3m5!1s0x7a47397d05b403f:0xd75ac8e34d91cbe6!8m2!3d45.4656116!4d9.1901808!16s%2Fg%2F1tppqvkc?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D">Galleria Vittorio Emanuele II</a>
+            </div>
+            
+            <div class="w3-quarter">
+                <a href="https://www.google.com/maps/place/Prada+New+York+Broadway/@40.7245578,-74.0023693,16z/data=!4m7!3m6!1s0x89c2598efd2429e3:0x6ed2a2fc6ba40d45!4b1!8m2!3d40.7245538!4d-73.9974984!16s%2Fg%2F1trxl5vc?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D" target="_blank">
+                    <img src="prada_newyork.jpeg" alt="Prada New York" style="width:90%" class="w3-hover-opacity w3-round">
+                </a>
+                <h3>New York</h3>
+                <a href="https://www.google.com/maps/place/Prada+New+York+Broadway/@40.7245578,-74.0023693,16z/data=!4m7!3m6!1s0x89c2598efd2429e3:0x6ed2a2fc6ba40d45!4b1!8m2!3d40.7245538!4d-73.9974984!16s%2Fg%2F1trxl5vc?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D">Prada Epicenter</a>
+            </div>
+
+            <div class="w3-quarter">
+                <a href="https://www.google.com/maps/place/Prada+Tokyo+Aoyama/@35.6637706,139.7119333,17z/data=!3m1!4b1!4m6!3m5!1s0x60188b604bd40311:0x9afe7033dae3a619!8m2!3d35.6637663!4d139.7145082!16s%2Fg%2F11ggfrt8v6?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D" target="_blank">
+                    <img src="prada_tokyo.jpeg" alt="Prada Tokyo" style="width:90%" class="w3-hover-opacity w3-round">
+                </a>
+                <h3>Tokyo</h3>
+                <a href="https://www.google.com/maps/place/Prada+Tokyo+Aoyama/@35.6637706,139.7119333,17z/data=!3m1!4b1!4m6!3m5!1s0x60188b604bd40311:0x9afe7033dae3a619!8m2!3d35.6637663!4d139.7145082!16s%2Fg%2F11ggfrt8v6?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D">Prada Aoyama</a>
+            </div>
+
+            <div class="w3-quarter">
+                <a href="https://www.google.com/maps/place/Prada+Munich/@48.1395117,11.5723158,17z/data=!3m1!4b1!4m6!3m5!1s0x479e758b5f3eabfd:0x2d8ae5f6281f14ef!8m2!3d48.1395082!4d11.5771867!16s%2Fg%2F1ts1lmqf?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D" target="_blank">
+                    <img src="prada_munich.jpeg" alt="Prada Munich" style="width:90%" class="w3-hover-opacity w3-round">
+                </a>
+                <h3>Munich</h3>
+                <a href="https://www.google.com/maps/place/Prada+Munich/@48.1395117,11.5723158,17z/data=!3m1!4b1!4m6!3m5!1s0x479e758b5f3eabfd:0x2d8ae5f6281f14ef!8m2!3d48.1395082!4d11.5771867!16s%2Fg%2F1ts1lmqf?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D;">Prada Munich</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="video_prada">
+    <video width="100%" controls loop>
+        <source src="videos/prada_miami (1080p).mp4" type="video/mp4">
+      Your browser does not support the video tag.
+      </video>
+    </div>
+
+    <!-- History Section -->
+    <div class="w3-container w3-padding-64 w3-theme-l1" id="story">
+        <div class="prada-legacy-container">
+
+        <div class="prada-legacy-text">
+            <h2>Prada's Legacy</h2>
+            <p>Since its inception in 1913 by Mario Prada, Prada has evolved into a symbol of luxury and style. Originally founded as a small leather goods store in Milan's Galleria Vittorio Emanuele II, the brand quickly gained a reputation for exceptional quality and sophisticated design. In its early years, Prada was known for its exquisite handbags, trunks, and accessories, crafted from the finest materials.
+                In the 1970s, Miuccia Prada, the founder's granddaughter, took the helm and brought a new creative vision to the brand. She introduced the iconic nylon design, which revolutionized the brand and propelled it into the world of modern fashion. Miuccia Prada's bold and innovative approach, combined with a deep understanding of art and culture, transformed the company into a global fashion titan in the decades that followed.
+                Today, Prada stands not just as a leader in fashion but also as an artistic force that engages with contemporary themes. The brand has a strong presence in the art world, having initiated numerous projects that merge fashion, art, and architecture. Prada continues to be a trailblazer, constantly redefining the boundaries of creativity and craftsmanship.
+                From the runways in Milan to the most exclusive boutiques around the world, Prada remains synonymous with elegance, innovation, and cultural influence. The brand has mastered the art of staying true to its roots while catering to the modern tastes and needs of a global clientele. Prada's legacy is more than just fashion—it is a lifestyle that embodies timeless style and avant-garde thinking.</p>
+        </div>
+
+     <div class="prada-legacy-images">
+        <div class="w3-quarter prada-legacy-image">
+            <div class="w3-card w3-white">
+                <img src="gallerie1.jpeg" alt="Prada Galleria 1" style="width:100%">
+                <div class="w3-container">
+                    <h3>Exclusive Designs</h3>
+                    <p>High-quality craftsmanship and unique designs.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="w3-quarter prada-legacy-image">
+            <div class="w3-card w3-white">
+                <img src="gallerie2.jpeg" alt="Prada Galleria 2" style="width:100%">
+                <div class="w3-container">
+                    <h3>Timeless Fashion</h3>
+                    <p>Luxury fashion with a focus on contemporary culture.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="w3-quarter prada-legacy-image">
+            <div class="w3-card w3-white">
+                <img src="prada_gallery3.jpeg" alt="Prada Galleria 3" style="width:100%">
+                <div class="w3-container">
+                    <h3>Global Influence</h3>
+                    <p>Prada is loved by fashion enthusiasts all over the world.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Prada Marfa Section -->
+    <div class="w3-container w3-center w3-padding-64 w3-theme" id="marfa">
+        <h2 class="w3-wide">Prada Marfa</h2>
+        <p>Discover the iconic Prada Marfa store and its artistic significance.</p>
+        <div class="marfa-grid">
+            <!-- First Row: Image + Title -->
+            <div class="marfa-image">
+                <img src="pradamarfa1.jpeg" alt="Prada Marfa 1">
+            </div>
+            <div class="marfa-text">
+                <h3>Art Installation</h3>
+                <p>The Prada Marfa store is a permanent sculpture created by Scandinavian artists Michael Elmgreen and Ingar Dragset. Erected in 2005, this unique installation is situated in the remote Texas desert along U.S. Route 90, approximately 26 miles northwest of the small town of Marfa. Designed to resemble a real Prada boutique, the structure contains actual Prada products, including shoes and handbags, handpicked by Miuccia Prada herself.</p>
+            </div>
+
+            <!-- Second Row: Text + Image -->
+            <div class="marfa-text">
+                <h3>Iconic Architecture</h3>
+                <p>Prada Marfa's design is a minimalist blend of art and luxury, modeled after a high-end Prada boutique with sleek lines, large glass windows, and the iconic Prada logo. Situated in the vast Texas desert, this modern structure contrasts sharply with its natural surroundings, emphasizing the tension between nature and consumer culture. Inside, the store features a selection of Prada items from the fall 2005 collection, displayed as they would be in a real retail setting.
+                    However, the installation transcends its architectural mimicry. By placing this symbol of luxury in an isolated location, artists Elmgreen and Dragset prompt a reflection on consumerism and the ephemeral nature of fashion. Over time, the building's gradual weathering adds to its narrative, challenging the notion of luxury as timeless and pristine. Despite its remoteness, Prada Marfa stands as an architectural icon, attracting visitors who seek to explore this intersection of art, commerce, and landscape.54</p>
+            </div>
+            <div class="marfa-image">
+                <img src="pradamarfa2.jpeg" alt="Prada Marfa 2">
+            </div>
+
+            <!-- Third Row: Text + Image -->
+            <div class="marfa-image">
+                <img src="pradamarfa3.jpeg" alt="Prada Marfa 3">
+            </div>
+            <div class="marfa-text">
+                <h3>Desert Setting</h3>
+                <p>Prada Marfa’s location in the desolate Texas desert creates a striking juxtaposition. The barren landscape highlights the isolation and stillness around the luxury boutique, provoking thought on the contrast between consumerism and the stark, untouched environment. This unique setting transforms the store into a surreal spectacle, where art meets nature.</p>
+            </div>
+
+            <!-- Fourth Row: Image + Text -->
+            <div class="marfa-text">
+                <h3>Prada Noir</h3>
+                <h6>Disclaimer:
+                    The "Prada Noir" section is purely a work of fiction. It is not affiliated with or endorsed by Prada and is not intended to represent the brand or its values. This content is meant solely for creative storytelling and artistic expression.</h6>
+                <p>Facing Prada Marfa stands the enigmatic "Prada Noir," a surreal counterpoint to the iconic installation. This boutique adopts a minimalist and mysterious design, featuring sleek, black walls with only a single dimly lit entrance. Inside, Prada Noir diverges from the usual luxury storefront; it appears almost empty, displaying only a few avant-garde pieces that change daily. It's as if the desert itself curates these items, presenting a constantly evolving collection of fashion art.
+                    Unlike the static nature of Prada Marfa, Prada Noir embodies the ephemeral—a meditation on the transient allure of luxury. With no visible branding and nothing for sale, it leaves visitors questioning whether they have stepped into an art installation or a dream. Prada Noir stands as a haunting reflection of Prada's identity, challenging the concept of permanence and redefining the boundaries of fashion in the heart of the Texas desert.</p>
+            </div>
+            <div class="marfa-image">
+                <img src="pradamarfa4.jpeg" alt="Prada Marfa 4">
+            </div>
+        </div>
+        <!-- Google Maps Banner -->
+        <div class="w3-container w3-center w3-padding-64 w3-theme">
+            <h2 class="w3-wide">Prada Marfa Location</h2>
+            <div class="w3-responsive">
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d805850.7794084987!2d-104.6675367000062!3d30.68016183717583!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86ef6f9fdc081dfb%3A0xb9295d97ba3af46!2sPrada%20Marfa!5e0!3m2!1sde!2sch!4v1726732988133!5m2!1sde!2sch" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+            </div>
+        </div>
+    </div>
+
+<!-- Feedback Section -->
+<div class="w3-container w3-padding-64 w3-theme-l5" id="contact">
+    <div class="feedback-container"> <!-- New Flex Container -->
+        
+        <!-- Feedback Form Section -->
+        <div class="feedback-form">
+            <h2 class="w3-wide">Feedback</h2>
+            <p class="w3-opacity">Your feedback is valuable to us</p>
+            <form action="feedback.php" method="POST">
+                <p><input class="w3-input w3-border" type="text" placeholder="Name" required name="Name"></p>
+                <p><input class="w3-input w3-border" type="email" placeholder="Email" required name="Email"></p>
+                <p><input class="w3-input w3-border" type="text" placeholder="Subject" required name="Subject"></p>
+                <p><textarea class="w3-input w3-border" placeholder="Message" required name="Message" rows="4"></textarea></p>
+                <p><button class="w3-button w3-theme">Send</button></p>
+            </form>
+            <p>Contact us directly via email: <a href="mailto:aja149367@stud.gibb.ch">aja149367@stud.gibb.ch</a></p>
+        </div>
+
+        <!-- Social Media Section -->
+        <div class="social-footer">
+            <h3>Follow Us</h3>
+            <div class="social-buttons">
+                <a href="https://www.facebook.com/gibb.ch/" class="social-button facebook" target="_blank"><i class="fa fa-facebook"></i></a>
+                <a href="https://www.instagram.com/gib_bern/" class="social-button instagram" target="_blank"><i class="fa fa-instagram"></i></a>
+                <a href="https://www.linkedin.com/school/gibb/" class="social-button linkedin" target="_blank"><i class="fa fa-linkedin"></i></a>
+            </div>
+            <p>Powered by <a href="https://www.w3schools.com/w3css/">w3.css</a></p>
+        </div>
+
+    </div> <!-- End of Flex Container -->
+</div>
+
+
+    <!-- Impressum Modal -->
+    <div id="impressumModal" class="w3-modal">
+        <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px">
+            <div class="w3-center"><br>
+                <span onclick="document.getElementById('impressumModal').style.display='none'" class="w3-button w3-xlarge w3-transparent w3-display-topright" title="Close Modal">×</span>
+            </div>
+
+            <div class="w3-container">
+                <h4 class="w3-wide">Impressum</h4>
+                <p><strong>Adresse</strong></p>
+                <p>Gewerblich-Industrielle Berufsschule Bern (gibb)<br>Viktoriastrasse 71<br>3013 Bern</p>
+                <p><strong>So erreichen Sie mich</strong></p>
+                <p>Email: <a href="mailto:aja149367@stud.gibb.ch">aja149367@stud.gibb.ch</a></p>
+                <p><strong>Bilder und Texte auf dieser Website</strong></p>
+                <p>Bilder: Alle aus dem Internet und lizenzfreie Bilder.<br>Texte: Reine Fiktion, nicht auf reale Aussagen bezogen.</p>
+                <p><strong>Kontakt</strong></p>
+                <p>Am schnellsten geht's mit unserem <a href="#contact">Kontaktformular</a></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script>
+        // Used to toggle the menu on small screens when clicking on the menu button
+        function openNav() {
+            var x = document.getElementById("navDemo");
+            if (x.className.indexOf("w3-show") === -1) {
+                x.className += " w3-show";
+            } else { 
+                x.className = x.className.replace(" w3-show", "");
+            }
+        }
+    </script>
+</body>
+</html>

ingress.yaml

+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: webapp-ingress
+  namespace: prada-projekt
+  annotations:
+    nginx.ingress.kubernetes.io/use-regex: "true"
+spec:
+  ingressClassName: nginx
+  rules:
+    - host: ahmed.ch
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: webapp-service
+                port:
+                  number: 80