From ec50d4e6ad11d4bf672447d317b961c8ea2012c1 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Sat, 15 May 2021 10:44:54 +0300
Subject: [PATCH] created and styled realtors

---
 src/commons/realtors.jsx | 28 +++++++++++++++++++++++++++-
 src/sass/_realtors.scss  | 26 ++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/commons/realtors.jsx b/src/commons/realtors.jsx
index ed3551e..237344d 100644
--- a/src/commons/realtors.jsx
+++ b/src/commons/realtors.jsx
@@ -1,3 +1,29 @@
+import realtor1 from "./img/realtor-1.jpeg";
+import realtor2 from "./img/realtor-2.jpeg";
+import realtor3 from "./img/realtor-3.jpeg";
+
 export default function Realtors() {
-  return <div className="realtors">Top 3 realtors</div>;
+  return (
+    <div className="realtors">
+      <h3 className="heading-3">Top 3 realtors</h3>
+      <div className="realtors__list">
+        <img src={realtor1} alt="Realtor 1" className="realtors__img" />
+        <div className="realtors__details">
+          <h4 className="heading-4 heading-4--light">Erik Feinman</h4>
+          <p className="realtors__sold">245 houses sold</p>
+        </div>
+
+        <img src={realtor2} alt="Realtor 2" className="realtors__img" />
+        <div className="realtors__details">
+          <h4 className="heading-4 heading-4--light">Kim Brown</h4>
+          <p className="realtors__sold">212 houses sold</p>
+        </div>
+        <img src={realtor3} alt="Realtor 2" className="realtors__img" />
+        <div className="realtors__details">
+          <h4 className="heading-4 heading-4--light">Toby Ramsey</h4>
+          <p className="realtors__sold">198 houses sold</p>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/sass/_realtors.scss b/src/sass/_realtors.scss
index 480c4b4..b35ff54 100644
--- a/src/sass/_realtors.scss
+++ b/src/sass/_realtors.scss
@@ -1,4 +1,30 @@
 .realtors {
   background-color: $color-secondary;
   grid-column: col-start 7 / ful-end;
+  padding: 3rem;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  row-gap: 2rem;
+  justify-items: center;
+
+  &__list {
+    display: grid;
+    grid-template-columns: min-content max-content;
+    column-gap: 2rem;
+    row-gap: 5vh;
+    align-items: center;
+  }
+
+  &__img {
+    width: 7rem;
+    border-radius: 50%;
+    display: block;
+  }
+
+  &__sold {
+    text-transform: uppercase;
+    color: $color-grey-light-2;
+    margin-top: -3px;
+  }
 }