styled footer, social icons need attn

css/index.css

@@ -282,7 +282,42 @@ section.testimonials .testimonial-item img {
 }
 
 /* social bar */
+.contact-section .social {
+  margin-top: 4rem;
+  text-align: center;
+}
+
+.contact-section .social a {
+  height: 3rem;
+  width: 3rem;
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.3);
+  border-radius: 100%;
+  line-height: 3rem;
+}
+
+.contact-section .social a:hover {
+  color: rgba(255, 255, 255, 0.5);
+}
 
+.contact-section .social a:active {
+  color: #fff;
+}
 
 /* footer styling */
 
+.bg-black {
+  background-color: #000000 !important;
+}
+
+footer {
+  padding: 25px 0;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.3);
+  background-color: var(--dark-color);
+}
+
+footer p {
+  font-size: 12px;
+  margin: 0;
+}

index.html

@@ -182,21 +182,22 @@ <h4 class="text-uppercase m-0">PHONE</h4>
 
 <!-- social bar -->
       </div>
-      <div class="social">
-        <a><i></i></a>
-        <a><i></i></a>
-        <a><i></i></a>
+      <div class="social d-flex">
+        <a class="mx-2" href="#!"><i class="fab-fa-twitter"></i></a>
+        <a class="mx-2" href="#!"><i class="fab-fa-facebook-f"></i></a>
+        <a class="mx-2" href="#!"><i class="fab-fa-github"></i></a>
       </div>
     </div>
   </section>
 
   <!-- footer -->
   <footer>
     <div class="container">
-
+      <p>&copy; 2023 Alexandra Asanache</p>
     </div>
   </footer>
-  <!-- Optional JavaScript -->
+
+  <!-- JavaScript -->
   <!-- Popper.js, then Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>