From c59ec0567260f2e424fce3835ff72dbeb8412bf9 Mon Sep 17 00:00:00 2001
From: Alexander <alex@br0tkasten.de>
Date: Wed, 3 Jan 2024 17:00:13 +0100
Subject: [PATCH] 2 neue Kategorien und neue Anordnung

---
 index.html | 29 ++++++++++++++++++-----------
 style.css  | 29 ++++++++++++++---------------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index c37e73e..e9a350c 100644
--- a/index.html
+++ b/index.html
@@ -20,29 +20,36 @@
       </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>
+        <a class="menu-link" href="">Tutorials</a>
+        <a class="menu-link" href="">Extensions</a>
+        <a class="menu-link" href="">Kontakt</a>
       </div>
     </div>
     <div class="mobile-menu" onclick="toggleMenu()">
-      <a class="menu-link-mobile" href="">Kontakt</a>
+      <a class="menu-link-home" href="">BR0TCRAFT</a>
       <a class="menu-link-mobile" href="">Spiele</a>
+      <a class="menu-link-mobile" href="">Tutorials</a>
+      <a class="menu-link-mobile" href="">Turbowarp-Extensions</a>
+      <a class="menu-link-mobile" href="">Kontakt</a>
     </div>
-    <h1 class="headline">Meine Spiele</h1>
+    <h1 class="headline">Spiele</h1>
     <div class="SpielTypen">
-      <a href="" class="KategorieLink"
-        ><img src="img/SpielTypen/Javascript.png" alt=""
+      <a href=""
+        ><img src="img/SpielTypen/Javascript.png" class="KategorieLink"
       /></a>
-      <a href="" class="KategorieLink"
-        ><img src="img/SpielTypen/PocketCode.png" alt=""
+      <a href=""
+        ><img src="img/SpielTypen/PocketCode.png" class="KategorieLink"
       /></a>
-      <a href="" class="KategorieLink"
-        ><img src="img/SpielTypen/Unity.png" alt=""
+      <a href=""
+        ><img src="img/SpielTypen/Unity.png" class="KategorieLink"
       /></a>
-      <a href="" class="KategorieLink"
-        ><img src="img/SpielTypen/Turbowarp.png" alt=""
+      <a href=""
+        ><img src="img/SpielTypen/Turbowarp.png" class="KategorieLink"
       /></a>
     </div>
+    <h1 class="headline">Tutorials</h1>
+    <h1 class="headline">Turbowarp-Extensions</h1>
 
     <script>
       function toggleMenu() {
diff --git a/style.css b/style.css
index 4fe9de1..cc0a04d 100644
--- a/style.css
+++ b/style.css
@@ -17,19 +17,18 @@ body {
 .header-container {
   position: relative;
   width: 100%;
-  
 }
 
 .header-image {
   width: 100%;
-  height: 70%;
+  height: 100%;
   object-fit: cover;
 }
 
 .container {
   position: absolute;
   right: 32px;
-  left: 32px;
+  left: 10px;
   top: 16px;
   font-family: Orbitron;
   font-size: 24px;
@@ -38,10 +37,6 @@ body {
   justify-content: space-between;
 }
 
-.logo {
-  width: calc(15% * 2);
-}
-
 .menu-link-home {
   color: white;
   text-decoration: none;
@@ -62,7 +57,7 @@ body {
 .headline {
   text-align: center;
   color: rgb(0, 0, 0);
-  font-size: 5vw;
+  font-size: 4vw;
   text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
 }
 
@@ -106,7 +101,7 @@ body {
   text-decoration: none;
   display: block;
   font-size: 250%;
-  margin: 10px; /* Abstand zwischen den Links hinzufügen */
+  margin: 20px; /* Abstand zwischen den Links hinzufügen */
 }
 
 .mobile-menu {
@@ -120,7 +115,11 @@ body {
   z-index: 1000;
 }
 
-@media screen and (max-width: 768px) {
+.KategorieLink {
+  width: 300px;
+}
+
+@media screen and (max-width: 937px) {
   .mobile-menu-icon {
     display: block; /* Bei kleinen Bildschirmen anzeigen */
   }
@@ -148,11 +147,11 @@ body {
     display: block;
     background-color: rgb(104, 0, 0);
   }
+
+  .KategorieLink {
+    width: 24%;
+  }
 }
 .Spieletypen {
   display: block;
-}
-.KategorieLink{
-  width: 22vw;
-  height: 100%;
-}
+}
\ No newline at end of file