diff --git a/html+css.html b/html+css.html
new file mode 100644
index 0000000..23171ba
--- /dev/null
+++ b/html+css.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Br0tcraft</title>
+
+    <style>
+      @font-face {
+        font-family: "Roboto";
+        src: url("/fonts/Roboto/Roboto-Regular.ttf");
+      }
+
+      @font-face {
+        font-family: "Orbitron";
+        src: url("/fonts/Orbitron/Orbitron-Black.ttf");
+      }
+
+      body {
+        margin: 0;
+        font-family: "Orbitron";
+        background-color: white;
+      }
+
+      .header-container {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      .header-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 50% 5%;
+      }
+
+      .container {
+        position: absolute;
+        right: 32px;
+        left: 32px;
+        top: 16px;
+        font-family: Orbitron;
+        font-size: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .logo {
+        width: calc(15% * 2);
+      }
+
+      .menu-link-home {
+        color: white;
+        text-decoration: none;
+        margin-left: 0px;
+        font-size: 50px;
+      }
+
+      .menu-link {
+        color: white;
+        text-decoration: none;
+        margin-left: 16px;
+      }
+
+      .menu-link:hover {
+        text-decoration: underline;
+      }
+
+      .headline {
+        text-align: center;
+        color: rgb(0, 0, 0);
+        font-size: 40px;
+        text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
+      }
+
+      .mobile-menu-icon {
+        display: none; /* Standardmäßig ausblenden */
+        cursor: pointer;
+      }
+
+      .hamburger-icon {
+        width: 30px;
+        height: 3px;
+        background-color: white;
+        margin: 6px 0;
+      }
+
+      .menu-links {
+        display: flex;
+        align-items: center;
+      }
+
+      .menu-links.show {
+        display: flex; /* Bei Klick auf das Symbol anzeigen */
+      }
+
+      .menu {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #333; /* Hintergrundfarbe des Menüs */
+        z-index: 1000;
+      }
+
+      .menu-link-mobile {
+        color: white;
+        padding: 20px;
+        text-align: center;
+        text-decoration: none;
+        display: block;
+      }
+
+      .mobile-menu {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        z-index: 1000;
+      }
+
+      @media screen and (max-width: 768px) {
+        .mobile-menu-icon {
+          display: block; /* Bei kleinen Bildschirmen anzeigen */
+        }
+
+        .hamburger-icon {
+          display: block;
+        }
+
+        .menu-links {
+          display: none;
+          flex-direction: column;
+          position: absolute;
+          top: 80px;
+          left: 0;
+          background-color: #333;
+          width: 100%;
+        }
+
+        .menu-links.show {
+          display: flex; /* Bei Klick auf das Symbol anzeigen */
+        }
+
+        .mobile-menu.show {
+          display: block; /* Bei Klick auf das Symbol anzeigen */
+          background-color: red;
+        }
+
+        .menu {
+          display: none;
+        }
+
+        .close-menu {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          color: white;
+          cursor: pointer;
+          font-size: 20px;
+        }
+      }
+      .close-menu {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        color: white;
+        cursor: pointer;
+        font-size: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="header-container">
+      <img class="header-image" src="img/Background.png" />
+    </div>
+    <div class="container">
+      <a class="menu-link-home" href="">BR0TCRAFT</a>
+      <div class="mobile-menu-icon" onclick="toggleMenu()">
+        <div class="hamburger-icon"></div>
+        <div class="hamburger-icon"></div>
+        <div class="hamburger-icon"></div>
+      </div>
+      <div class="menu-links">
+        <a class="menu-link" href="">Kontakt</a>
+        <a class="menu-link" href="">Spiele</a>
+      </div>
+    </div>
+    <div class="menu">
+      <div class="close-menu" onclick="toggleMenu()">✖</div>
+      <a class="menu-link-mobile" href="">Kontakt</a>
+      <a class="menu-link-mobile" href="">Spiele</a>
+    </div>
+    <div class="mobile-menu" onclick="toggleMenu()">
+      <a class="menu-link-mobile" href="">Kontakt</a>
+      <a class="menu-link-mobile" href="">Spiele</a>
+    </div>
+    <h1 class="headline">Meine Werke</h1>
+
+    <script>
+      function toggleMenu() {
+        var menuLinks = document.querySelector('.menu-links');
+        var mobileMenu = document.querySelector('.mobile-menu');
+        var body = document.body;
+
+        menuLinks.classList.toggle('show');
+        mobileMenu.classList.toggle('show');
+
+        if (mobileMenu.classList.contains('show')) {
+          body.style.backgroundColor = 'red';
+        } else {
+          body.style.backgroundColor = 'transparent';
+        }
+      }
+
+      // Überwache Änderungen der Bildschirmgröße
+      window.addEventListener('resize', function () {
+        var screenWidth = window.innerWidth;
+        var mobileMenu = document.querySelector('.mobile-menu');
+        var body = document.body;
+
+        // Überprüfe, ob das mobile Menü sichtbar ist
+        if (mobileMenu.classList.contains('show')) {
+          body.style.backgroundColor = 'red';
+        } else {
+          body.style.backgroundColor = 'white';
+        }
+      });
+    </script>
+  </body>
+</html>
+
+
diff --git a/img/DropDownMobile.png b/img/DropDownMobile.png
new file mode 100644
index 0000000..2670c97
Binary files /dev/null and b/img/DropDownMobile.png differ
diff --git a/img/Hamburger.png b/img/Hamburger.png
new file mode 100644
index 0000000..2889f98
Binary files /dev/null and b/img/Hamburger.png differ
