Merge pull request #6 from bineetNaidu/issue#3

updated footer

Author: MeghalBisht

client/public/index.html

@@ -25,6 +25,10 @@
     -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous" />
+
 
     <title>Gamergram</title>
   </head>

client/src/Components/Screens/Footer.js

@@ -1,29 +1,27 @@
 import React from 'react'
+import "../../Styles/Footer.css"
 
 function Footer() {
     return (
-        <footer className="page-footer footer">
-            <div className="container">
-                <div className="row">
-                    <div className="col l6 s12">
-                        <h5 className="gamergram">Gamergram</h5>
-                        <p>A web application to publish your thoughts, connect with friends, share pictures, comment, like and much more!</p>
-                        <p>Developed by Meghal Bisht using the MERN stack.</p>
-                    </div>
-                    <div className="col l4 offset-l2 s12">
-                        <h5>Connect with me</h5>
-                        <ul>
-                            <li><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/meghal-bisht-777451177/">LinkedIn</a></li>
-                            <li><a rel="noopener noreferrer" target="_blank" href="https://github.com/MeghalBisht">GitHub</a></li>
-                            <li><a rel="noopener noreferrer" target="_blank" href="https://resume-meghal.herokuapp.com/">Website</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div className="footer-copyright">
-                <div className="container">
-                    © 2020 <span>Gamergram</span>
+        <footer className="footer">
+            <div className="container text-center">
+                <img src="../../gamergram.ico" className="d-block mb-4 mx-auto" width="100px " />    
+            
+            <p className="text-secondary col md 9 mx-auto">A web application to publish your thoughts, connect with friends, share pictures, comment, like and much more!</p>
+                <p className="text-secondary col md 9 mx-auto">Developed by Meghal Bisht using the MERN stack.</p>
+            <hr className="my-5" />
+            <div className="mb-3">
+                <a rel="noopener noreferrer" target="_blank" className="ctx__icons"  href="https://www.linkedin.com/in/meghal-bisht-777451177/">
+                    <i className="fab fa-linkedin"></i>
+                </a>
+                <a rel="noopener noreferrer" target="_blank"  className="ctx__icons" href="https://github.com/MeghalBisht">
+                    <i className="fab fa-github"></i>
+                </a>
+                <a rel="noopener noreferrer" target="_blank" className="ctx__icons"  href="https://resume-meghal.herokuapp.com/">
+                    <i className="fas fa-code"></i>
+                </a>
                 </div>
+                <p className="text-secondary">Copyright 2020. All rights reserved!</p>
             </div>
         </footer>
     )

client/src/Styles/Footer.css

@@ -0,0 +1,24 @@
+.footer {
+  padding: 2rem 0;
+  background-color: #d6efc7;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.footer .ctx__icons {
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  margin: 15px 8px;
+}
+
+.footer .ctx__icons > .fab,
+.footer .ctx__icons > .fas {
+  font-size: 30px;
+}
+
+.my-5 {
+  margin: 2rem 0;
+}