From 9df9bba9f50b92d5018ae5b890f8466fd7409956 Mon Sep 17 00:00:00 2001
From: Alexander <alex@br0tkasten.de>
Date: Tue, 2 Jan 2024 22:14:55 +0100
Subject: [PATCH] =?UTF-8?q?Men=C3=BC=20leiste=20endg=C3=BCltig=20f=C3=BCrs?=
 =?UTF-8?q?=20Handy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html+css.html     |  52 ++++++++--------------------
 img/Hamburger.png | Bin 1841 -> 0 bytes
 index.html        |  24 ++++++++-----
 style.css         |  86 +++++++++++++++++++++++++++++++++++-----------
 4 files changed, 95 insertions(+), 67 deletions(-)
 delete mode 100644 img/Hamburger.png

diff --git a/html+css.html b/html+css.html
index f7b4556..8919027 100644
--- a/html+css.html
+++ b/html+css.html
@@ -55,7 +55,7 @@
         color: white;
         text-decoration: none;
         margin-left: 0px;
-        font-size: 50px;
+        font-size: 6vw;
       }
 
       .menu-link {
@@ -71,7 +71,7 @@
       .headline {
         text-align: center;
         color: rgb(0, 0, 0);
-        font-size: 40px;
+        font-size: 5vw;
         text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
       }
 
@@ -90,10 +90,11 @@
       .menu-links {
         display: flex;
         align-items: center;
+        justify-content: flex-end; /* Rechts ausrichten */
       }
 
       .menu-links.show {
-        display: flex; /* Bei Klick auf das Symbol anzeigen */
+        display: flex;
       }
 
       .menu {
@@ -114,6 +115,7 @@
         text-decoration: none;
         display: block;
         font-size: 250%;
+        margin: 10px; /* Abstand zwischen den Links hinzufügen */
       }
 
       .mobile-menu {
@@ -141,40 +143,20 @@
           flex-direction: column;
           position: absolute;
           top: 80px;
-          left: 0;
+          right: 0; /* Rechts ausrichten */
           background-color: #333;
           width: 100%;
+          justify-content: flex-start; /* Links oben ausrichten */
         }
 
         .menu-links.show {
-          display: flex; /* Bei Klick auf das Symbol anzeigen */
+          display: flex;
         }
 
         .mobile-menu.show {
-          display: block; /* Bei Klick auf das Symbol anzeigen */
+          display: block;
           background-color: rgb(104, 0, 0);
         }
-
-        .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>
@@ -190,15 +172,11 @@
         <div class="hamburger-icon"></div>
       </div>
       <div class="menu-links">
+        <!-- Gemeinsame Links für Desktop und mobile Ansichten -->
         <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>
@@ -207,15 +185,13 @@
 
     <script>
       function toggleMenu() {
-        var menuLinks = document.querySelector('.menu-links');
-        var mobileMenu = document.querySelector('.mobile-menu');
+        var menuLinks = document.querySelector(".menu-links");
+        var mobileMenu = document.querySelector(".mobile-menu");
         var body = document.body;
 
-        menuLinks.classList.toggle('show');
-        mobileMenu.classList.toggle('show');
+        menuLinks.classList.toggle("show");
+        mobileMenu.classList.toggle("show");
       }
     </script>
   </body>
 </html>
-
-
diff --git a/img/Hamburger.png b/img/Hamburger.png
deleted file mode 100644
index 2889f9857f96b99ba2cc8bc5326071cb47ec1f1d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1841
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
MkeiRFVs#kuC)><882|tP

diff --git a/index.html b/index.html
index 0cbace6..a7935e5 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Br0tcraft</title>
 
-    <link rel="stylesheet" href="style.css">
-
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <div class="header-container">
@@ -15,23 +14,30 @@
     <div class="container">
       <a class="menu-link-home" href="">BR0TCRAFT</a>
       <div class="mobile-menu-icon" onclick="toggleMenu()">
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
+        <div class="hamburger-icon"></div>
+        <div class="hamburger-icon"></div>
+        <div class="hamburger-icon"></div>
       </div>
       <div class="menu-links">
+        <!-- Gemeinsame Links für Desktop und mobile Ansichten -->
         <a class="menu-link" href="">Kontakt</a>
         <a class="menu-link" href="">Spiele</a>
       </div>
     </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>
 
-    <!-- Weitere HTML-Elemente und Skripte hier einfügen -->
-
     <script>
       function toggleMenu() {
-        var menuLinks = document.querySelector('.menu-links');
-        menuLinks.classList.toggle('show');
+        var menuLinks = document.querySelector(".menu-links");
+        var mobileMenu = document.querySelector(".mobile-menu");
+        var body = document.body;
+
+        menuLinks.classList.toggle("show");
+        mobileMenu.classList.toggle("show");
       }
     </script>
   </body>
diff --git a/style.css b/style.css
index 28cb96e..be40e72 100644
--- a/style.css
+++ b/style.css
@@ -11,19 +11,19 @@
 body {
   margin: 0;
   font-family: "Orbitron";
+  background-color: white;
 }
 
 .header-container {
   position: relative;
   width: 100%;
-  overflow: hidden;
+  
 }
 
 .header-image {
   width: 100%;
-  height: 100%;
+  height: 70%;
   object-fit: cover;
-  object-position: 50% 5%;
 }
 
 .container {
@@ -46,7 +46,7 @@ body {
   color: white;
   text-decoration: none;
   margin-left: 0px;
-  font-size: 50px;
+  font-size: 6vw;
 }
 
 .menu-link {
@@ -62,7 +62,7 @@ body {
 .headline {
   text-align: center;
   color: rgb(0, 0, 0);
-  font-size: 40px;
+  font-size: 5vw;
   text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
 }
 
@@ -71,9 +71,53 @@ body {
   cursor: pointer;
 }
 
+.hamburger-icon {
+  width: 30px;
+  height: 3px;
+  background-color: white;
+  margin: 6px 0;
+}
+
 .menu-links {
   display: flex;
   align-items: center;
+  justify-content: flex-end; /* Rechts ausrichten */
+}
+
+.menu-links.show {
+  display: flex;
+}
+
+.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;
+  font-size: 250%;
+  margin: 10px; /* Abstand zwischen den Links hinzufügen */
+}
+
+.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) {
@@ -81,25 +125,27 @@ body {
     display: block; /* Bei kleinen Bildschirmen anzeigen */
   }
 
-  .menu-links {
-    display: none; /* Bei kleinen Bildschirmen ausblenden */
-    flex-direction: column;
-    position: absolute;
-    top: 80px; /* Passen Sie dies an, um die Position anzupassen */
-    left: 0;
-    background-color: #333; /* Hintergrundfarbe des Menüs */
-    width: 100%;
+  .hamburger-icon {
+    display: block;
   }
 
-  .menu-link {
-    padding: 10px;
-    text-align: center;
-    color: white;
-    text-decoration: none;
+  .menu-links {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 80px;
+    right: 0; /* Rechts ausrichten */
+    background-color: #333;
+    width: 100%;
+    justify-content: flex-start; /* Links oben ausrichten */
   }
 
   .menu-links.show {
-    display: flex; /* Bei Klick auf das Symbol anzeigen */
+    display: flex;
+  }
+
+  .mobile-menu.show {
+    display: block;
+    background-color: rgb(104, 0, 0);
   }
 }
-