help.php

@@ -26,7 +26,6 @@
       <p>I am working on a new version that will provide data for every
          station in the National Rail database.</p>
 
-      <!-- Footer -->
       <?php include './page-blocks/footer.php';?>
   </body>
-</html>
+</html>  

page-blocks/nav-menu.php

@@ -5,7 +5,6 @@ echo '<div id="menu-button" class="menu-button">';
 echo '<img onclick="openMenu()" src="/assets/icons/menu.png"></img>';
 echo '</div>';
 echo '<div id="menu" class="menu">';
-echo '<a href="/help.php" class="menuitem" onclick=closeMenu()">Help</a>';
-echo '<a href="/issue.php" class="menuitem" onclick=closeMenu()">Report Issue</a>"'
+echo '<button class="menuitem" onclick="openAboutPopup(),closeMenu()">Help</button>';
 echo '<img onclick="closeMenu()" class="popup-close" src="/assets/icons/close-circle.png"></img>';
 echo '</div>';

styles/style.css

@@ -36,6 +36,17 @@ body {
   cursor: pointer;
 }
 
+a {
+  display: float;
+  background-color: #3c78d8;
+  color: #f6f5f4;
+  padding: 7px;
+  border-radius: 5px;
+  text-decoration: none;
+  margin-bottom: 10px;
+  line-height: 3;
+}
+
 .actionbutton {
   display: inline-block;
   cursor: pointer;
@@ -84,6 +95,26 @@ body {
   background-color: #112b55;
 }
 
+.popup-info {
+  display: none;
+  position: absolute;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  top: 20px;
+  width: 80%;
+  background-color: rgba(41,106,163,0.9);
+  color: white;
+  border-radius: 50px;
+  padding: 30px;
+}
+
+.popup-close {
+  position: absolute;
+  right: 30px;
+  cursor: pointer;
+}
+
 footer {
   background-color: #7fa7e6;
   color: white;