completed the place-to-stay page

Author: veiled-coder

src/components/Houses.js

@@ -7,7 +7,7 @@ function Houses() {
   return (
     <section className="houses">
       <h2>Inspiration for your next adventure</h2>
-      <Housescontainer />
+      <Housescontainer  />
     </section>
   );
 }

src/components/Housescontainer.js

@@ -1,6 +1,7 @@
 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";
@@ -10,7 +11,7 @@ import House11 from "../images/house11.svg";
 import House12 from "../images/house12.svg";
 
 
-function Housescontainer() {
+function Housescontainer({children}) {
     return (
       <div className="houses-lists_container grid">
         <div className="houses-lists">
@@ -22,6 +23,7 @@ function Housescontainer() {
           <Card src={House10} />
           <Card src={House11} />
           <Card src={House12} />
+          {children}
         </div>
       </div>
     );

src/components/Housescontainerplace.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Card from './Card';
+import "../styles/houses.css";
+import "../styles/styles.css";
+
+import House16 from "../images/house16.svg";
+import House17 from "../images/house17.svg";
+import House18 from "../images/house18.svg";
+import House19 from "../images/house19.svg";
+import House20 from "../images/house20.svg";
+import House21 from "../images/house21.svg";
+import House22 from "../images/house22.svg";
+import House23 from "../images/house23.svg";
+import House24 from "../images/house24.svg";
+import House25 from "../images/house25.svg";
+import House26 from "../images/house26.svg";
+import House27 from "../images/house27.svg";
+import House28 from "../images/house28.svg";
+import House29 from "../images/house29.svg";
+import House30 from "../images/house30.svg";
+import House31 from "../images/house31.svg";
+
+
+function Housescontainerplace() {
+  return (
+      <section className='house-places grid'>
+          <div className='house-places_container'>
+      <Card src={House16} />
+      <Card src={House17} />
+      <Card src={House18} />
+      <Card src={House19} />
+      <Card src={House20} />
+      <Card src={House21} />
+      <Card src={House22} />
+      <Card src={House23} />
+      <Card src={House24} />
+      <Card src={House25} />
+      
+      <Card src={House26} />
+
+      <Card src={House27} />
+      <Card src={House28} />
+      <Card src={House29} />
+      <Card src={House30} />
+      <Card src={House31} />
+          </div>
+          </section>
+  );
+}
+
+export default Housescontainerplace

src/components/Place.js

@@ -1,30 +1,32 @@
 import React from "react";
 import "../styles/styles.css";
 import "../styles/place.css";
-import './Button'
+import "./Button";
 import Button from "./Button";
-import Setting from '../images/setting.svg'
+import Setting from "../images/setting.svg";
+import Housescontainerplace from './Housescontainerplace'
 
 function Place() {
   return (
-    <section className="place grid">
-      <div className="place-content">
-              <div className="places-list">
-                  <p>Restaurant</p>
-                  <p>Cottage</p>
-                  <p>Castle</p>
-                  <p>fantas city</p>
-                  <p>beach</p>
-                  <p>Carbins</p>
-                  <p>Off-grid</p>
-                  <p>Farm</p>
-                  <Button name='Location' styleclass='btn-location'>
-                  <img className="setting" src={Setting} alt='filter'></img>    
-                  </Button>
+    <section className="place">
+      <div className="place-content grid">
+        <div className="places-list ">
+          <p>Restaurant</p>
+          <p>Cottage</p>
+          <p>Castle</p>
+          <p>fantas city</p>
+          <p>beach</p>
+          <p>Carbins</p>
+          <p>Off-grid</p>
+          <p>Farm</p>
+          <Button name="Location" styleclass="btn-location">
+            <img className="setting" src={Setting} alt="filter"></img>
+          </Button>
         </div>
-
-        <div className="house-list">LIST</div>
       </div>
+      <Housescontainerplace/>
+       
+
     </section>
   );
 }