built the houselists section

Author: veiled-coder

src/components/Card.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+import "../styles/card.css";
+import "../styles/houses.css";
+import  Star  from "../images/star.svg";
+
+function Card({ src }) {
+  return (
+    <div className="card">
+      <img className="card-house" src={src} alt="another beautiful house"></img>
+      <div className="card-house_info">
+        <p>Desert King</p>
+        <p className="house-info_bold">1MBT per night</p>
+      </div>
+      <div className="card-house_distance">
+        <p>2345km away</p>
+        <p>available for 2 weeks stay</p>
+      </div>
+      <img src={Star} alt="5 beautiful rate stars" />
+    </div>
+  );
+}
+
+export default Card;

src/components/Homepage.js

@@ -3,12 +3,15 @@ import "../styles/homepage.css";
 import "../styles/styles.css";
 import  Header from "../components/Header"
 import Wallets from "../components/Wallets";
+import Houses from "../components/Houses";
+
 
 function Homepage() {
   return (
     <div className="homepage">
       <Header />
-      <Wallets/>
+      <Wallets />
+      <Houses/>
     </div>
   );
 }

src/components/Houses.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "../styles/houses.css";
+import "../styles/styles.css";
+import Housescontainer from "./Housescontainer";
+
+function Houses() {
+  return (
+    <section className="houses">
+      <h2>Inspiration for your next adventure</h2>
+      <Housescontainer />
+    </section>
+  );
+}
+
+export default Houses;

src/components/Housescontainer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Card from './Card';
+import House5 from "../images/house5.svg";
+import House6 from "../images/house6.svg";
+import House7 from "../images/house7.svg";
+import House8 from "../images/house8.svg";
+import House9 from "../images/house9.svg";
+import House10 from "../images/house10.svg";
+import House11 from "../images/house11.svg";
+import House12 from "../images/house12.svg";
+
+
+function Housescontainer() {
+    return (
+      <div className="houses-lists_container grid">
+        <div className="houses-lists">
+          <Card src={House5} />
+          <Card src={House6} />
+          <Card src={House7} />
+          <Card src={House8} />
+          <Card src={House9} />
+          <Card src={House10} />
+          <Card src={House11} />
+          <Card src={House12} />
+        </div>
+      </div>
+    );
+}
+
+export default Housescontainer