Merge pull request #578 from VijaySamant4368/how-to-play

Improved how-to-play page
ChromeGaming · Jul 23, 2024 · c0f979f · c0f979f
2 parents 7c3b09d + 23835f2
commit c0f979f
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 9 deletions.
diff --git a/pages/about.html b/pages/about.html
@@ -11,6 +11,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../styles/mainstyle.css">
 
   <!-- Logo of the game -->
   <link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon" />
@@ -494,7 +495,7 @@
 
   </script>
 
-  <nav class="navbar">
+  <!-- <nav class="navbar">
     <div class="logo">
       <a href="../index.html">Dots & Boxes ⚄</a>
     </div>
@@ -505,7 +506,123 @@
       <li><a href="../pages/contributors.html">Contributors</a></li>
       <li><a href="../pages/game.html">Let's Go</a></li>
     </ul>
-  </nav>
+  </nav> -->
+
+
+  <nav class="navbarr" style="color: white;">
+    <div class="logo">
+        <a href="../index.html">Dots & Boxes ⚄</a>
+    </div>
+
+    <ul class="nav-links" id="nav-links-toggled">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="../pages/about.html">About Us</a></li>
+        <li><a href="../pages/FAQs.html">FAQs</a></li>
+        <li><a href="../pages/contributors.html">Contributors</a></li>
+        <button class="start"><a href="../pages/game.html">Let's Go</a></button>
+    </ul>
+    <button class="navbar-toggler" id="navbar-toggler" type="button" onclick="toggleNavBar()">
+        <span class="toggler-icon"></span>
+        <span class="toggler-icon"></span>
+        <span class="toggler-icon"></span>
+      </button>
+</nav>
+</div>
+
+<style>
+
+
+
+  body > .about-header {
+    width: 100%;
+    position: relative;
+    top: 100px;
+  }
+
+  body > .about-header > h1 {
+    font-size: 5rem;
+  }
+
+  body > p{
+    position: relative;
+    top: 100px;
+  }
+
+  body > main {
+    position: relative;
+    top: 100px;
+    padding-bottom: 100px;
+  }
+
+
+  .author {
+    position: fixed;
+    bottom: 0;
+  }
+
+.navbarr {
+  width: 100vw;
+}
+
+.navbar-toggler {
+  background-color: transparent;
+  border: none;
+}
+
+.navbar-toggler .toggler-icon {
+width: 30px;
+height: 2px;
+background-color: #fff;
+display: block;
+margin: 5px 0;
+position: relative;
+-webkit-transition: all 0.3s ease-out 0s;
+-moz-transition: all 0.3s ease-out 0s;
+-ms-transition: all 0.3s ease-out 0s;
+-o-transition: all 0.3s ease-out 0s;
+transition: all 0.3s ease-out 0s;
+}
+
+
+.nav-links {
+  letter-spacing: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 50%;
+  padding: 0;
+  color: white;
+  font-family: inherit;
+}
+
+.nav-links li a,
+.logo a {
+  color: white;
+}
+
+button a {
+  background-color: transparent;
+}
+
+.start {
+  padding: 10px 5px;
+  border-radius: 5px;
+}
+</style>
+
+
+<script>
+function toggleNavBar()
+{
+    var nav_bar = document.getElementById("nav-links-toggled");
+    if (nav_bar.style.display === "flex") {
+        nav_bar.style.display = "none";
+    } else {
+        nav_bar.style.display = "flex";
+    }
+}
+</script>
 
   <header class="about-header">
     <h1>🕹️ About Us 🕹️ </h1>

diff --git a/pages/howtoplay.html b/pages/howtoplay.html
@@ -34,13 +34,30 @@
         display: none;
       }
     }
+
+    .navbar-toggler {
+        background-color: transparent;
+        border: none;
+    }
+
+.navbar-toggler .toggler-icon {
+  width: 30px;
+  height: 2px;
+  background-color: #fff;
+  display: block;
+  margin: 5px 0;
+  position: relative;
+  -webkit-transition: all 0.3s ease-out 0s;
+  -moz-transition: all 0.3s ease-out 0s;
+  -ms-transition: all 0.3s ease-out 0s;
+  -o-transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out 0s;
+}
 </style>
 
 <body>
     <div class="center">
-        <a href="../index.html">
-          <img src="../assets/images/Home.jpeg" style="position: absolute; top: 55px; left: 5px; height: 100px; width: 100px; margin: 0;">
-        </a> 
+
     <div class="circle-container">
         <div class="circle"></div>
         <div class="circle"></div>
@@ -123,18 +140,32 @@
             <div class="logo">
                 <a href="../index.html">Dots & Boxes ⚄</a>
             </div>
-            <ul class="nav-links">
+
+            <ul class="nav-links" id="nav-links-toggled">
                 <li><a href="../index.html">Home</a></li>
                 <li><a href="../pages/about.html">About Us</a></li>
                 <li><a href="../pages/FAQs.html">FAQs</a></li>
                 <li><a href="../pages/contributors.html">Contributors</a></li>
                 <button class="start"><a href="../pages/game.html">Let's Go</a></button>
             </ul>
-            <div class="hamburger">
-                <i class="fas fa-bars"></i>
-            </div>
+            <button class="navbar-toggler" id="navbar-toggler" type="button" onclick="toggleNavBar()">
+                <span class="toggler-icon"></span>
+                <span class="toggler-icon"></span>
+                <span class="toggler-icon"></span>
+              </button>
         </nav>
     </div>
+    <script>
+        function toggleNavBar()
+        {
+            var nav_bar = document.getElementById("nav-links-toggled");
+            if (nav_bar.style.display === "flex") {
+                nav_bar.style.display = "none";
+            } else {
+                nav_bar.style.display = "flex";
+            }
+        }
+    </script>
     <div class="instructions-container">
         <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1>
         <h1 style="font-size: 39px;">How to Play ?</h1>

diff --git a/styles/mainstyle.css b/styles/mainstyle.css
@@ -923,6 +923,12 @@ button a {
 	margin-right: 10px;
 }
 
+@media screen and (min-width: 905px) {
+	.navbarr .nav-links {
+		display: flex	!important;
+  }
+}
+
 @media screen and (max-width: 905px) {
   .hamburger {
     display: inline;
@@ -943,6 +949,19 @@ button a {
     align-items: center;
   }
 
+  .navbarr .nav-links {
+	display: none;
+  }
+
+  .navbar-toggler {
+	display: inline	!important;
+  }
+
+}
+
+
+.navbar-toggler {
+	display: none;
 }