Finishing Realtors Section

Author: coder-abdo

css/style.css

@@ -141,8 +141,28 @@ body {
       filter: brightness(70%); }
 
 .realtors {
-  background-color: royalblue;
-  grid-column: col-start 7 / full-end; }
+  background-color: #101d2c;
+  grid-column: col-start 7 / full-end;
+  padding: 3rem;
+  display: grid;
+  justify-content: center;
+  justify-content: center;
+  align-content: center;
+  grid-row-gap: 2rem; }
+  .realtors__list {
+    display: grid;
+    grid-template-columns: min-content max-content;
+    grid-column-gap: 2rem;
+    grid-row-gap: 5vh;
+    align-items: center; }
+  .realtors__img {
+    display: block;
+    width: 7rem;
+    border-radius: 50%; }
+  .realtors__sold {
+    text-transform: uppercase;
+    color: #aaa;
+    margin-top: -3px; }
 
 .features {
   grid-column: center-start / center-end;

index.html

@@ -29,7 +29,26 @@ <h1 class="heading-1">The Ultimate Personal Freedom</h1>
             </div>
         </header>
         <div class="realtors">
-            Top 3 Realtors 
+            <h3 class="heading-3">Top 3 Realtors</h3>
+            <div class="realtors__list">
+                <img src="images/realtor-1.jpeg" alt="Realtor 1" class="realtors__img">
+                <div class="realtors__details">
+                    <h4 class="heading-4 heading-4--light">Erik Fineman</h4>
+                    <p class="realtors__sold">245 houses sold</p>
+                </div>
+                
+                <img src="images/realtor-2.jpeg" alt="Realtor 2" class="realtors__img">
+                <div class="realtors__details">
+                    <h4 class="heading-4 heading-4--light">Kim Brown</h4>
+                    <p class="realtors__sold">212 houses sold</p>
+                </div>
+
+                <img src="images/realtor-3.jpeg" alt="Realtor 3" class="realtors__img">
+                <div class="realtors__details">
+                    <h4 class="heading-4 heading-4--light">Toby Ramsey</h4>
+                    <p class="realtors__sold">198 houses sold</p>
+                </div>
+            </div>
         </div>
         <section class="features">
             <div class="feature">

sass/_realtors.scss

@@ -1,4 +1,29 @@
 .realtors {
-    background-color: royalblue;
+    background-color: $color-secondary;
     grid-column: col-start 7 / full-end;
+    padding: 3rem;
+    display: grid;
+    justify-content: center;
+    justify-content: center;
+    align-content: center;
+    grid-row-gap: 2rem;
+    &__list {
+        display: grid;
+        grid-template-columns: min-content max-content;
+        grid-column-gap: 2rem;
+        grid-row-gap: 5vh;
+        align-items: center;
+    }
+
+    &__img {
+        display: block;
+        width: 7rem;
+        border-radius: 50%;
+    }
+    
+    &__sold {
+        text-transform: uppercase;
+        color: $color-grey-light-2;
+        margin-top: -3px;
+    }
 }