From 6f904c5b95a8209ceb67dd3cca991f11845a134a Mon Sep 17 00:00:00 2001
From: brausjonas <brausjonas@gmail.com>
Date: Sun, 26 Mar 2023 03:46:36 +0200
Subject: [PATCH] Desiignn

---
 .idea/workspace.xml |  4 +-
 games.html          | 62 +++++++++++++++++++++++++++++++
 index.html          | 36 ++++++++++++++----
 mainPage.css        | 89 +++++++++++++++++++++++++++++++++++++++++++++
 navigationStyle.css |  2 +-
 quicklinks.html     | 61 +++++++++++++++++++++++++++++++
 6 files changed, 244 insertions(+), 10 deletions(-)
 create mode 100644 games.html
 create mode 100644 quicklinks.html
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index dc12b67..de1ca7e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -13,9 +13,9 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="HTML File" />
         <option value="JavaScript File" />
         <option value="CSS File" />
+        <option value="HTML File" />
       </list>
     </option>
   </component>
@@ -61,7 +61,7 @@
       <updated>1679674447095</updated>
       <workItem from="1679674448294" duration="3278000" />
       <workItem from="1679754546660" duration="3762000" />
-      <workItem from="1679776338023" duration="8024000" />
+      <workItem from="1679776338023" duration="10678000" />
     </task>
     <servers />
   </component>
diff --git a/games.html b/games.html
new file mode 100644
index 0000000..8543d99
--- /dev/null
+++ b/games.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>IO Game Studios | Games</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="navigationStyle.css">
+    <link rel="stylesheet" href="mainPage.css">
+</head>
+<body onresize="hideMobileMenuBar()">
+
+<header>
+
+    <button>IO Game Studios</button>
+
+    <nav>
+        <!-- Desktop-->
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a class="highlighted" href="games.html">Games</a></li>
+            <li><a href="quicklinks.html">Quicklinks</a></li>
+            <li>About</li>
+        </ul>
+
+        <!--Mobile-->
+        <button onclick="showMobileMenuBar()" id="mobileMenuBarButton">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+            </svg>
+        </button>
+    </nav>
+</header>
+
+<!--Mobile-->
+<menu id="mobileMenuBar">
+    <div>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+
+            <li  class="highlighted"><a href="games.html">Games</a></li>
+
+            <li><a href="quicklinks.html">Quicklinks</a></li>
+
+            <li>About</li>
+        </ul>
+    </div>
+</menu>
+
+<!--Menu Ends here-->
+
+<div class="contentArea">
+
+
+    <div id="mainPageGames">
+
+    </div>
+
+</div>
+</body>
+
+<script src="StartPage.js"></script>
+</html>
diff --git a/index.html b/index.html
index bbc888a..b565ef9 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,9 @@
     <nav>
         <!-- Desktop-->
         <ul>
-            <li class="highlighted">Home</li>
-            <li>Games</li>
-            <li>Quicklinks</li>
+            <li><a class="highlighted" href="index.html">Home</a></li>
+            <li><a href="games.html">Games</a></li>
+            <li><a href="quicklinks.html">Quicklinks</a></li>
             <li>About</li>
         </ul>
 
@@ -35,11 +35,11 @@
 <menu id="mobileMenuBar">
     <div>
         <ul>
-            <li class="highlighted">Home</li>
+            <li  class="highlighted" ><a href="index.html">Home</a></li>
 
-            <li>Games</li>
+            <li><a href="games.html">Games</a></li>
 
-            <li>Quicklinks</li>
+            <li><a href="quicklinks.html">Quicklinks</a></li>
 
             <li>About</li>
         </ul>
@@ -49,10 +49,32 @@
 <!--Menu Ends here-->
 
 <div class="contentArea">
-    <h1 id="mainHeader">We create games like back in the days</h1>
+
+    <h1 style="color: #F7A4A4">We create games like back in the days</h1>
+
+    <h2>Have a look at our games and contents!</h2>
 
     <div id="mainPageGames">
+        <div class="color3">
+            <h2>FlufflParty</h2>
+            <p>
+                FlufflParty is the new partygame for mobile and pc.
+                Play free and online with your friends. NO ADS.
+            </p>
 
+            <button class="color1">Visit now</button>
+        </div>
+        <div class="color1">
+            <h2>Characters</h2>
+            <p>
+                In FlufflParty there are witing many maps and cute characters for you!
+            </p>
+
+            <button class="color2">Review</button>
+        </div>
+        <div class="color2">
+            <h2>Coming Soon</h2>
+        </div>
     </div>
 
 </div>
diff --git a/mainPage.css b/mainPage.css
index 452f007..ba0ef00 100644
--- a/mainPage.css
+++ b/mainPage.css
@@ -26,5 +26,94 @@ h1 {
 {
     display: flex;
     flex-direction: column;
+    align-items: center;
 }
 
+.color1
+{
+    background-color: #F7A4A4;
+}
+
+.color2
+{
+    background-color: #FEBE8C;
+}
+
+.color3
+{
+    background-color: #B6E2A1;
+}
+
+h2
+{
+    font-size: 22px;
+    text-align: center;
+    padding: 20px;
+    color: #41423f;
+}
+
+#mainPageGames
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 18cm)
+{
+    #mainPageGames
+    {
+        flex-direction: column;
+    }
+}
+
+#mainPageGames div
+{
+    min-height: 300px;
+    max-height: 300px;
+    border-radius: 50px;
+    margin: 10px;
+    padding: 20px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
+    flex-direction: column;
+}
+
+@media (min-width: 18.1cm)
+{
+    #mainPageGames div
+    {
+        min-width: 30%;
+        max-width: 30%;
+    }
+}
+
+@media (max-width: 18cm)
+{
+    #mainPageGames div
+    {
+        min-width: 80%;
+        max-width: 80%;
+    }
+}
+
+
+
+#mainPageGames p
+{
+    color: #41423f;
+    text-align: center;
+}
+
+#mainPageGames button
+{
+    margin-top: 20px;
+    border-radius: 50px;
+    border-style: none;
+    color: #41423f;
+    cursor: pointer;
+    padding: 15px;
+}
diff --git a/navigationStyle.css b/navigationStyle.css
index b15180b..0abb90e 100644
--- a/navigationStyle.css
+++ b/navigationStyle.css
@@ -17,7 +17,7 @@ Desktop
 /*basic li a and button setup*/
 li, a, button {
     font-weight: 500;
-    color: black;
+    color: #41423f;;
     text-decoration: none;
 }
 
diff --git a/quicklinks.html b/quicklinks.html
new file mode 100644
index 0000000..c994720
--- /dev/null
+++ b/quicklinks.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>IO Game Studios</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="navigationStyle.css">
+  <link rel="stylesheet" href="mainPage.css">
+</head>
+<body onresize="hideMobileMenuBar()">
+
+<header>
+
+  <button>IO Game Studios</button>
+
+  <nav>
+    <!-- Desktop-->
+    <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="games.html">Games</a></li>
+      <li><a class="highlighted"  href="quicklinks.html">Quicklinks</a></li>
+      <li>About</li>
+    </ul>
+
+    <!--Mobile-->
+    <button onclick="showMobileMenuBar()" id="mobileMenuBarButton">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+      </svg>
+    </button>
+  </nav>
+</header>
+
+<!--Mobile-->
+<menu id="mobileMenuBar">
+  <div>
+    <ul>
+      <li><a href="index.html">Home</a></li>
+
+      <li><a href="games.html">Games</a></li>
+
+      <li class="highlighted"><a href="quicklinks.html">Quicklinks</a></li>
+
+      <li>About</li>
+    </ul>
+  </div>
+</menu>
+
+<!--Menu Ends here-->
+
+<div class="contentArea">
+
+  <div id="mainPageGames">
+
+  </div>
+
+</div>
+</body>
+
+<script src="StartPage.js"></script>
+</html>
