From 06b0f46e64739f83e46cbd80a651e9b8a421a712 Mon Sep 17 00:00:00 2001
From: Tracker-Friendly <jliwin98@danwin1210.de>
Date: Fri, 8 Mar 2024 20:24:59 +0000
Subject: [PATCH] Properly fixed positioning apps

---
 index.html | 74 ++++++++++++++++++++++++++++++++++++++----------------
 styles.css | 20 +++++++++++++++
 2 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 310cd28..17bcb10 100644
--- a/index.html
+++ b/index.html
@@ -17,86 +17,118 @@
     </div>
 
 	</li>
-    <div style="display: flex;">
+    <div class="appcontainer">
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
         <div class="burgerbox">
-            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg" style="position: static;"></li>
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
             <li><h>BurgerNotes</h></li>
             <li><p>iOS: v1.0</p></li>
             <li><p style="">Android: v1.0</p></li>
             <li><p>Linux: v1.0</p></li>
-            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" style="background-color: lightblue;display: flex;height: 100%;text-align: center;flex-direction: column;justify-content: center;margin: 5px;border-radius: 8px;text-decoration: none;color: black;font-size: 20px;">Get</a></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
+        </div>
+        <div class="burgerbox">
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
+            <li><h>BurgerNotes</h></li>
+            <li><p>iOS: v1.0</p></li>
+            <li><p style="">Android: v1.0</p></li>
+            <li><p>Linux: v1.0</p></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
+        </div>
+        <div class="burgerbox">
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
+            <li><h>BurgerNotes</h></li>
+            <li><p>iOS: v1.0</p></li>
+            <li><p style="">Android: v1.0</p></li>
+            <li><p>Linux: v1.0</p></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
+        </div>
+        <div class="burgerbox">
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
+            <li><h>BurgerNotes</h></li>
+            <li><p>iOS: v1.0</p></li>
+            <li><p style="">Android: v1.0</p></li>
+            <li><p>Linux: v1.0</p></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
+        </div>
+        <div class="burgerbox">
+            <li><img src="https://www.designyourway.net/drb/wp-content/uploads/2017/04/Nature-Wallpaper-Desktop-Background-101-1-1600x900.jpg"></li>
+            <li><h>BurgerNotes</h></li>
+            <li><p>iOS: v1.0</p></li>
+            <li><p style="">Android: v1.0</p></li>
+            <li><p>Linux: v1.0</p></li>
+            <li><p>Web: v1.0</p></li><a href="https://hectabit.org" class="burgerbutton">Get</a></li>
         </div>
     </div>
 </body>
diff --git a/styles.css b/styles.css
index d2318b4..e60b9dc 100644
--- a/styles.css
+++ b/styles.css
@@ -64,3 +64,23 @@ img {
     text-decoration: none;
     color: black;
 }
+
+.appcontainer {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.burgerbutton {
+    background-color: lightblue;
+    display: flex;
+    height: 100%;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    margin: 5px;
+    border-radius: 8px;
+    text-decoration: none;
+    color: black;
+    font-size: 20px;
+}