Social media icon

Virtual4087 · Oct 21, 2023 · 7d183c7 · 7d183c7
1 parent 5e79bb7
commit 7d183c7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 25 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -626,7 +626,7 @@ nav .nav_buttons {
 .upperHeading {
   display: flex;
   width: 100%;
-  justify-content: space-between;
+  justify-content: center;
 }
 
 .qLine {
@@ -724,7 +724,9 @@ nav .nav_buttons {
 .copyright-disclaimer {
   font-size: 14px;
   color: rgba(128, 128, 128, 0.643);
-  padding-top: 0.5rem;
+  padding-top: 1rem;
+  text-align: center;
+  margin: auto;
 }
 
 .footer .lower_part {
@@ -736,6 +738,7 @@ nav .nav_buttons {
   width: 90%;
   height: 1px;
   background-color: grey;
+  text-align: center;
 }
 
 .lower_part {
@@ -748,8 +751,9 @@ nav .nav_buttons {
 .social_medias {
   display: flex;
   justify-content: center;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 20px;
+  margin: auto;
 }
 
 .lower_part .rights_reserved {

diff --git a/index.html b/index.html
@@ -211,9 +211,7 @@
             <h2 class="quick-links">Quick Links</h2>
             <!-- <div class="qLine"></div> -->
           </div>
-          <div class="socialmediaTextWrapper">
-            <h2 class="socialmediaTxt">Social</h2>
-          </div>
+
         </div>
 
         <div class="links">
@@ -238,27 +236,32 @@ <h2 class="socialmediaTxt">Social</h2>
             <a class="footerLinks" href="#">CAREERS</a>
           </div>
 
-          <div class="social_medias">
-            <div class="imgWrapper">
-              <i class="fa-brands fa-x-twitter"></i>
-              <a href="#" class="socialmediaName">TWITTER</a>
-            </div>
-            <div class="imgWrapper">
-              <i class="fa-brands fa-facebook"></i>
-              <a href="#" class="socialmediaName">FACEBOOK</a>
-            </div>
-            <div class="imgWrapper">
-              <i class="fa-brands fa-instagram"></i>
-              <a href="#" class="socialmediaName">INSTAGRAM</a>
-            </div>
-            <div class="imgWrapper">
-              <i class="fa-brands fa-youtube"></i>
-              <a href="#" class="socialmediaName">YOUTUBE</a>
-            </div>
-          </div>
+
         </div>
       </div>
       <div class="footer-line"></div>
+      <div class="social_medias">
+        <div class="imgWrapper">
+          <i class="fa-brands fa-x-twitter"></i>
+          <a href="#" class="socialmediaName">TWITTER</a>
+        </div>
+        <div class="imgWrapper">
+          <i class="fa-brands fa-facebook"></i>
+          <a href="#" class="socialmediaName">FACEBOOK</a>
+        </div>
+        <div class="imgWrapper">
+          <i class="fa-brands fa-instagram"></i>
+          <a href="#" class="socialmediaName">INSTAGRAM</a>
+        </div>
+        <div class="imgWrapper">
+          <i class="fa-brands fa-youtube"></i>
+          <a href="#" class="socialmediaName">YOUTUBE</a>
+        </div>
+        <div class="imgWrapper">
+          <i class="fa-brands fa-linkedin"></i>
+          <a href="#" class="socialmediaName">LINKEDIN</a>
+        </div>
+      </div>
       <div class="lower_part">
         <div class="copyright-disclaimer">
           ©2023 - Tree2Hope All rights reserved