Added the contact page.

app/client/app.css

@@ -1285,4 +1285,36 @@ nav form input[type="image"]{
     background: #50a3a2;
     background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
     background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+}
+
+.contact-name {
+    margin-left: 30px;
+    margin-top: 35px;
+    float: left;
+    height: 90px;
+    margin-bottom: 0;
+}
+
+.contact-img {
+    float: left;
+}
+
+.contact-ul {
+    clear: left;
+}
+
+.contact-option {
+    font-size: 22px;
+}
+
+#contact-container {
+    margin-top: 30px;
+    margin-bottom: 200px;
+}
+
+.contact-icon {
+    margin-right: 10px;
+    width: 28px;
+    height: 28px;
+    font-size: 28px !important;
 }

app/client/routes.js

@@ -44,6 +44,10 @@ Router.route("/terms", {
     template: "terms"
 });
 
+Router.route("/contact", {
+    template: "contact"
+});
+
 Router.route("/api", {
     template: "api"
 });

app/client/templates/contact.html

@@ -0,0 +1,48 @@
+<template name="contact">
+    {{> alerts}}
+    <div class="landing">
+        {{> header}}
+        <div class="row" id="contact-container">
+            <div class="about col-md-8 col-md-offset-2 contact-box" itemscope itemtype="https://schema.org/Person">
+                <!-- Akira -->
+                <img height="100px" width="100px" class="img-circle contact-img" src="https://avatars0.githubusercontent.com/u/11958359?v=3&s=460" itemprop="image"/>
+                <h2 class="contact-name" itemprop="name">Akira Laine</h2>
+                <ul class="contact-ul">
+                    <li class="contact-option place-contact"><i class="fa fa-2x fa-map-marker contact-icon"></i> <span itemprop="address">Noumea, New Caledonia</span></li>
+                    <li class="contact-option email-contact"><i class="fa fa-2x fa-envelope contact-icon"></i> <span itemprop="email">Akira_Laine@outlook.com</span></li>
+                </ul>
+            </div>
+            <hr class="col-md-8 col-md-offset-2"/>
+            <div class="about col-md-8 col-md-offset-2 contact-box" itemscope itemtype="https://schema.org/Person">
+                <!-- Kris -->
+                <img height="100px" width="100px" class="img-circle contact-img" src="https://avatars2.githubusercontent.com/u/9784561?v=3&s=460" itemprop="image"/>
+                <h2 class="contact-name" itemprop="name">Kristian Vos</h2>
+                <ul class="contact-ul">
+                    <li class="contact-option place-contact"><i class="fa fa-2x fa-map-marker contact-icon"></i> <span itemprop="address">Haarlem, The Netherlands</span></li>
+                    <li class="contact-option email-contact"><i class="fa fa-2x fa-envelope contact-icon"></i> <span itemprop="email">KrisVos130@gmail.com</span></li>
+                    <li class="contact-option twitter-contact"><i class="fa fa-2x fa-twitter contact-icon"></i> <a href="https://twitter.com/KrisVos130">KrisVos130</a></li>
+                    <li class="contact-option facebook-contact"><i class="fa fa-2x fa-facebook contact-icon"></i> <a href="https://facebook.com/KrisVos.YT">KrisVos.YT</a></li>
+                </ul>
+            </div>
+            <hr class="col-md-8 col-md-offset-2"/>
+            <div class="about col-md-8 col-md-offset-2 contact-box" itemscope itemtype="https://schema.org/Person">
+                <!-- Johand -->
+                <img height="100px" width="100px" class="img-circle contact-img" src="https://avatars2.githubusercontent.com/u/6952369?v=3&s=460" itemprop="image"/>
+                <h2 class="contact-name" itemprop="name">Johannes Andersen</h2>
+                <ul class="contact-ul">
+                    <li class="contact-option place-contact"><i class="fa fa-2x fa-map-marker contact-icon"></i> <span itemprop="address">Fredrikstad, Norway</span></li>
+                    <li class="contact-option email-contact"><i class="fa fa-2x fa-envelope contact-icon"></i> <span itemprop="email">Johand@johand.me</span></li>
+                </ul>
+            </div>
+            <hr class="col-md-8 col-md-offset-2"/>
+            <div class="about col-md-8 col-md-offset-2 contact-box" itemscope itemtype="https://schema.org/Person">
+                <!-- Wesley -->
+                <img height="100px" width="100px" class="img-circle contact-img" src="https://avatars0.githubusercontent.com/u/1158013?v=3&s=460" itemprop="image"/>
+                <h2 class="contact-name" itemprop="name">Wesley McCann</h2>
+                <ul class="contact-ul">
+                    <li class="contact-option place-contact"><i class="fa fa-2x fa-map-marker contact-icon"></i> <span itemprop="address">USA</span></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>

app/client/templates/footer.html

@@ -4,7 +4,8 @@
         <a href="/api" class="footerButtons" id="apiButton">API |</a>
         <a href="/terms" class="footerButtons" id="termsButton">Terms |</a>
         <a href="/privacy" class="footerButtons" id="privacyButton">Privacy |</a>
-        <a href="/about" class="footerButtons" id="aboutButton">About</a>
+        <a href="/about" class="footerButtons" id="aboutButton">About |</a>
+        <a href="/contact" class="footerButtons" id="contactButton">Contact</a>
         <p><a href="https://github.com/AkiraLaine/music-app" target="_blank"><i class="fa fa-github"></i></a></p>
     </footer>
 </template>