diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..a88d2cb1609f2bbf2bd58a763694ed570de41a01
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,15 @@
+# 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"]
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
new file mode 100644
index 0000000000000000000000000000000000000000..540440ce89f2a408aa699b65100e18f15e0f09ca
--- /dev/null
+++ b/css/font-awesome.min.css
@@ -0,0 +1,4 @@
+/*!
+ * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..f56c987c025620a651df6e35c2458bf71d244b25
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,374 @@
+/* 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
diff --git a/css/w3-theme-black.css b/css/w3-theme-black.css
new file mode 100644
index 0000000000000000000000000000000000000000..f955c929420519e10a3fb39b1fa2a66873762914
--- /dev/null
+++ b/css/w3-theme-black.css
@@ -0,0 +1,90 @@
+.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
diff --git a/css/w3-theme-dark-grey.css b/css/w3-theme-dark-grey.css
new file mode 100644
index 0000000000000000000000000000000000000000..0cbcfb4f2f297102798dfc2661c2bbd641721581
--- /dev/null
+++ b/css/w3-theme-dark-grey.css
@@ -0,0 +1,22 @@
+.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
diff --git a/css/w3.css b/css/w3.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f5584483d5e94d6a3497f5c44dd297b8b6a3003
--- /dev/null
+++ b/css/w3.css
@@ -0,0 +1,1959 @@
+/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+
+html {
+ box-sizing: border-box
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: inherit
+}
+
+
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+
+html {
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%
+}
+
+body {
+ margin: 0
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section {
+ display: block
+}
+
+summary {
+ display: list-item
+}
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block
+}
+
+progress {
+ vertical-align: baseline
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0
+}
+
+[hidden],
+template {
+ display: none
+}
+
+a {
+ background-color: transparent
+}
+
+a:active,
+a:hover {
+ outline-width: 0
+}
+
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted
+}
+
+b,
+strong {
+ font-weight: bolder
+}
+
+dfn {
+ font-style: italic
+}
+
+mark {
+ background: #ff0;
+ color: #000
+}
+
+small {
+ font-size: 80%
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sub {
+ bottom: -0.25em
+}
+
+sup {
+ top: -0.5em
+}
+
+figure {
+ margin: 1em 40px
+}
+
+img {
+ border-style: none
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em
+}
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible
+}
+
+button,
+input,
+select,
+textarea,
+optgroup {
+ font: inherit;
+ margin: 0
+}
+
+optgroup {
+ font-weight: bold
+}
+
+button,
+input {
+ overflow: visible
+}
+
+button,
+select {
+ text-transform: none
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+ -webkit-appearance: button
+}
+
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+ border-style: none;
+ padding: 0
+}
+
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+ outline: 1px dotted ButtonText
+}
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: .35em .625em .75em
+}
+
+legend {
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal
+}
+
+textarea {
+ overflow: auto
+}
+
+[type=checkbox],
+[type=radio] {
+ padding: 0
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+ height: auto
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+
+/* End extract */
+
+html,
+body {
+ font-family: Verdana, sans-serif;
+ font-size: 15px;
+ line-height: 1.5
+}
+
+html {
+ overflow-x: hidden
+}
+
+h1 {
+ font-size: 36px
+}
+
+h2 {
+ font-size: 30px
+}
+
+h3 {
+ font-size: 24px
+}
+
+h4 {
+ font-size: 20px
+}
+
+h5 {
+ font-size: 18px
+}
+
+h6 {
+ font-size: 16px
+}
+
+.w3-serif {
+ font-family: serif
+}
+
+.w3-sans-serif {
+ font-family: sans-serif
+}
+
+.w3-cursive {
+ font-family: cursive
+}
+
+.w3-monospace {
+ font-family: monospace
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Segoe UI", Arial, sans-serif;
+ font-weight: 400;
+ margin: 10px 0
+}
+
+.w3-wide {
+ letter-spacing: 4px
+}
+
+hr {
+ border: 0;
+ border-top: 1px solid #eee;
+ margin: 20px 0
+}
+
+.w3-image {
+ max-width: 100%;
+ height: auto
+}
+
+img {
+ vertical-align: middle
+}
+
+a {
+ color: inherit
+}
+
+.w3-table,
+.w3-table-all {
+ border-collapse: collapse;
+ border-spacing: 0;
+ width: 100%;
+ display: table
+}
+
+.w3-table-all {
+ border: 1px solid #ccc
+}
+
+.w3-bordered tr,
+.w3-table-all tr {
+ border-bottom: 1px solid #ddd
+}
+
+.w3-striped tbody tr:nth-child(even) {
+ background-color: #f1f1f1
+}
+
+.w3-table-all tr:nth-child(odd) {
+ background-color: #fff
+}
+
+.w3-table-all tr:nth-child(even) {
+ background-color: #f1f1f1
+}
+
+.w3-hoverable tbody tr:hover,
+.w3-ul.w3-hoverable li:hover {
+ background-color: #ccc
+}
+
+.w3-centered tr th,
+.w3-centered tr td {
+ text-align: center
+}
+
+.w3-table td,
+.w3-table th,
+.w3-table-all td,
+.w3-table-all th {
+ padding: 8px 8px;
+ display: table-cell;
+ text-align: left;
+ vertical-align: top
+}
+
+.w3-table th:first-child,
+.w3-table td:first-child,
+.w3-table-all th:first-child,
+.w3-table-all td:first-child {
+ padding-left: 16px
+}
+
+.w3-btn,
+.w3-button {
+ border: none;
+ display: inline-block;
+ padding: 8px 16px;
+ vertical-align: middle;
+ overflow: hidden;
+ text-decoration: none;
+ color: inherit;
+ background-color: inherit;
+ text-align: center;
+ cursor: pointer;
+ white-space: nowrap
+}
+
+.w3-btn:hover {
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+}
+
+.w3-btn,
+.w3-button {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.w3-disabled,
+.w3-btn:disabled,
+.w3-button:disabled {
+ cursor: not-allowed;
+ opacity: 0.3
+}
+
+.w3-disabled *,
+:disabled * {
+ pointer-events: none
+}
+
+.w3-btn.w3-disabled:hover,
+.w3-btn:disabled:hover {
+ box-shadow: none
+}
+
+.w3-badge,
+.w3-tag {
+ background-color: #000;
+ color: #fff;
+ display: inline-block;
+ padding-left: 8px;
+ padding-right: 8px;
+ text-align: center
+}
+
+.w3-badge {
+ border-radius: 50%
+}
+
+.w3-ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0
+}
+
+.w3-ul li {
+ padding: 8px 16px;
+ border-bottom: 1px solid #ddd
+}
+
+.w3-ul li:last-child {
+ border-bottom: none
+}
+
+.w3-tooltip,
+.w3-display-container {
+ position: relative
+}
+
+.w3-tooltip .w3-text {
+ display: none
+}
+
+.w3-tooltip:hover .w3-text {
+ display: inline-block
+}
+
+.w3-ripple:active {
+ opacity: 0.5
+}
+
+.w3-ripple {
+ transition: opacity 0s
+}
+
+.w3-input {
+ padding: 8px;
+ display: block;
+ border: none;
+ border-bottom: 1px solid #ccc;
+ width: 100%
+}
+
+.w3-select {
+ padding: 9px 0;
+ width: 100%;
+ border: none;
+ border-bottom: 1px solid #ccc
+}
+
+.w3-dropdown-click,
+.w3-dropdown-hover {
+ position: relative;
+ display: inline-block;
+ cursor: pointer
+}
+
+.w3-dropdown-hover:hover .w3-dropdown-content {
+ display: block
+}
+
+.w3-dropdown-hover:first-child,
+.w3-dropdown-click:hover {
+ background-color: #ccc;
+ color: #000
+}
+
+.w3-dropdown-hover:hover>.w3-button:first-child,
+.w3-dropdown-click:hover>.w3-button:first-child {
+ background-color: #ccc;
+ color: #000
+}
+
+.w3-dropdown-content {
+ cursor: auto;
+ color: #000;
+ background-color: #fff;
+ display: none;
+ position: absolute;
+ min-width: 160px;
+ margin: 0;
+ padding: 0;
+ z-index: 1
+}
+
+.w3-check,
+.w3-radio {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ top: 6px
+}
+
+.w3-sidebar {
+ height: 100%;
+ width: 200px;
+ background-color: #fff;
+ position: fixed!important;
+ z-index: 1;
+ overflow: auto
+}
+
+.w3-bar-block .w3-dropdown-hover,
+.w3-bar-block .w3-dropdown-click {
+ width: 100%
+}
+
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
+.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
+ min-width: 100%
+}
+
+.w3-bar-block .w3-dropdown-hover .w3-button,
+.w3-bar-block .w3-dropdown-click .w3-button {
+ width: 100%;
+ text-align: left;
+ padding: 8px 16px
+}
+
+.w3-main,
+#main {
+ transition: margin-left .4s
+}
+
+.w3-modal {
+ z-index: 3;
+ display: none;
+ padding-top: 100px;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4)
+}
+
+.w3-modal-content {
+ margin: auto;
+ background-color: #fff;
+ position: relative;
+ padding: 0;
+ outline: 0;
+ width: 600px
+}
+
+.w3-bar {
+ width: 100%;
+ overflow: hidden
+}
+
+.w3-center .w3-bar {
+ display: inline-block;
+ width: auto
+}
+
+.w3-bar .w3-bar-item {
+ padding: 8px 16px;
+ float: left;
+ width: auto;
+ border: none;
+ display: block;
+ outline: 0
+}
+
+.w3-bar .w3-dropdown-hover,
+.w3-bar .w3-dropdown-click {
+ position: static;
+ float: left
+}
+
+.w3-bar .w3-button {
+ white-space: normal
+}
+
+.w3-bar-block .w3-bar-item {
+ width: 100%;
+ display: block;
+ padding: 8px 16px;
+ text-align: left;
+ border: none;
+ white-space: normal;
+ float: none;
+ outline: 0
+}
+
+.w3-bar-block.w3-center .w3-bar-item {
+ text-align: center
+}
+
+.w3-block {
+ display: block;
+ width: 100%
+}
+
+.w3-responsive {
+ display: block;
+ overflow-x: auto
+}
+
+.w3-container:after,
+.w3-container:before,
+.w3-panel:after,
+.w3-panel:before,
+.w3-row:after,
+.w3-row:before,
+.w3-row-padding:after,
+.w3-row-padding:before,
+.w3-cell-row:before,
+.w3-cell-row:after,
+.w3-clear:after,
+.w3-clear:before,
+.w3-bar:before,
+.w3-bar:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.w3-col,
+.w3-half,
+.w3-third,
+.w3-twothird,
+.w3-threequarter,
+.w3-quarter {
+ float: left;
+ width: 100%
+}
+
+.w3-col.s1 {
+ width: 8.33333%
+}
+
+.w3-col.s2 {
+ width: 16.66666%
+}
+
+.w3-col.s3 {
+ width: 24.99999%
+}
+
+.w3-col.s4 {
+ width: 33.33333%
+}
+
+.w3-col.s5 {
+ width: 41.66666%
+}
+
+.w3-col.s6 {
+ width: 49.99999%
+}
+
+.w3-col.s7 {
+ width: 58.33333%
+}
+
+.w3-col.s8 {
+ width: 66.66666%
+}
+
+.w3-col.s9 {
+ width: 74.99999%
+}
+
+.w3-col.s10 {
+ width: 83.33333%
+}
+
+.w3-col.s11 {
+ width: 91.66666%
+}
+
+.w3-col.s12 {
+ width: 99.99999%
+}
+
+@media (min-width:601px) {
+ .w3-col.m1 {
+ width: 8.33333%
+ }
+ .w3-col.m2 {
+ width: 16.66666%
+ }
+ .w3-col.m3,
+ .w3-quarter {
+ width: 24.99999%
+ }
+ .w3-col.m4,
+ .w3-third {
+ width: 33.33333%
+ }
+ .w3-col.m5 {
+ width: 41.66666%
+ }
+ .w3-col.m6,
+ .w3-half {
+ width: 49.99999%
+ }
+ .w3-col.m7 {
+ width: 58.33333%
+ }
+ .w3-col.m8,
+ .w3-twothird {
+ width: 66.66666%
+ }
+ .w3-col.m9,
+ .w3-threequarter {
+ width: 74.99999%
+ }
+ .w3-col.m10 {
+ width: 83.33333%
+ }
+ .w3-col.m11 {
+ width: 91.66666%
+ }
+ .w3-col.m12 {
+ width: 99.99999%
+ }
+}
+
+@media (min-width:993px) {
+ .w3-col.l1 {
+ width: 8.33333%
+ }
+ .w3-col.l2 {
+ width: 16.66666%
+ }
+ .w3-col.l3 {
+ width: 24.99999%
+ }
+ .w3-col.l4 {
+ width: 33.33333%
+ }
+ .w3-col.l5 {
+ width: 41.66666%
+ }
+ .w3-col.l6 {
+ width: 49.99999%
+ }
+ .w3-col.l7 {
+ width: 58.33333%
+ }
+ .w3-col.l8 {
+ width: 66.66666%
+ }
+ .w3-col.l9 {
+ width: 74.99999%
+ }
+ .w3-col.l10 {
+ width: 83.33333%
+ }
+ .w3-col.l11 {
+ width: 91.66666%
+ }
+ .w3-col.l12 {
+ width: 99.99999%
+ }
+}
+
+.w3-rest {
+ overflow: hidden
+}
+
+.w3-stretch {
+ margin-left: -16px;
+ margin-right: -16px
+}
+
+.w3-content,
+.w3-auto {
+ margin-left: auto;
+ margin-right: auto
+}
+
+.w3-content {
+ max-width: 980px
+}
+
+.w3-auto {
+ max-width: 1140px
+}
+
+.w3-cell-row {
+ display: table;
+ width: 100%
+}
+
+.w3-cell {
+ display: table-cell
+}
+
+.w3-cell-top {
+ vertical-align: top
+}
+
+.w3-cell-middle {
+ vertical-align: middle
+}
+
+.w3-cell-bottom {
+ vertical-align: bottom
+}
+
+.w3-hide {
+ display: none!important
+}
+
+.w3-show-block,
+.w3-show {
+ display: block!important
+}
+
+.w3-show-inline-block {
+ display: inline-block!important
+}
+
+@media (max-width:1205px) {
+ .w3-auto {
+ max-width: 95%
+ }
+}
+
+@media (max-width:600px) {
+ .w3-modal-content {
+ margin: 0 10px;
+ width: auto!important
+ }
+ .w3-modal {
+ padding-top: 30px
+ }
+ .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
+ .w3-dropdown-click.w3-mobile .w3-dropdown-content {
+ position: relative
+ }
+ .w3-hide-small {
+ display: none!important
+ }
+ .w3-mobile {
+ display: block;
+ width: 100%!important
+ }
+ .w3-bar-item.w3-mobile,
+ .w3-dropdown-hover.w3-mobile,
+ .w3-dropdown-click.w3-mobile {
+ text-align: center
+ }
+ .w3-dropdown-hover.w3-mobile,
+ .w3-dropdown-hover.w3-mobile .w3-btn,
+ .w3-dropdown-hover.w3-mobile .w3-button,
+ .w3-dropdown-click.w3-mobile,
+ .w3-dropdown-click.w3-mobile .w3-btn,
+ .w3-dropdown-click.w3-mobile .w3-button {
+ width: 100%
+ }
+}
+
+@media (max-width:768px) {
+ .w3-modal-content {
+ width: 500px
+ }
+ .w3-modal {
+ padding-top: 50px
+ }
+}
+
+@media (min-width:993px) {
+ .w3-modal-content {
+ width: 900px
+ }
+ .w3-hide-large {
+ display: none!important
+ }
+ .w3-sidebar.w3-collapse {
+ display: block!important
+ }
+}
+
+@media (max-width:992px) and (min-width:601px) {
+ .w3-hide-medium {
+ display: none!important
+ }
+}
+
+@media (max-width:992px) {
+ .w3-sidebar.w3-collapse {
+ display: none
+ }
+ .w3-main {
+ margin-left: 0!important;
+ margin-right: 0!important
+ }
+ .w3-auto {
+ max-width: 100%
+ }
+}
+
+.w3-top,
+.w3-bottom {
+ position: fixed;
+ width: 100%;
+ z-index: 1
+}
+
+.w3-top {
+ top: 0
+}
+
+.w3-bottom {
+ bottom: 0
+}
+
+.w3-overlay {
+ position: fixed;
+ display: none;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 2
+}
+
+.w3-display-topleft {
+ position: absolute;
+ left: 0;
+ top: 0
+}
+
+.w3-display-topright {
+ position: absolute;
+ right: 0;
+ top: 0
+}
+
+.w3-display-bottomleft {
+ position: absolute;
+ left: 0;
+ bottom: 0
+}
+
+.w3-display-bottomright {
+ position: absolute;
+ right: 0;
+ bottom: 0
+}
+
+.w3-display-middle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%)
+}
+
+.w3-display-left {
+ position: absolute;
+ top: 50%;
+ left: 0%;
+ transform: translate(0%, -50%);
+ -ms-transform: translate(-0%, -50%)
+}
+
+.w3-display-right {
+ position: absolute;
+ top: 50%;
+ right: 0%;
+ transform: translate(0%, -50%);
+ -ms-transform: translate(0%, -50%)
+}
+
+.w3-display-topmiddle {
+ position: absolute;
+ left: 50%;
+ top: 0;
+ transform: translate(-50%, 0%);
+ -ms-transform: translate(-50%, 0%)
+}
+
+.w3-display-bottommiddle {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 0%);
+ -ms-transform: translate(-50%, 0%)
+}
+
+.w3-display-container:hover .w3-display-hover {
+ display: block
+}
+
+.w3-display-container:hover span.w3-display-hover {
+ display: inline-block
+}
+
+.w3-display-hover {
+ display: none
+}
+
+.w3-display-position {
+ position: absolute
+}
+
+.w3-circle {
+ border-radius: 50%
+}
+
+.w3-round-small {
+ border-radius: 2px
+}
+
+.w3-round,
+.w3-round-medium {
+ border-radius: 4px
+}
+
+.w3-round-large {
+ border-radius: 8px
+}
+
+.w3-round-xlarge {
+ border-radius: 16px
+}
+
+.w3-round-xxlarge {
+ border-radius: 32px
+}
+
+.w3-row-padding,
+.w3-row-padding>.w3-half,
+.w3-row-padding>.w3-third,
+.w3-row-padding>.w3-twothird,
+.w3-row-padding>.w3-threequarter,
+.w3-row-padding>.w3-quarter,
+.w3-row-padding>.w3-col {
+ padding: 0 8px
+}
+
+.w3-container,
+.w3-panel {
+ padding: 0.01em 16px
+}
+
+.w3-panel {
+ margin-top: 16px;
+ margin-bottom: 16px
+}
+
+.w3-code,
+.w3-codespan {
+ font-family: Consolas, "courier new";
+ font-size: 16px
+}
+
+.w3-code {
+ width: auto;
+ background-color: #fff;
+ padding: 8px 12px;
+ border-left: 4px solid #4CAF50;
+ word-wrap: break-word
+}
+
+.w3-codespan {
+ color: crimson;
+ background-color: #f1f1f1;
+ padding-left: 4px;
+ padding-right: 4px;
+ font-size: 110%
+}
+
+.w3-card,
+.w3-card-2 {
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+}
+
+.w3-card-4,
+.w3-hover-shadow:hover {
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
+}
+
+.w3-spin {
+ animation: w3-spin 2s infinite linear
+}
+
+@keyframes w3-spin {
+ 0% {
+ transform: rotate(0deg)
+ }
+ 100% {
+ transform: rotate(359deg)
+ }
+}
+
+.w3-animate-fading {
+ animation: fading 10s infinite
+}
+
+@keyframes fading {
+ 0% {
+ opacity: 0
+ }
+ 50% {
+ opacity: 1
+ }
+ 100% {
+ opacity: 0
+ }
+}
+
+.w3-animate-opacity {
+ animation: opac 0.8s
+}
+
+@keyframes opac {
+ from {
+ opacity: 0
+ }
+ to {
+ opacity: 1
+ }
+}
+
+.w3-animate-top {
+ position: relative;
+ animation: animatetop 0.4s
+}
+
+@keyframes animatetop {
+ from {
+ top: -300px;
+ opacity: 0
+ }
+ to {
+ top: 0;
+ opacity: 1
+ }
+}
+
+.w3-animate-left {
+ position: relative;
+ animation: animateleft 0.4s
+}
+
+@keyframes animateleft {
+ from {
+ left: -300px;
+ opacity: 0
+ }
+ to {
+ left: 0;
+ opacity: 1
+ }
+}
+
+.w3-animate-right {
+ position: relative;
+ animation: animateright 0.4s
+}
+
+@keyframes animateright {
+ from {
+ right: -300px;
+ opacity: 0
+ }
+ to {
+ right: 0;
+ opacity: 1
+ }
+}
+
+.w3-animate-bottom {
+ position: relative;
+ animation: animatebottom 0.4s
+}
+
+@keyframes animatebottom {
+ from {
+ bottom: -300px;
+ opacity: 0
+ }
+ to {
+ bottom: 0;
+ opacity: 1
+ }
+}
+
+.w3-animate-zoom {
+ animation: animatezoom 0.6s
+}
+
+@keyframes animatezoom {
+ from {
+ transform: scale(0)
+ }
+ to {
+ transform: scale(1)
+ }
+}
+
+.w3-animate-input {
+ transition: width 0.4s ease-in-out
+}
+
+.w3-animate-input:focus {
+ width: 100%!important
+}
+
+.w3-opacity,
+.w3-hover-opacity:hover {
+ opacity: 0.60
+}
+
+.w3-opacity-off,
+.w3-hover-opacity-off:hover {
+ opacity: 1
+}
+
+.w3-opacity-max {
+ opacity: 0.25
+}
+
+.w3-opacity-min {
+ opacity: 0.75
+}
+
+.w3-greyscale-max,
+.w3-grayscale-max,
+.w3-hover-greyscale:hover,
+.w3-hover-grayscale:hover {
+ filter: grayscale(100%)
+}
+
+.w3-greyscale,
+.w3-grayscale {
+ filter: grayscale(75%)
+}
+
+.w3-greyscale-min,
+.w3-grayscale-min {
+ filter: grayscale(50%)
+}
+
+.w3-sepia {
+ filter: sepia(75%)
+}
+
+.w3-sepia-max,
+.w3-hover-sepia:hover {
+ filter: sepia(100%)
+}
+
+.w3-sepia-min {
+ filter: sepia(50%)
+}
+
+.w3-tiny {
+ font-size: 10px!important
+}
+
+.w3-small {
+ font-size: 12px!important
+}
+
+.w3-medium {
+ font-size: 15px!important
+}
+
+.w3-large {
+ font-size: 18px!important
+}
+
+.w3-xlarge {
+ font-size: 24px!important
+}
+
+.w3-xxlarge {
+ font-size: 36px!important
+}
+
+.w3-xxxlarge {
+ font-size: 48px!important
+}
+
+.w3-jumbo {
+ font-size: 64px!important
+}
+
+.w3-left-align {
+ text-align: left!important
+}
+
+.w3-right-align {
+ text-align: right!important
+}
+
+.w3-justify {
+ text-align: justify!important
+}
+
+.w3-center {
+ text-align: center!important
+}
+
+.w3-border-0 {
+ border: 0!important
+}
+
+.w3-border {
+ border: 1px solid #ccc!important
+}
+
+.w3-border-top {
+ border-top: 1px solid #ccc!important
+}
+
+.w3-border-bottom {
+ border-bottom: 1px solid #ccc!important
+}
+
+.w3-border-left {
+ border-left: 1px solid #ccc!important
+}
+
+.w3-border-right {
+ border-right: 1px solid #ccc!important
+}
+
+.w3-topbar {
+ border-top: 6px solid #ccc!important
+}
+
+.w3-bottombar {
+ border-bottom: 6px solid #ccc!important
+}
+
+.w3-leftbar {
+ border-left: 6px solid #ccc!important
+}
+
+.w3-rightbar {
+ border-right: 6px solid #ccc!important
+}
+
+.w3-section,
+.w3-code {
+ margin-top: 16px!important;
+ margin-bottom: 16px!important
+}
+
+.w3-margin {
+ margin: 16px!important
+}
+
+.w3-margin-top {
+ margin-top: 16px!important
+}
+
+.w3-margin-bottom {
+ margin-bottom: 16px!important
+}
+
+.w3-margin-left {
+ margin-left: 16px!important
+}
+
+.w3-margin-right {
+ margin-right: 16px!important
+}
+
+.w3-padding-small {
+ padding: 4px 8px!important
+}
+
+.w3-padding {
+ padding: 8px 16px!important
+}
+
+.w3-padding-large {
+ padding: 12px 24px!important
+}
+
+.w3-padding-16 {
+ padding-top: 16px!important;
+ padding-bottom: 16px!important
+}
+
+.w3-padding-24 {
+ padding-top: 24px!important;
+ padding-bottom: 24px!important
+}
+
+.w3-padding-32 {
+ padding-top: 32px!important;
+ padding-bottom: 32px!important
+}
+
+.w3-padding-48 {
+ padding-top: 48px!important;
+ padding-bottom: 48px!important
+}
+
+.w3-padding-64 {
+ padding-top: 64px!important;
+ padding-bottom: 64px!important
+}
+
+.w3-padding-top-64 {
+ padding-top: 64px!important
+}
+
+.w3-padding-top-48 {
+ padding-top: 48px!important
+}
+
+.w3-padding-top-32 {
+ padding-top: 32px!important
+}
+
+.w3-padding-top-24 {
+ padding-top: 24px!important
+}
+
+.w3-left {
+ float: left!important
+}
+
+.w3-right {
+ float: right!important
+}
+
+.w3-button:hover {
+ color: #000!important;
+ background-color: #ccc!important
+}
+
+.w3-transparent,
+.w3-hover-none:hover {
+ background-color: transparent!important
+}
+
+.w3-hover-none:hover {
+ box-shadow: none!important
+}
+
+
+/* Colors */
+
+.w3-amber,
+.w3-hover-amber:hover {
+ color: #000!important;
+ background-color: #ffc107!important
+}
+
+.w3-aqua,
+.w3-hover-aqua:hover {
+ color: #000!important;
+ background-color: #00ffff!important
+}
+
+.w3-blue,
+.w3-hover-blue:hover {
+ color: #fff!important;
+ background-color: #2196F3!important
+}
+
+.w3-light-blue,
+.w3-hover-light-blue:hover {
+ color: #000!important;
+ background-color: #87CEEB!important
+}
+
+.w3-brown,
+.w3-hover-brown:hover {
+ color: #fff!important;
+ background-color: #795548!important
+}
+
+.w3-cyan,
+.w3-hover-cyan:hover {
+ color: #000!important;
+ background-color: #00bcd4!important
+}
+
+.w3-blue-grey,
+.w3-hover-blue-grey:hover,
+.w3-blue-gray,
+.w3-hover-blue-gray:hover {
+ color: #fff!important;
+ background-color: #607d8b!important
+}
+
+.w3-green,
+.w3-hover-green:hover {
+ color: #fff!important;
+ background-color: #4CAF50!important
+}
+
+.w3-light-green,
+.w3-hover-light-green:hover {
+ color: #000!important;
+ background-color: #8bc34a!important
+}
+
+.w3-indigo,
+.w3-hover-indigo:hover {
+ color: #fff!important;
+ background-color: #3f51b5!important
+}
+
+.w3-khaki,
+.w3-hover-khaki:hover {
+ color: #000!important;
+ background-color: #f0e68c!important
+}
+
+.w3-lime,
+.w3-hover-lime:hover {
+ color: #000!important;
+ background-color: #cddc39!important
+}
+
+.w3-orange,
+.w3-hover-orange:hover {
+ color: #000!important;
+ background-color: #ff9800!important
+}
+
+.w3-deep-orange,
+.w3-hover-deep-orange:hover {
+ color: #fff!important;
+ background-color: #ff5722!important
+}
+
+.w3-pink,
+.w3-hover-pink:hover {
+ color: #fff!important;
+ background-color: #e91e63!important
+}
+
+.w3-purple,
+.w3-hover-purple:hover {
+ color: #fff!important;
+ background-color: #9c27b0!important
+}
+
+.w3-deep-purple,
+.w3-hover-deep-purple:hover {
+ color: #fff!important;
+ background-color: #673ab7!important
+}
+
+.w3-red,
+.w3-hover-red:hover {
+ color: #fff!important;
+ background-color: #f44336!important
+}
+
+.w3-sand,
+.w3-hover-sand:hover {
+ color: #000!important;
+ background-color: #fdf5e6!important
+}
+
+.w3-teal,
+.w3-hover-teal:hover {
+ color: #fff!important;
+ background-color: #009688!important
+}
+
+.w3-yellow,
+.w3-hover-yellow:hover {
+ color: #000!important;
+ background-color: #ffeb3b!important
+}
+
+.w3-white,
+.w3-hover-white:hover {
+ color: #000!important;
+ background-color: #fff!important
+}
+
+.w3-black,
+.w3-hover-black:hover {
+ color: #fff!important;
+ background-color: #000!important
+}
+
+.w3-grey,
+.w3-hover-grey:hover,
+.w3-gray,
+.w3-hover-gray:hover {
+ color: #000!important;
+ background-color: #9e9e9e!important
+}
+
+.w3-light-grey,
+.w3-hover-light-grey:hover,
+.w3-light-gray,
+.w3-hover-light-gray:hover {
+ color: #000!important;
+ background-color: #f1f1f1!important
+}
+
+.w3-dark-grey,
+.w3-hover-dark-grey:hover,
+.w3-dark-gray,
+.w3-hover-dark-gray:hover {
+ color: #fff!important;
+ background-color: #616161!important
+}
+
+.w3-pale-red,
+.w3-hover-pale-red:hover {
+ color: #000!important;
+ background-color: #ffdddd!important
+}
+
+.w3-pale-green,
+.w3-hover-pale-green:hover {
+ color: #000!important;
+ background-color: #ddffdd!important
+}
+
+.w3-pale-yellow,
+.w3-hover-pale-yellow:hover {
+ color: #000!important;
+ background-color: #ffffcc!important
+}
+
+.w3-pale-blue,
+.w3-hover-pale-blue:hover {
+ color: #000!important;
+ background-color: #ddffff!important
+}
+
+.w3-text-amber,
+.w3-hover-text-amber:hover {
+ color: #ffc107!important
+}
+
+.w3-text-aqua,
+.w3-hover-text-aqua:hover {
+ color: #00ffff!important
+}
+
+.w3-text-blue,
+.w3-hover-text-blue:hover {
+ color: #2196F3!important
+}
+
+.w3-text-light-blue,
+.w3-hover-text-light-blue:hover {
+ color: #87CEEB!important
+}
+
+.w3-text-brown,
+.w3-hover-text-brown:hover {
+ color: #795548!important
+}
+
+.w3-text-cyan,
+.w3-hover-text-cyan:hover {
+ color: #00bcd4!important
+}
+
+.w3-text-blue-grey,
+.w3-hover-text-blue-grey:hover,
+.w3-text-blue-gray,
+.w3-hover-text-blue-gray:hover {
+ color: #607d8b!important
+}
+
+.w3-text-green,
+.w3-hover-text-green:hover {
+ color: #4CAF50!important
+}
+
+.w3-text-light-green,
+.w3-hover-text-light-green:hover {
+ color: #8bc34a!important
+}
+
+.w3-text-indigo,
+.w3-hover-text-indigo:hover {
+ color: #3f51b5!important
+}
+
+.w3-text-khaki,
+.w3-hover-text-khaki:hover {
+ color: #b4aa50!important
+}
+
+.w3-text-lime,
+.w3-hover-text-lime:hover {
+ color: #cddc39!important
+}
+
+.w3-text-orange,
+.w3-hover-text-orange:hover {
+ color: #ff9800!important
+}
+
+.w3-text-deep-orange,
+.w3-hover-text-deep-orange:hover {
+ color: #ff5722!important
+}
+
+.w3-text-pink,
+.w3-hover-text-pink:hover {
+ color: #e91e63!important
+}
+
+.w3-text-purple,
+.w3-hover-text-purple:hover {
+ color: #9c27b0!important
+}
+
+.w3-text-deep-purple,
+.w3-hover-text-deep-purple:hover {
+ color: #673ab7!important
+}
+
+.w3-text-red,
+.w3-hover-text-red:hover {
+ color: #f44336!important
+}
+
+.w3-text-sand,
+.w3-hover-text-sand:hover {
+ color: #fdf5e6!important
+}
+
+.w3-text-teal,
+.w3-hover-text-teal:hover {
+ color: #009688!important
+}
+
+.w3-text-yellow,
+.w3-hover-text-yellow:hover {
+ color: #d2be0e!important
+}
+
+.w3-text-white,
+.w3-hover-text-white:hover {
+ color: #fff!important
+}
+
+.w3-text-black,
+.w3-hover-text-black:hover {
+ color: #000!important
+}
+
+.w3-text-grey,
+.w3-hover-text-grey:hover,
+.w3-text-gray,
+.w3-hover-text-gray:hover {
+ color: #757575!important
+}
+
+.w3-text-light-grey,
+.w3-hover-text-light-grey:hover,
+.w3-text-light-gray,
+.w3-hover-text-light-gray:hover {
+ color: #f1f1f1!important
+}
+
+.w3-text-dark-grey,
+.w3-hover-text-dark-grey:hover,
+.w3-text-dark-gray,
+.w3-hover-text-dark-gray:hover {
+ color: #3a3a3a!important
+}
+
+.w3-border-amber,
+.w3-hover-border-amber:hover {
+ border-color: #ffc107!important
+}
+
+.w3-border-aqua,
+.w3-hover-border-aqua:hover {
+ border-color: #00ffff!important
+}
+
+.w3-border-blue,
+.w3-hover-border-blue:hover {
+ border-color: #2196F3!important
+}
+
+.w3-border-light-blue,
+.w3-hover-border-light-blue:hover {
+ border-color: #87CEEB!important
+}
+
+.w3-border-brown,
+.w3-hover-border-brown:hover {
+ border-color: #795548!important
+}
+
+.w3-border-cyan,
+.w3-hover-border-cyan:hover {
+ border-color: #00bcd4!important
+}
+
+.w3-border-blue-grey,
+.w3-hover-border-blue-grey:hover,
+.w3-border-blue-gray,
+.w3-hover-border-blue-gray:hover {
+ border-color: #607d8b!important
+}
+
+.w3-border-green,
+.w3-hover-border-green:hover {
+ border-color: #4CAF50!important
+}
+
+.w3-border-light-green,
+.w3-hover-border-light-green:hover {
+ border-color: #8bc34a!important
+}
+
+.w3-border-indigo,
+.w3-hover-border-indigo:hover {
+ border-color: #3f51b5!important
+}
+
+.w3-border-khaki,
+.w3-hover-border-khaki:hover {
+ border-color: #f0e68c!important
+}
+
+.w3-border-lime,
+.w3-hover-border-lime:hover {
+ border-color: #cddc39!important
+}
+
+.w3-border-orange,
+.w3-hover-border-orange:hover {
+ border-color: #ff9800!important
+}
+
+.w3-border-deep-orange,
+.w3-hover-border-deep-orange:hover {
+ border-color: #ff5722!important
+}
+
+.w3-border-pink,
+.w3-hover-border-pink:hover {
+ border-color: #e91e63!important
+}
+
+.w3-border-purple,
+.w3-hover-border-purple:hover {
+ border-color: #9c27b0!important
+}
+
+.w3-border-deep-purple,
+.w3-hover-border-deep-purple:hover {
+ border-color: #673ab7!important
+}
+
+.w3-border-red,
+.w3-hover-border-red:hover {
+ border-color: #f44336!important
+}
+
+.w3-border-sand,
+.w3-hover-border-sand:hover {
+ border-color: #fdf5e6!important
+}
+
+.w3-border-teal,
+.w3-hover-border-teal:hover {
+ border-color: #009688!important
+}
+
+.w3-border-yellow,
+.w3-hover-border-yellow:hover {
+ border-color: #ffeb3b!important
+}
+
+.w3-border-white,
+.w3-hover-border-white:hover {
+ border-color: #fff!important
+}
+
+.w3-border-black,
+.w3-hover-border-black:hover {
+ border-color: #000!important
+}
+
+.w3-border-grey,
+.w3-hover-border-grey:hover,
+.w3-border-gray,
+.w3-hover-border-gray:hover {
+ border-color: #9e9e9e!important
+}
+
+.w3-border-light-grey,
+.w3-hover-border-light-grey:hover,
+.w3-border-light-gray,
+.w3-hover-border-light-gray:hover {
+ border-color: #f1f1f1!important
+}
+
+.w3-border-dark-grey,
+.w3-hover-border-dark-grey:hover,
+.w3-border-dark-gray,
+.w3-hover-border-dark-gray:hover {
+ border-color: #616161!important
+}
+
+.w3-border-pale-red,
+.w3-hover-border-pale-red:hover {
+ border-color: #ffe7e7!important
+}
+
+.w3-border-pale-green,
+.w3-hover-border-pale-green:hover {
+ border-color: #e7ffe7!important
+}
+
+.w3-border-pale-yellow,
+.w3-hover-border-pale-yellow:hover {
+ border-color: #ffffcc!important
+}
+
+.w3-border-pale-blue,
+.w3-hover-border-pale-blue:hover {
+ border-color: #e7ffff!important
+}
\ No newline at end of file
diff --git a/deployment.yaml b/deployment.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..946af75715b16d54ee32e49a5f80dc9fc6a3213f
--- /dev/null
+++ b/deployment.yaml
@@ -0,0 +1,20 @@
+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
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..30cc82f2e141d01bd49e3ad77012dd3f14ded530
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,8 @@
+version: "3.8"
+
+services:
+ web:
+ image: ahmedjakubovic/mein-webserver:latest # <-- Hier dein Docker Hub Image nutzen
+ ports:
+ - "8080:80"
+ restart: always
diff --git a/feedback.php b/feedback.php
new file mode 100644
index 0000000000000000000000000000000000000000..03435891450b4cbd1afde4377209aeffa82b379f
--- /dev/null
+++ b/feedback.php
@@ -0,0 +1,21 @@
+<?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.";
+ }
+}
+?>
diff --git a/galleria_vittorio_emmanuele_2.jpeg b/galleria_vittorio_emmanuele_2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..b43f9801e10dd374889d29a4d5cb8dcb0a30d36b
Binary files /dev/null and b/galleria_vittorio_emmanuele_2.jpeg differ
diff --git a/gallerie1.jpeg b/gallerie1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..9c55d11967cf46e55534d22b057a75dac55aef13
Binary files /dev/null and b/gallerie1.jpeg differ
diff --git a/gallerie2.jpeg b/gallerie2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..016634619b6065730467c7b9667cde8144c493fc
Binary files /dev/null and b/gallerie2.jpeg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..7a8fd888fda1e6fece2afc587eafd35b6c8ef88c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,257 @@
+<!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>
diff --git a/ingress.yaml b/ingress.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..c18f3744c930e0b0e5fc2f7f6b4c26c7de68ba86
--- /dev/null
+++ b/ingress.yaml
@@ -0,0 +1,20 @@
+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
diff --git a/prada_1_1.jpeg b/prada_1_1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..f7d593e8ddf358f766a9ca2f58442838410054ab
Binary files /dev/null and b/prada_1_1.jpeg differ
diff --git a/prada_gallery3.jpeg b/prada_gallery3.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e41de4033a35025e18ff17f525bfc292930aa010
Binary files /dev/null and b/prada_gallery3.jpeg differ
diff --git a/prada_marfa1.jpeg b/prada_marfa1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..7beae2eb087a29549fe2bffa5e39ab8e50e40244
Binary files /dev/null and b/prada_marfa1.jpeg differ
diff --git a/prada_milano1.jpeg b/prada_milano1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..58ca854f3fcc80c47fdfe6a519c3a96a403eeb55
Binary files /dev/null and b/prada_milano1.jpeg differ
diff --git a/prada_munich.jpeg b/prada_munich.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..067f0902ff5767dcec19819b6bd96241c15c3bc6
Binary files /dev/null and b/prada_munich.jpeg differ
diff --git a/prada_newyork.jpeg b/prada_newyork.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..221c566f2e7cff579a70bfe5b32e72532784f4df
Binary files /dev/null and b/prada_newyork.jpeg differ
diff --git a/prada_tokyo.jpeg b/prada_tokyo.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..da23d3287aed99255d4ed130bc0a7056b5043723
Binary files /dev/null and b/prada_tokyo.jpeg differ
diff --git a/pradamarfa1.jpeg b/pradamarfa1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..2335857091c520166e8cce1c52ba16fc0072814c
Binary files /dev/null and b/pradamarfa1.jpeg differ
diff --git a/pradamarfa2.jpeg b/pradamarfa2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..bc13c4f9bbfe52cc1012ff0c7a65596200026ed9
Binary files /dev/null and b/pradamarfa2.jpeg differ
diff --git a/pradamarfa3.jpeg b/pradamarfa3.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e14268e2649e3e356b0e0a0dcdfcf287c82e1f96
Binary files /dev/null and b/pradamarfa3.jpeg differ
diff --git a/pradamarfa4.jpeg b/pradamarfa4.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..58c5a40476358d5931da4682f11fe6acf5968525
Binary files /dev/null and b/pradamarfa4.jpeg differ
diff --git a/service.yaml b/service.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..82ea44f446bac05f3bec9f3d17727d4a7ee327d6
--- /dev/null
+++ b/service.yaml
@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: Service
+metadata:
+ name: webapp-service
+ namespace: prada-projekt
+spec:
+ selector:
+ app: webapp
+ ports:
+ - protocol: TCP
+ port: 80
+ targetPort: 80
+ type: ClusterIP
diff --git a/videos/prada_miami (1080p).mp4 b/videos/prada_miami (1080p).mp4
new file mode 100644
index 0000000000000000000000000000000000000000..452578d8c5aecc4274881de637004e083d10677b
Binary files /dev/null and b/videos/prada_miami (1080p).mp4 differ