From 917f374122e148541d83dc8cd6db28ff72c8aa66 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Fri, 14 May 2021 10:11:32 +0300
Subject: [PATCH] created and styled homes section

---
 src/commons/features.jsx |  12 +--
 src/commons/homes.jsx    | 173 ++++++++++++++++++++++++++++++++++++++-
 src/sass/_homes.scss     |  80 +++++++++++++++++-
 3 files changed, 257 insertions(+), 8 deletions(-)

diff --git a/src/commons/features.jsx b/src/commons/features.jsx
index b5ac1ba..2dca447 100644
--- a/src/commons/features.jsx
+++ b/src/commons/features.jsx
@@ -2,7 +2,7 @@ export default function Features() {
   return (
     <section className="features">
       <div className="feature">
-        <i class="feature__icon fa fa-globe"></i>
+        <i className="feature__icon fa fa-globe"></i>
         <h4 className="heading-4 heading-4--dark">World's best luxury homes</h4>
         <p className="feature__text">
           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex
@@ -10,7 +10,7 @@ export default function Features() {
         </p>
       </div>
       <div className="feature">
-        <i class="feature__icon fa fa-trophy"></i>
+        <i className="feature__icon fa fa-trophy"></i>
         <h4 className="heading-4 heading-4--dark">Only the best properties.</h4>
         <p className="feature__text">
           Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus
@@ -18,7 +18,7 @@ export default function Features() {
         </p>
       </div>
       <div className="feature">
-        <i class="feature__icon fa fa-map"></i>
+        <i className="feature__icon fa fa-map"></i>
         <h4 className="heading-4 heading-4--dark">
           All homes in top locations
         </h4>
@@ -28,7 +28,7 @@ export default function Features() {
         </p>
       </div>
       <div className="feature">
-        <i class="feature__icon fa fa-key"></i>
+        <i className="feature__icon fa fa-key"></i>
         <h4 className="heading-4 heading-4--dark">New home in one week</h4>
         <p className="feature__text">
           Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit
@@ -36,7 +36,7 @@ export default function Features() {
         </p>
       </div>
       <div className="feature">
-        <i class="feature__icon fa fa-line-chart"></i>
+        <i className="feature__icon fa fa-line-chart"></i>
         <h4 className="heading-4 heading-4--dark">Top 1% realtors</h4>
         <p className="feature__text">
           Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio
@@ -44,7 +44,7 @@ export default function Features() {
         </p>
       </div>
       <div className="feature">
-        <i class="feature__icon fa fa-lock"></i>
+        <i className="feature__icon fa fa-lock"></i>
         <h4 className="heading-4 heading-4--dark">Secure payments on nexter</h4>
         <p className="feature__text">
           Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia
diff --git a/src/commons/homes.jsx b/src/commons/homes.jsx
index 9a822cb..ecc0afd 100644
--- a/src/commons/homes.jsx
+++ b/src/commons/homes.jsx
@@ -1,3 +1,174 @@
+import house1 from "./img/house-1.jpeg";
+import house2 from "./img/house-2.jpeg";
+import house3 from "./img/house-3.jpeg";
+import house4 from "./img/house-4.jpeg";
+import house5 from "./img/house-5.jpeg";
+import house6 from "./img/house-6.jpeg";
+
 export default function Homes() {
-  return <section className="homes">Homes</section>;
+  return (
+    <section className="homes">
+      <div className="home">
+        <img src={house1} alt="House 1" className="home__img" />
+        <div className="home__like">
+          <i className="card__icon fa fa-heart" />
+        </div>
+        <h5 className="home__name">Beautiful Family House</h5>
+        <div className="home__location">
+          <i className="card__icon fa fa-map-marker" />
+          <p>USA</p>
+        </div>
+        <div className="home__rooms">
+          <i className="card__icon fa fa-user" />
+          <p>5 rooms</p>
+        </div>
+        <div className="home__area">
+          <i className="card__icon fa fa-expand" />
+          <p>
+            325 m<sup>2</sup>
+          </p>
+        </div>
+        <div className="home__price">
+          <i className="card__icon fa fa-key" />
+          <p>$1.200.000</p>
+        </div>
+        <button className="btn home__button">Contact Realtor</button>
+      </div>
+
+      <div className="home">
+        <img src={house2} alt="House 2" className="home__img" />
+        <div className="home__like">
+          <i className="card__icon fa fa-heart" />
+        </div>
+        <h5 className="home__name">Modern Glass Villa</h5>
+        <div className="home__location">
+          <i className="card__icon fa fa-map-marker" />
+          <p>Canada</p>
+        </div>
+        <div className="home__rooms">
+          <i className="card__icon fa fa-user" />
+          <p>6 rooms</p>
+        </div>
+        <div className="home__area">
+          <i className="card__icon fa fa-expand" />
+          <p>
+            450 m<sup>2</sup>
+          </p>
+        </div>
+        <div className="home__price">
+          <i className="card__icon fa fa-key" />
+          <p>$2.750.000</p>
+        </div>
+        <button className="btn home__button">Contact Realtor</button>
+      </div>
+
+      <div className="home">
+        <img src={house3} alt="House 3" className="home__img" />
+        <div className="home__like">
+          <i className="card__icon fa fa-heart" />
+        </div>
+        <h5 className="home__name">Cozy country House</h5>
+        <div className="home__location">
+          <i className="card__icon fa fa-map-marker" />
+          <p>UK</p>
+        </div>
+        <div className="home__rooms">
+          <i className="card__icon fa fa-user" />
+          <p>4 rooms</p>
+        </div>
+        <div className="home__area">
+          <i className="card__icon fa fa-expand" />
+          <p>
+            250 m<sup>2</sup>
+          </p>
+        </div>
+        <div className="home__price">
+          <i className="card__icon fa fa-key" />
+          <p>$850.000</p>
+        </div>
+        <button className="btn home__button">Contact Realtor</button>
+      </div>
+
+      <div className="home">
+        <img src={house4} alt="House 4" className="home__img" />
+        <div className="home__like">
+          <i className="card__icon fa fa-heart" />
+        </div>
+        <h5 className="home__name">Large Rustical Villa</h5>
+        <div className="home__location">
+          <i className="card__icon fa fa-map-marker" />
+          <p>Portugal</p>
+        </div>
+        <div className="home__rooms">
+          <i className="card__icon fa fa-user" />
+          <p>6 rooms</p>
+        </div>
+        <div className="home__area">
+          <i className="card__icon fa fa-expand" />
+          <p>
+            480 m<sup>2</sup>
+          </p>
+        </div>
+        <div className="home__price">
+          <i className="card__icon fa fa-key" />
+          <p>$1.950.000</p>
+        </div>
+        <button className="btn home__button">Contact Realtor</button>
+      </div>
+
+      <div className="home">
+        <img src={house5} alt="House 5" className="home__img" />
+        <div className="home__like">
+          <i className="card__icon fa fa-heart" />
+        </div>
+        <h5 className="home__name">Majestic Palace House</h5>
+        <div className="home__location">
+          <i className="card__icon fa fa-map-marker" />
+          <p>Germany</p>
+        </div>
+        <div className="home__rooms">
+          <i className="card__icon fa fa-user" />
+          <p>18 rooms</p>
+        </div>
+        <div className="home__area">
+          <i className="card__icon fa fa-expand" />
+          <p>
+            4230 m<sup>2</sup>
+          </p>
+        </div>
+        <div className="home__price">
+          <i className="card__icon fa fa-key" />
+          <p>$9.500.000</p>
+        </div>
+        <button className="btn home__button">Contact Realtor</button>
+      </div>
+
+      <div className="home">
+        <img src={house6} alt="House 6" className="home__img" />
+        <div className="home__like">
+          <i className="card__icon fa fa-heart" />
+        </div>
+        <h5 className="home__name">Modern Family Apartment</h5>
+        <div className="home__location">
+          <i className="card__icon fa fa-map-marker" />
+          <p>Italy</p>
+        </div>
+        <div className="home__rooms">
+          <i className="card__icon fa fa-user" />
+          <p>3 rooms</p>
+        </div>
+        <div className="home__area">
+          <i className="card__icon fa fa-expand" />
+          <p>
+            180 m<sup>2</sup>
+          </p>
+        </div>
+        <div className="home__price">
+          <i className="card__icon fa fa-key" />
+          <p>$600.000</p>
+        </div>
+        <button className="btn home__button">Contact Realtor</button>
+      </div>
+    </section>
+  );
 }
diff --git a/src/sass/_homes.scss b/src/sass/_homes.scss
index bd12135..4e0a006 100644
--- a/src/sass/_homes.scss
+++ b/src/sass/_homes.scss
@@ -1,4 +1,82 @@
 .homes {
-  background-color: $color-secondary;
   grid-column: center-start / center-end;
+  margin: 15rem 0;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+  gap: 7rem;
+
+  .home {
+    background-color: $color-grey-light-1;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 3.5rem;
+
+    &__img {
+      width: 100%;
+      grid-row: 1 / 2;
+      grid-column: 1 / -1;
+      z-index: 1;
+    }
+
+    &__like {
+      grid-row: 1 / 2;
+      grid-column: 2 / 3;
+      z-index: 2;
+      justify-self: end;
+
+      .card__icon {
+        color: $color-primary;
+        font-size: 2.5rem;
+        margin: 1rem;
+        cursor: pointer;
+      }
+    }
+
+    &__name {
+      grid-column: 1 / -1;
+      grid-row: 1 / 2;
+
+      font-family: $font-display;
+      font-size: 1.6rem;
+      text-align: center;
+      padding: 1.25rem;
+      background-color: $color-secondary;
+      color: #fff;
+      font-weight: 400;
+
+      width: 80%;
+      justify-self: center;
+      align-self: end;
+      transform: translateY(50%);
+      z-index: 2;
+    }
+
+    &__button {
+      grid-column: 1 / -1;
+    }
+
+    &__location,
+    &__rooms {
+      margin-top: 2.5rem;
+    }
+
+    &__location,
+    &__rooms,
+    &__area,
+    &__price {
+      font-size: 1.5rem;
+      margin-left: 2rem;
+
+      display: flex;
+      align-items: center;
+
+      .card__icon {
+        color: $color-primary;
+        font-size: 2rem;
+        margin-right: 1rem;
+      }
+    }
+  }
 }