Minor footer change

src/Components/Footer/Footer.css

@@ -28,13 +28,18 @@
   padding: 1rem;
 }
 
-.social{
+.socials{
-  margin-top: 1rem;
+  margin-top: 0.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.github{
+  padding-top: .5rem;
 }
 
 h4{
   font-size: 1.2rem;
-  padding-bottom: 0.7rem;
+  padding-bottom: 0.2rem;
 }
 
 p{

src/Components/Footer/Footer.js

@@ -14,22 +14,63 @@ const Footer = () => {
     <div className="footer">
       <div className="footer-container">
         <div className="left">
-          <div className="phone">
-            <h4>
-              <FaPhone
-                size={20}
-                style={{ color: "#fff", marginRight: "2rem" }}
-              />
-              (Not yet available)
-            </h4>
-          </div>
           <div className="email">
             <h4>
-              <FaMailBulk
+              <a href="mailto:[email protected]">
-                size={20}
+                <FaMailBulk
-                style={{ color: "#fff", marginRight: "2rem" }}
+                  size={25}
-              />
+                  style={{ color: "#fff", marginRight: "2rem" }}
-              info@fernandovideira.com
+                />
+                info@fernandovideira.com
+              </a>
+            </h4>
+          </div>
+          <div className="socials github">
+            <h4>
+              <a
+                href="https://github.com/FernandoJVideira"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaGithub
+                  size={25}
+                  style={{ color: "#fff", marginRight: "2rem" }}
+                  cursor={"pointer"}
+                />
+                @FernandoJVideira
+              </a>
+            </h4>
+          </div>
+          <div className="socials twitter">
+            <h4>
+              <a
+                href="https://twitter.com/fernandoj_02_"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaTwitter
+                  size={25}
+                  style={{ color: "#fff", marginRight: "2rem" }}
+                  cursor={"pointer"}
+                />
+                @fernandoj_02_
+              </a>
+            </h4>
+          </div>
+          <div className="socials linkedin">
+            <h4>
+              <a
+                href="https://www.linkedin.com/in/fernando-videira-info/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaLinkedin
+                  size={25}
+                  style={{ color: "#fff", marginRight: "2rem" }}
+                  cursor={"pointer"}
+                />
+                Fernando Videira
+              </a>
             </h4>
           </div>
         </div>
@@ -40,41 +81,6 @@ const Footer = () => {
             looking for some new projects and challenges and oportunities to
             learn new things about the programming world!
           </p>
-          <div className="social">
-            <a
-              href="https://github.com/FernandoJVideira"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaGithub
-                size={30}
-                style={{ color: "#fff", marginRight: "2rem" }}
-                cursor={"pointer"}
-              />
-            </a>
-            <a
-              href="https://twitter.com/fernandoj_02_"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaTwitter
-                size={30}
-                style={{ color: "#fff", marginRight: "2rem" }}
-                cursor={"pointer"}
-              />
-            </a>
-            <a
-              href="https://www.linkedin.com/in/fernando-videira-info/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaLinkedin
-                size={30}
-                style={{ color: "#fff", marginRight: "2rem" }}
-                cursor={"pointer"}
-              />
-            </a>
-          </div>
         </div>
       </div>
     </div>