Merge pull request #4 from ReactSSA/social-links

Add Social links in footer area

Author: diegocoxta

assets/facebook.svg

@@ -18,15 +18,39 @@ body {
     margin-bottom: 30px;
 }
 
-.github-link {
-    display: block;
+.social {
+  align-items: center;
+  display: flex;
+  justify-content: space-around;
+  margin: 2em auto;
+  height: 20px;
+  width: auto;
+}
+
+.social a {
+  color: white;
+  flex: 0 1 auto;
+  height: auto;
+  margin: 0 1em;
+  padding-left: 24px;
+  text-decoration: none;
+}
+
+.social a:hover {
+  text-decoration: underline;
+}
+
+.github {
     background: url(github.svg) no-repeat;
     background-size: contain;
-    width: 30px;
-    height: 30px;
-    overflow: hidden;
-    line-height: 200px;
-    margin-top: 20px;
+}
+.twitter {
+    background: url(twitter.svg) no-repeat;
+    background-size: contain;
+}
+.facebook {
+    background: url(facebook.svg) no-repeat;
+    background-size: contain;
 }
 
 #meetup-notification-form {
@@ -52,4 +76,4 @@ body {
         width: calc(100% - 20px);
         font-size: 15px;
     }
-}
+}

assets/style.css

@@ -21,12 +21,16 @@ <h2>Quer ser avisado sobre os próximos encontros?</h2>
             <input type="email" id="email" placeholder="Digite seu email e pressione enter" />
         </form>
 
-        <a href="https://github.com/ReactSSA" class="github-link">ReactSSA</a>
+        <div class="social">
+          <a rel="external" target="_blank" href="https://github.com/ReactSSA" class="github">ReactSSA</a>
+          <a rel="external" target="_blank" href="https://twitter.com/ReactSSA" class="twitter">@ReactSSA</a>
+          <a rel="external" target="_blank" href="https://facebook.com/reactssa" class="facebook">React Salvador</a>
+        </div>
     </div>
 
     <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-database.js"></script>
-    
+
     <script>
         var config = {
             apiKey: "AIzaSyDthLRn1-FtkR9duSYmGO5vcxv27Mw6zfY",
@@ -42,7 +46,7 @@ <h2>Quer ser avisado sobre os próximos encontros?</h2>
 
         document.getElementById("meetup-notification-form").addEventListener("submit", function(e) {
             e.preventDefault();
-            
+
             var emailInputEl = document.getElementById("email");
             emailsStore.push({
                 email: emailInputEl.value
@@ -57,4 +61,4 @@ <h2>Quer ser avisado sobre os próximos encontros?</h2>
     </script>
 </body>
 
-</html>
+</html>