Merge pull request #87 from mdtausifiqbal/mdtausifiqbal

fix alignment of social icons
gdscsmit · Oct 20, 2023 · b53acb4 · b53acb4
2 parents fc39bae + a075b12
commit b53acb4
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
@@ -14,10 +14,21 @@ const Component = styled("div")`
   line-height: 100px;
   border-radius: 100px;
   line-height: 100px;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 30px;
   overflow: hidden;
   transition: all 0.3s ease-out;
+  & > span {
+    display: none;
+  }
+  &:hover > svg {
+    display: none;
+  }
+  &:hover > span {
+    display: inline;
+  }
   &:hover {
     width: 180px;
     display: flex;
@@ -60,13 +71,13 @@ const Footer = () => {
       </div>
 
       <div className="text-center" style={{ display: "flex", gap: "20px", position: "absolute" }}>
-        <Instagram className="text-center"
+        <Instagram
           onClick={() => {
             window.location = "https://www.instagram.com/gdscsmit/";
           }}
         >
           <BsInstagram
-            style={{ color: "#d62976 ", marginBottom: "55px" }}
+            style={{ color: "#d62976" }}
           ></BsInstagram>
           <span className="text-center" style={{ color: "white" }}>Instagram</span>
         </Instagram>
@@ -78,7 +89,7 @@ const Footer = () => {
           }}
         >
           <FaGithub className="text-center"
-            style={{ color: "black", marginBottom: "55px" }}
+            style={{ color: "black" }}
           ></FaGithub>
           <span className="text-center" style={{ color: "white" }}>GitHub</span>
         </Github>
@@ -90,7 +101,7 @@ const Footer = () => {
           }}
         >
           <FaLinkedin className="text-center"
-            style={{ color: "#0A66C2", marginBottom: "55px" }}
+            style={{ color: "#0A66C2" }}
           ></FaLinkedin>
           <span className="text-center" style={{ color: "white" }}>LinkedIn</span>
         </LinkedIn>