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
Top 3 realtors
; + return ( +
+

Top 3 realtors

+
+ Realtor 1 +
+

Erik Feinman

+

245 houses sold

+
+ + Realtor 2 +
+

Kim Brown

+

212 houses sold

+
+ Realtor 2 +
+

Toby Ramsey

+

198 houses sold

+
+
+
+ ); } 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; + } }