mirror of
https://github.com/yusufipk/nexter-react.git
synced 2026-09-11 09:36:09 +00:00
created and styled homes section
This commit is contained in:
Yusuf Ipek
@@ -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
|
||||
|
||||
+172
-1
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+79
-1
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user