add second page

landing_page/src/javascript/index.js

@@ -1,4 +1 @@
-import '../sass/styles.scss';
-
-console.log('Webpack Boilerplate');
-
+import '../sass/styles.scss';

landing_page/src/sass/_choose-map.scss

@@ -0,0 +1,62 @@
+body.choose-map{
+
+  .map-item{
+    cursor: pointer;
+    margin: 1rem 0.5rem;
+    padding: 1rem;
+    text-align: center;
+    border: 3px transparent solid;
+
+    &.active{
+      border-color: #FFFFFF;
+    }
+
+    p{
+      margin: 0;
+    }
+  }
+
+  #wa-link{
+    text-decoration: underline;
+  }
+
+  .copy-btn{
+    font-family: "Karmatic Arcade";
+    font-size: 30px;
+    border: 4px solid #ffffff;
+    width: auto;
+    box-shadow: 4px 4px white;
+    padding: 1rem;
+    background: #000000;
+    color: white;
+    margin-right: 10px;
+    &:focus{
+      outline: none;
+    }
+
+    small{
+      font-size: 16px;
+    }
+  }
+
+  .start-area{
+    img{
+      min-height: 70px;
+    }
+
+    #start-btn{
+      background-color: transparent;
+      border: none;
+      color: #ffffff;
+      border-bottom: 8px solid white;
+      animation: blinker 1s alternate infinite;
+      font-size: 50px;
+    }
+
+    @keyframes blinker {
+      50% {
+        opacity: 0;
+      }
+    }
+  }
+}

landing_page/src/sass/styles.scss

@@ -1,5 +1,6 @@
 @import "custom";
 @import "~bootstrap/scss/bootstrap";
+@import "_choose-map";
 
 @font-face {
     font-family: OpenSans;
@@ -279,3 +280,6 @@ img{
     }
 }
 
+.pixel-title{
+    font-family: "Karmatic Arcade" !important;
+}