Add taxi view/route/css close #18

public/style.css

@@ -20,15 +20,6 @@ body {
   flex-direction: column;
 }
 
-/* Back Button */
-.back-button {
-  height: 10%;
-  margin: 0 0 5% 5%;
-  display: inline-block;
-  position: absolute;
-  margin-top: 155%;
-}
-
 /* Header */
 
 .header {
@@ -75,6 +66,46 @@ body {
   font-family: 'Roboto Condensed', sans-serif;
 }
 
+/* Back Button */
+.back-button {
+  height: 7%;
+  margin: 0 0 5% 5%;
+  display: inline-block;
+  position: absolute;
+  margin-top: 155%;
+}
+
+.arrow {
+  height: 100%;
+  margin-top: 40%;
+}
+
+/* Arrived Button */
+
+.arrived-button {
+  background-color: white;
+  height: 7%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 3%;
+  text-decoration: none;
+  box-shadow: 0 0 1px 2px #848e9e;
+}
+
+.arrived-button:hover {
+  box-shadow: inset 0 0 1px 2px #848e9e;
+}
+
+.arrived-text {
+  font-family: 'Roboto Condensed', sans-serif;
+  color: #6E9FEF;
+  font-weight: bolder;
+  font-size: 1.75rem;
+  padding: 0em 1em;
+  line-height: 2em;
+}
+
 /* Splash Page */
 
 .intro-text {
@@ -158,36 +189,19 @@ body {
 
 /* Car Route */
 
-#mapid {
-  margin-top: 3%;
-  height: 70%;
-  width: 100%;
-}
-
-.splash-button-car {
+.map-container {
+  width: 85%;
+  height: 65%;
+  margin-top: 10%;
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
   background-color: white;
-  height: 7%;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 4%;
-}
-
-.arrived-button {
-  text-decoration: none;
-  color: #6E9FEF;
-  font-weight: bolder;
-  font-size: 1.5rem;
-  padding: 0em 1em;
-  line-height: 2em;
+  box-shadow: inset 0 0 1px 2px #848e9e;
 }
 
-.back-button {
-  color: white;
-  float: left;
-  font-size: 4rem;
-  margin-left: 1rem;
-  left: 0%;
-  bottom: 4%;
-  position: absolute;
+#mapid {
+  height: 98%;
+  width: 98%;
 }

src/routes/home.js

@@ -3,7 +3,6 @@ const data = {
   tagLine: 'Park & Sleep',
 };
 
-
 module.exports = {
   method: 'GET',
   path: '/',

src/routes/index.js

@@ -1,11 +1,13 @@
 const homeHandler = require('./home.js');
 const staticHandler = require('./static.js');
 const taxiHandler = require('./taxi.js');
-const carHandler = require('./carPage.js');
+const carHandler = require('./car.js');
+const busHandler = require('./bus.js');
 
 module.exports = [
   homeHandler,
   staticHandler,
   taxiHandler,
   carHandler,
+  busHandler,
 ];

src/routes/taxi.js

@@ -3,7 +3,6 @@ const data = {
   tagLine: '6098/8 Nazareth',
 };
 
-
 module.exports = {
   method: 'GET',
   path: '/taxi',

src/views/splash.hbs

@@ -1,13 +1,18 @@
 <div class="app-shell">
+
   {{> header}}
   <p class="intro-text">Welcome!<br />How will you be arriving?</p>
 
   <div class="button-container">
-    <a href="/car"><div class="splash-button"><img class="transport-type" src="/images/car-4-128.jpg" alt="arriving by car"></div></a>
-
-    <!-- when we make the bus route page we need to add the a tag here -->
-    <div class="splash-button"><img class="transport-type" src="/images/bus-128.jpg" alt="arriving by bus"></div>
 
-    <!-- when we add the taxi route we need to add the a tag here -->
-    <div class="splash-button btn-3"><img class="transport-type" src="/images/taxi-128.jpg" alt="arriving by taxi"></div>
+    <a href="/car" class="splash-button">
+      <img class="transport-type" src="/images/car-4-128.jpg" alt="arriving by car">
+    </a>
+    <a href="/bus" class="splash-button">
+      <img class="transport-type" src="/images/bus-128.jpg" alt="arriving by bus">
+    </a>
+    <a href="/taxi" class="splash-button btn-3">
+      <img class="transport-type" src="/images/taxi-128.jpg" alt="arriving by taxi">
+    </a>
+
   </div>

src/views/taxi.hbs

@@ -1,9 +1,14 @@
 <div class="app-shell">
+
   {{> header}}
   <p class="intro-text">Estimated cost from your<br />location is:</p>
   <div class="price">$7.50 USD</div>
   <div class="gett-button">
     <img class="taxi-img" src="images/taxi-128.jpg" alt="">
   </div>
-  <img class="back-button" src="/images/arrow-121-128.png" alt="click to go back">
+
+  <a href="/" class="back-button">
+    <img class="arrow" src="/images/arrow-121-128.png" alt="click to go back">
+  </a>
+
 </div>