Merge pull request #1054 from codeRIT/bh-1046

Added "view gallery" button

Author: peterkos

index.html

@@ -131,12 +131,16 @@ <h2>What is a Hackathon?</h2>
                 <p>Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!</p>
                 <p>Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.</p>
             </div>
-            <a href="https://mlh.io/" id="mlh" target="_blank" rel="noopener noreferrer">
-                <div>
+            <div id="hackathon-buttons">
+                <a href="https://mlh.io/" id="mlh" target="_blank" rel="noopener noreferrer">
                     <i class="fas fa-arrow-right"></i>
                     <p>Visit Major League Hacking (MLH)</p>
-                </div>
-            </a>
+                </a>
+                <a href="javascript:void(0);" id="gallery" rel="noopener noreferrer">
+                    <i class="fas fa-tools"></i>
+                    <p>Gallery (coming soon!)</p>
+                </a>
+            </div>
         </div>
     </section>
     <section id="schedule">

sass/main.scss

@@ -357,29 +357,34 @@ nav {
         }
     }
 
-    #mlh {
-        @include button;
-        @include button-effect($light-blue);
-        background-color: $light-blue;
-        margin: 0 auto;
-        padding: 30px;
-        border-radius: 20px;
+    #hackathon-buttons {
+        display: flex;
+        flex-direction: column;
+        margin: 0px auto;
+        align-items: flex-start;
 
-        i, p {
-            display: inline;
-        }
+        #mlh, #gallery {
+            @include button;
+            @include button-effect($light-blue);
+            display: flex;
+            align-items: center;
+            background-color: $light-blue;
+            margin: 24px 0px;
+            padding: 30px;
+            border-radius: $img-border-radius;
+            width: 100%;
 
-        p {
-            font-size: 1.2em;
-            font-weight: $font-medium;
-        }
+            p {
+                margin: 0px;
+                font-size: 1.2em;
+                font-weight: $font-medium;
+            }
 
-        // TODO: Needs better alignment.
-        i.fa-arrow-right {
-            font-size: 1.6em;
-            color: $red;
-            vertical-align: text-bottom;
-            padding-right: 10px;
+            i.fa-arrow-right, i.fa-tools {
+                font-size: 1.6em;
+                color: $red;
+                padding-right: 10px;
+            }
         }
     }
 }