Merge pull request #59 from FAC29A/layout-footer

My last pull request before sending my laptop repair

index.html

@@ -127,7 +127,7 @@ <h2 class="center">Associates</h2>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-1.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
@@ -151,14 +151,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-2.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
 
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-blush.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -175,14 +175,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-3.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
 
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-violet.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -199,7 +199,7 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-4.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
@@ -223,14 +223,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-5.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
 
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-blush.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -247,14 +247,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-6.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
 
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-violet.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -318,16 +318,18 @@ <h2>Contact</h2>
       </div>
     </section>
   </div>
- 
+
   </main>
 
-  <footer class="center width-xl stack-lg">
+  <footer class="center row width-xl stack-lg">
+
+
     <h2>footer title </h2>
 
-    <div class="social-media-group center width-md row justify-center">
-      <p> instagram </p>
-      <p> facebook </p>
-      <p> tiktok </p>
+    <div class="social-media-group center width-xl row justify-center">
+      <img src="/images/facebook.png" heigh="50" width="50">
+      <img src="/images/instagram.png" heigh="50" width="50"> 
+      <img src="/images/tiktok.png" heigh="40" width="40"> 
     </div>
 
     <p>More footer text</p>

style.css

@@ -33,8 +33,10 @@ html {font-size: 10px;}
   margin-right: auto; 
 }
 
+
 .pad2 {padding: 2rem;}
 .pad3 {padding: 3rem;}
+.pad0Top {padding-top: :0;}
 .pad5Top {padding-top: 5rem;}
 
 .width-sm {max-width: 20rem;}
@@ -339,4 +341,14 @@ input[type="checkbox"] {
 .contact-text {text-align: center;}
 
 /* footer css */
-footer {text-align: center;}
+#black-background {
+  height: 5rem; 
+  width:100%; 
+  background-color: var(--black);
+}
+
+footer {
+  text-align: center;
+  padding: 2rem; 
+  height: 30rem ; 
+  }