footer social media icons added

ipekcan · Sep 18, 2024 · 8d20adc · 8d20adc
1 parent b5fa6f3
commit 8d20adc
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -560,6 +560,7 @@ Header background, team card background
 }
 .footer {
   /* Footer */
+
 
   width: 1440px;
   height: 312px;
@@ -658,6 +659,28 @@ Header background, team card background
   /* CLOUD */
   color: #f4f4fd;
 }
+.footer-social-media {
+  position: relative;
+  left:240px;
+  top: -20px;
+  color:#ffffff;
+}
+.footer-social-media .social-icon-footer{
+  position: relative;
+  left:270px;
+  margin-top:8px;
+  margin-inline: 12px;
+
+  width: 20px;
+  height: 20px;
+  fill:#ffffff;
+}
+.footer-social-media .social-icon-footer:hover {
+  fill: #31D0AA;
+
+  ;
+}
+
 .roboto-thin {
   font-family: "Roboto", sans-serif;
   font-weight: 100;

diff --git a/index.html b/index.html
@@ -427,6 +427,30 @@ <h5 class="footer-logo">
           digital marketing & growth solutions.
         </p>
       </div>
+      <div class="footer-social-media">
+        Social Media
+        <br/>
+        <a href="#">
+          <svg class="social-icon-footer">
+            <use href="/images/social-media.svg#icon-instagram"/>
+          </svg>
+        </a>
+        <a href="#"></a>
+          <svg class="social-icon-footer">
+            <use href="/images/social-media.svg#icon-twitter"/>
+          </svg>
+        </a>
+        <a href="#"></a>
+          <svg class="social-icon-footer">
+            <use href="/images/social-media.svg#icon-facebook"/>
+          </svg>
+        </a>
+        <a href="#"></a>
+          <svg class="social-icon-footer">
+            <use href="/images/social-media.svg#icon-linkedin2"/>
+          </svg>
+        </a>
+      </div>
     </footer>
   </body>
 </html>