├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── images │ ├── banner.png │ ├── customer │ │ ├── team-1.jpg │ │ ├── team-2.jpg │ │ ├── team-3.jpg │ │ ├── team-4.jpg │ │ └── team-5.jpg │ ├── hero │ │ ├── h1.png │ │ ├── h2.png │ │ ├── h3.png │ │ ├── h4.png │ │ └── h6.png │ ├── list │ │ ├── p-1.png │ │ ├── p-2.png │ │ ├── p-4.png │ │ ├── p-5.png │ │ ├── p-6.png │ │ └── p-7.png │ ├── location │ │ ├── city-1.png │ │ ├── city-2.png │ │ ├── city-3.png │ │ ├── city-4.png │ │ ├── city-5.png │ │ └── city-6.png │ ├── logo-light.png │ └── logo.png ├── immio.jpg └── index.html └── src ├── App.css ├── App.js ├── components ├── about │ ├── About.jsx │ └── about.css ├── blog │ └── Blog.jsx ├── common │ ├── Back.jsx │ ├── Heading.jsx │ ├── footer │ │ ├── Footer.jsx │ │ └── footer.css │ └── header │ │ ├── Header.jsx │ │ └── header.css ├── contact │ ├── Contact.jsx │ └── contact.css ├── data │ └── Data.js ├── home │ ├── Home.jsx │ ├── awards │ │ ├── Awards.jsx │ │ └── awards.css │ ├── featured │ │ ├── Featured.css │ │ ├── Featured.jsx │ │ └── FeaturedCard.jsx │ ├── hero │ │ ├── Hero.jsx │ │ └── hero.css │ ├── location │ │ ├── Location.jsx │ │ └── style.css │ ├── price │ │ ├── Price.jsx │ │ ├── PriceCard.jsx │ │ └── price.css │ ├── recent │ │ ├── Recent.jsx │ │ ├── RecentCard.jsx │ │ └── recent.css │ └── team │ │ ├── Team.jsx │ │ └── team.css ├── images │ ├── about.jpg │ ├── pricing.jpg │ └── services.jpg ├── pages │ └── Pages.jsx ├── pricing │ └── Pricing.jsx └── services │ └── Services.jsx └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Project Demo : https://funny-daffodil-350bc9.netlify.app/ 2 | 3 | Project Video : https://www.youtube.com/watch?v=iqfxu4s6i4Y&ab_channel=GorkCoder 4 | 5 | ![screencapture-funny-daffodil-350bc9-netlify-app-2023-06-18-13_10_37](https://github.com/sunil9813/Real-estate-website/assets/67497228/011837d1-0937-40cd-8ea2-aa83aefaf649) 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "real-estate", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.2.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.1.0", 10 | "react-dom": "^18.1.0", 11 | "react-router-dom": "^5.3.3", 12 | "react-scripts": "5.0.1", 13 | "react-slick": "^0.29.0", 14 | "slick-carousel": "^1.8.1", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/favicon.png -------------------------------------------------------------------------------- /public/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/banner.png -------------------------------------------------------------------------------- /public/images/customer/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/customer/team-1.jpg -------------------------------------------------------------------------------- /public/images/customer/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/customer/team-2.jpg -------------------------------------------------------------------------------- /public/images/customer/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/customer/team-3.jpg -------------------------------------------------------------------------------- /public/images/customer/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/customer/team-4.jpg -------------------------------------------------------------------------------- /public/images/customer/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/customer/team-5.jpg -------------------------------------------------------------------------------- /public/images/hero/h1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/hero/h1.png -------------------------------------------------------------------------------- /public/images/hero/h2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/hero/h2.png -------------------------------------------------------------------------------- /public/images/hero/h3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/hero/h3.png -------------------------------------------------------------------------------- /public/images/hero/h4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/hero/h4.png -------------------------------------------------------------------------------- /public/images/hero/h6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/hero/h6.png -------------------------------------------------------------------------------- /public/images/list/p-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/list/p-1.png -------------------------------------------------------------------------------- /public/images/list/p-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/list/p-2.png -------------------------------------------------------------------------------- /public/images/list/p-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/list/p-4.png -------------------------------------------------------------------------------- /public/images/list/p-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/list/p-5.png -------------------------------------------------------------------------------- /public/images/list/p-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/list/p-6.png -------------------------------------------------------------------------------- /public/images/list/p-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/list/p-7.png -------------------------------------------------------------------------------- /public/images/location/city-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/location/city-1.png -------------------------------------------------------------------------------- /public/images/location/city-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/location/city-2.png -------------------------------------------------------------------------------- /public/images/location/city-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/location/city-3.png -------------------------------------------------------------------------------- /public/images/location/city-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/location/city-4.png -------------------------------------------------------------------------------- /public/images/location/city-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/location/city-5.png -------------------------------------------------------------------------------- /public/images/location/city-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/location/city-6.png -------------------------------------------------------------------------------- /public/images/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/logo-light.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/images/logo.png -------------------------------------------------------------------------------- /public/immio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/public/immio.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | RentUp - Residence & Real Estate Website 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: "Poppins", sans-serif; 9 | background-color: #fff; 10 | } 11 | .container { 12 | max-width: 80%; 13 | margin: auto; 14 | } 15 | .flex { 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: center; 19 | } 20 | a { 21 | text-decoration: none; 22 | color: #000; 23 | text-transform: capitalize; 24 | } 25 | ul { 26 | list-style-type: none; 27 | } 28 | button { 29 | border-radius: 5px; 30 | padding: 17px 30px; 31 | background: #27ae60; 32 | border: none; 33 | color: #fff; 34 | cursor: pointer; 35 | font-weight: bold; 36 | } 37 | button i { 38 | margin-right: 5px; 39 | } 40 | .heading { 41 | text-align: center; 42 | width: 60%; 43 | margin: auto; 44 | } 45 | .heading h1 { 46 | color: #2d3954; 47 | font-weight: 600; 48 | text-transform: capitalize; 49 | font-size: 35px; 50 | } 51 | .heading p { 52 | color: #72809d; 53 | } 54 | textarea, 55 | input { 56 | border: none; 57 | outline: none; 58 | background: none; 59 | } 60 | .background { 61 | padding: 80px 0; 62 | position: relative; 63 | background: #f7f9fc; 64 | } 65 | 66 | .grid5 { 67 | display: grid; 68 | grid-template-columns: repeat(5, 1fr); 69 | grid-gap: 30px; 70 | } 71 | label { 72 | color: #2d3954; 73 | font-size: 14px; 74 | } 75 | .mtop { 76 | margin-top: 50px; 77 | } 78 | h4 { 79 | font-weight: 500; 80 | margin-top: 10px; 81 | } 82 | .shadow { 83 | box-shadow: 0 0 20px 0 rgb(112 121 138 / 18%); 84 | } 85 | .padding { 86 | padding: 80px 0; 87 | } 88 | .grid3 { 89 | display: grid; 90 | grid-template-columns: repeat(3, 1fr); 91 | grid-gap: 30px; 92 | } 93 | img { 94 | width: 100%; 95 | height: 100%; 96 | cursor: pointer; 97 | } 98 | .btn2 { 99 | border-radius: 50px; 100 | font-size: 20px; 101 | } 102 | .grid4 { 103 | display: grid; 104 | grid-template-columns: repeat(4, 1fr); 105 | grid-gap: 30px; 106 | } 107 | .btn3 { 108 | background: #ff6922; 109 | border-radius: 50px; 110 | } 111 | .btn4 { 112 | background-color: #000; 113 | color: #fff; 114 | } 115 | .btn5 { 116 | border-radius: 50px; 117 | padding: 20px 40px; 118 | color: #27ae60; 119 | font-size: 20px; 120 | font-weight: 400; 121 | border: 5px solid #27ae601f; 122 | background: #fff; 123 | } 124 | .back { 125 | height: 40vh; 126 | position: relative; 127 | } 128 | .back img { 129 | height: 40vh; 130 | position: absolute; 131 | top: 0; 132 | left: 0; 133 | z-index: -1; 134 | object-fit: cover; 135 | } 136 | .back::after { 137 | content: ""; 138 | position: absolute; 139 | top: 0; 140 | left: 0; 141 | width: 100%; 142 | height: 40vh; 143 | background: rgba(17, 40, 72, 0.629); 144 | z-index: -1; 145 | } 146 | .back .container { 147 | color: #fff; 148 | padding: 120px 0; 149 | } 150 | .back h1 { 151 | font-size: 40px; 152 | font-weight: 500; 153 | } 154 | .mb { 155 | margin-bottom: 80px; 156 | } 157 | @media screen and (max-width: 800px) { 158 | .grid4, 159 | .grid3, 160 | .grid5 { 161 | grid-template-columns: repeat(2, 1fr); 162 | } 163 | .heading { 164 | width: 100%; 165 | } 166 | .container { 167 | max-width: 90%; 168 | } 169 | .back::after, 170 | .back img, 171 | .back { 172 | height: 30vh; 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css" 2 | import Pages from "./components/pages/Pages" 3 | 4 | function App() { 5 | return 6 | } 7 | 8 | export default App 9 | -------------------------------------------------------------------------------- /src/components/about/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Back from "../common/Back" 3 | import Heading from "../common/Heading" 4 | import img from "../images/about.jpg" 5 | import "./about.css" 6 | 7 | const About = () => { 8 | return ( 9 | <> 10 |
11 | 12 |
13 |
14 | 15 | 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

17 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

18 | 19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 | ) 27 | } 28 | 29 | export default About 30 | -------------------------------------------------------------------------------- /src/components/about/about.css: -------------------------------------------------------------------------------- 1 | .about { 2 | margin-bottom: 80px; 3 | } 4 | .about .heading { 5 | text-align: left; 6 | width: 100%; 7 | margin-bottom: 30px; 8 | } 9 | .about p { 10 | font-size: 15px; 11 | padding-right: 30px; 12 | margin-bottom: 20px; 13 | line-height: 30px; 14 | } 15 | @media screen and (max-width: 768px) { 16 | .about .container { 17 | flex-direction: column; 18 | } 19 | .about p { 20 | padding: 0; 21 | } 22 | .about .container img { 23 | margin-top: 50px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/blog/Blog.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Back from "../common/Back" 3 | import RecentCard from "../home/recent/RecentCard" 4 | import "../home/recent/recent.css" 5 | import img from "../images/about.jpg" 6 | 7 | const Blog = () => { 8 | return ( 9 | <> 10 |
11 | 12 |
13 | 14 |
15 |
16 | 17 | ) 18 | } 19 | 20 | export default Blog 21 | -------------------------------------------------------------------------------- /src/components/common/Back.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Back = ({ name, title, cover }) => { 4 | return ( 5 | <> 6 |
7 |
8 | {name} 9 |

{title}

10 |
11 | 12 |
13 | 14 | ) 15 | } 16 | 17 | export default Back 18 | -------------------------------------------------------------------------------- /src/components/common/Heading.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Heading = ({ title, subtitle }) => { 4 | return ( 5 | <> 6 |
7 |

{title}

8 |

{subtitle}

9 |
10 | 11 | ) 12 | } 13 | 14 | export default Heading 15 | -------------------------------------------------------------------------------- /src/components/common/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { footer } from "../../data/Data" 3 | import "./footer.css" 4 | 5 | const Footer = () => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 |

Do You Have Questions ?

13 |

We'll help you to grow your career and growth.

14 |
15 | 16 |
17 |
18 |
19 | 20 | 47 |
48 | © 2021 RentUP. Designd By GorkCoder. 49 |
50 | 51 | ) 52 | } 53 | 54 | export default Footer 55 | -------------------------------------------------------------------------------- /src/components/common/footer/footer.css: -------------------------------------------------------------------------------- 1 | .footerContact { 2 | background-color: #27ae60; 3 | padding: 40px 0; 4 | color: #fff; 5 | } 6 | .footerContact h1 { 7 | font-size: 40px; 8 | } 9 | footer { 10 | background-color: #1d2636; 11 | padding: 50px 0; 12 | color: #fff; 13 | } 14 | footer .container { 15 | display: grid; 16 | grid-template-columns: 6fr 2fr 2fr 1fr; 17 | grid-gap: 20px; 18 | } 19 | footer img { 20 | width: 150px; 21 | } 22 | footer h2 { 23 | font-weight: 500; 24 | } 25 | footer p { 26 | color: grey; 27 | margin: 20px 0; 28 | } 29 | footer input { 30 | background-color: #fff; 31 | padding: 17px; 32 | width: 100%; 33 | border-radius: 5px; 34 | } 35 | footer h3 { 36 | font-weight: 500; 37 | margin-bottom: 30px; 38 | } 39 | footer ul { 40 | display: block; 41 | } 42 | footer ul li { 43 | display: block; 44 | color: grey; 45 | margin-bottom: 20px; 46 | } 47 | .legal { 48 | text-align: center; 49 | padding: 20px; 50 | background: #1d2636; 51 | color: rgba(255, 255, 255, 0.5); 52 | border-top: 1px solid rgba(255, 255, 255, 0.1); 53 | } 54 | @media screen and (max-width: 800px) { 55 | footer .container { 56 | grid-template-columns: repeat(2, 1fr); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/common/header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import "./header.css" 3 | import { nav } from "../../data/Data" 4 | import { Link } from "react-router-dom" 5 | 6 | const Header = () => { 7 | const [navList, setNavList] = useState(false) 8 | 9 | return ( 10 | <> 11 |
12 |
13 |
14 | 15 |
16 |
17 |
    18 | {nav.map((list, index) => ( 19 |
  • 20 | {list.text} 21 |
    • 22 | ))} 23 |
24 |
25 |
26 |

27 | 2 My List 28 |

29 | 32 |
33 | 34 |
35 | 36 |
37 |
38 |
39 | 40 | ) 41 | } 42 | 43 | export default Header 44 | -------------------------------------------------------------------------------- /src/components/common/header/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | background-color: #fff; 3 | height: 10vh; 4 | box-shadow: 0 5px 30px rgb(0 22 84 / 10%); 5 | padding: 15px 0; 6 | position: sticky; 7 | top: 0; 8 | z-index: 99999; 9 | } 10 | header img { 11 | width: 170px; 12 | } 13 | header a { 14 | margin-left: 30px; 15 | transition: 0.5s; 16 | font-weight: 500; 17 | } 18 | header a:hover { 19 | color: #27ae60; 20 | } 21 | header span { 22 | width: auto; 23 | padding: 0px 6px; 24 | background: #27ae60; 25 | border-radius: 50px; 26 | color: #ffffff; 27 | margin-right: 4px; 28 | font-weight: 400; 29 | } 30 | header h4 { 31 | font-weight: 500; 32 | margin-right: 20px; 33 | } 34 | header .toggle { 35 | display: none; 36 | } 37 | @media screen and (max-width: 768px) { 38 | header { 39 | padding: 0; 40 | } 41 | header img { 42 | margin-top: 30px; 43 | } 44 | header .button { 45 | display: none; 46 | } 47 | header .nav .flex { 48 | display: none; 49 | } 50 | header .toggle { 51 | display: block; 52 | margin-top: 20px; 53 | } 54 | header .small { 55 | position: absolute; 56 | top: 10vh; 57 | left: 0; 58 | width: 100%; 59 | background-color: #27ae60; 60 | padding: 20px; 61 | } 62 | header li a { 63 | display: inline-block; 64 | margin-bottom: 20px; 65 | color: #fff; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/components/contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import img from "../images/pricing.jpg" 3 | import Back from "../common/Back" 4 | import "./contact.css" 5 | 6 | const Contact = () => { 7 | return ( 8 | <> 9 |
10 | 11 |
12 |
13 |

Fillup The Form


14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default Contact 29 | -------------------------------------------------------------------------------- /src/components/contact/contact.css: -------------------------------------------------------------------------------- 1 | .contact form div { 2 | display: flex; 3 | } 4 | .contact textarea { 5 | border: 1px solid rgba(0, 0, 0, 0.1); 6 | width: 100%; 7 | border-radius: 5px; 8 | margin-bottom: 20px; 9 | } 10 | .contact input { 11 | margin-bottom: 20px; 12 | margin-right: 10px; 13 | } 14 | .contact form { 15 | padding: 30px; 16 | } 17 | @media screen and (max-width: 768px) { 18 | .contact h4 { 19 | width: 100%; 20 | margin-bottom: 30px; 21 | } 22 | .contact form div { 23 | flex-direction: column; 24 | } 25 | .contact input { 26 | width: 100%; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/data/Data.js: -------------------------------------------------------------------------------- 1 | export const nav = [ 2 | { 3 | text: "home", 4 | path: "/", 5 | }, 6 | { 7 | text: "about", 8 | path: "/about", 9 | }, 10 | { 11 | text: "services", 12 | path: "/services", 13 | }, 14 | { 15 | text: "blog", 16 | path: "/blog", 17 | }, 18 | { 19 | text: "pricing", 20 | path: "/pricing", 21 | }, 22 | { 23 | text: "contact", 24 | path: "/contact", 25 | }, 26 | ] 27 | export const featured = [ 28 | { 29 | cover: "../images/hero/h1.png", 30 | name: "Family House", 31 | total: "122 Property", 32 | }, 33 | { 34 | cover: "../images/hero/h2.png", 35 | name: "House & Villa", 36 | total: "155 Property", 37 | }, 38 | { 39 | cover: "../images/hero/h3.png", 40 | name: "Apartment", 41 | total: "300 Property", 42 | }, 43 | { 44 | cover: "../images/hero/h4.png", 45 | name: "Office & Studio", 46 | total: "80 Property", 47 | }, 48 | { 49 | cover: "../images/hero/h6.png", 50 | name: "Villa & Condo", 51 | total: "80 Property", 52 | }, 53 | ] 54 | export const list = [ 55 | { 56 | id: 1, 57 | cover: "../images/list/p-1.png", 58 | name: "Red Carpet Real Estate", 59 | location: "210 Zirak Road, Canada", 60 | category: "For Rent", 61 | price: "$3,700", 62 | type: "Apartment", 63 | }, 64 | { 65 | id: 2, 66 | cover: "../images/list/p-2.png", 67 | name: "Fairmount Properties", 68 | location: "5698 Zirak Road, NewYork", 69 | category: "For Sale", 70 | price: "$9,750", 71 | type: "Condos", 72 | }, 73 | { 74 | id: 3, 75 | cover: "../images/list/p-7.png", 76 | name: "The Real Estate Corner", 77 | location: "5624 Mooker Market, USA", 78 | category: "For Rent", 79 | price: "$5,860", 80 | type: "Offices", 81 | }, 82 | { 83 | id: 4, 84 | cover: "../images/list/p-4.png", 85 | name: "Herringbone Realty", 86 | location: "5621 Liverpool, London", 87 | category: "For Sale", 88 | price: "$7,540", 89 | type: "Homes & Villas", 90 | }, 91 | { 92 | id: 5, 93 | cover: "../images/list/p-5.png", 94 | name: "Brick Lane Realty", 95 | location: "210 Montreal Road, Canada", 96 | category: "For Rent", 97 | price: "$4,850", 98 | type: "Commercial", 99 | }, 100 | { 101 | id: 6, 102 | cover: "../images/list/p-6.png", 103 | name: "Banyon Tree Realty", 104 | location: "210 Zirak Road, Canada", 105 | category: "For Sale", 106 | price: "$2,742", 107 | type: "Apartment", 108 | }, 109 | ] 110 | export const awards = [ 111 | { 112 | icon: , 113 | num: "32 M ", 114 | name: "Blue Burmin Award", 115 | }, 116 | { 117 | icon: , 118 | num: "43 M", 119 | name: "Mimo X11 Award", 120 | }, 121 | { 122 | icon: , 123 | num: "51 M", 124 | name: "Australian UGC Award", 125 | }, 126 | { 127 | icon: , 128 | num: "42 M", 129 | name: "IITCA Green Award", 130 | }, 131 | ] 132 | export const location = [ 133 | { 134 | id: 1, 135 | name: "New Orleans, Louisiana", 136 | Villas: "12 Villas", 137 | Apartments: "10 Apartments", 138 | Offices: "07 Offices", 139 | cover: "./images/location/city-1.png", 140 | }, 141 | { 142 | id: 2, 143 | name: "Jerrsy, United State", 144 | Villas: "12 Villas", 145 | Apartments: "10 Apartments", 146 | Offices: "07 Offices", 147 | cover: "./images/location/city-2.png", 148 | }, 149 | { 150 | id: 3, 151 | name: "Liverpool, London", 152 | Villas: "12 Villas", 153 | Apartments: " 10 Apartments", 154 | Offices: "07 Offices", 155 | cover: "./images/location/city-3.png", 156 | }, 157 | { 158 | id: 4, 159 | name: "NewYork, United States", 160 | Villas: "12 Villas", 161 | Apartments: " 10 Apartments", 162 | Offices: "07 Offices", 163 | cover: "./images/location/city-4.png", 164 | }, 165 | { 166 | id: 5, 167 | name: "Montreal, Canada", 168 | Villas: "12 Villas", 169 | Apartments: " 10 Apartments", 170 | Offices: "07 Offices", 171 | cover: "./images/location/city-5.png", 172 | }, 173 | { 174 | id: 6, 175 | name: "California, USA", 176 | Villas: "12 Villas", 177 | Apartments: " 10 Apartments", 178 | Offices: "07 Offices", 179 | cover: "./images/location/city-6.png", 180 | }, 181 | ] 182 | export const team = [ 183 | { 184 | list: "50", 185 | cover: "../images/customer/team-1.jpg", 186 | address: "Liverpool, Canada", 187 | name: "Sargam S. Singh", 188 | icon: [, , , ], 189 | }, 190 | { 191 | list: "70", 192 | cover: "../images/customer/team-2.jpg", 193 | address: "Montreal, Canada", 194 | name: "Harijeet M. Siller", 195 | icon: [, , , ], 196 | }, 197 | { 198 | list: "80", 199 | cover: "../images/customer/team-3.jpg", 200 | address: "Denever, USA", 201 | name: "Anna K. Young", 202 | icon: [, , , ], 203 | }, 204 | { 205 | list: "51", 206 | cover: "../images/customer/team-4.jpg", 207 | address: "2272 Briarwood Drive", 208 | name: "Michael P. Grimaldo", 209 | icon: [, , , ], 210 | }, 211 | { 212 | list: "42", 213 | cover: "../images/customer/team-5.jpg", 214 | address: "2272 Briarwood Drive", 215 | name: "Michael P. Grimaldo", 216 | icon: [, , , ], 217 | }, 218 | { 219 | list: "38", 220 | cover: "../images/customer/team-5.jpg", 221 | address: "Montreal, USA", 222 | name: "Adam K. Jollio", 223 | icon: [, , , ], 224 | }, 225 | ] 226 | export const price = [ 227 | { 228 | plan: "Basic", 229 | price: "29", 230 | ptext: "per user, per month", 231 | list: [ 232 | { 233 | icon: , 234 | text: "99.5% Uptime Guarantee", 235 | }, 236 | { 237 | icon: , 238 | text: "120GB CDN Bandwidth", 239 | }, 240 | { 241 | icon: , 242 | text: "5GB Cloud Storage", 243 | }, 244 | { change: "color", icon: , text: "Personal Help Support" }, 245 | { change: "color", icon: , text: "Enterprise SLA" }, 246 | ], 247 | }, 248 | { 249 | best: "Best Value", 250 | plan: "Standard", 251 | price: "49", 252 | ptext: "per user, per month", 253 | list: [ 254 | { 255 | icon: , 256 | text: "99.5% Uptime Guarantee", 257 | }, 258 | { 259 | icon: , 260 | text: "150GB CDN Bandwidth", 261 | }, 262 | { 263 | icon: , 264 | text: "10GB Cloud Storage", 265 | }, 266 | { 267 | icon: , 268 | text: "Personal Help Support", 269 | }, 270 | { 271 | change: "color", 272 | icon: , 273 | text: "Enterprise SLA", 274 | }, 275 | ], 276 | }, 277 | { 278 | plan: "Platinum", 279 | price: "79", 280 | ptext: "2 user, per month", 281 | list: [ 282 | { 283 | icon: , 284 | text: "100% Uptime Guarantee", 285 | }, 286 | { 287 | icon: , 288 | text: "200GB CDN Bandwidth", 289 | }, 290 | { 291 | icon: , 292 | text: "20GB Cloud Storage", 293 | }, 294 | { 295 | icon: , 296 | text: "Personal Help Support", 297 | }, 298 | { 299 | icon: , 300 | text: "Enterprise SLA", 301 | }, 302 | ], 303 | }, 304 | ] 305 | export const footer = [ 306 | { 307 | title: "LAYOUTS", 308 | text: [{ list: "Home Page" }, { list: "About Page" }, { list: "Service Page" }, { list: "Property Page" }, { list: "Contact Page" }, { list: "Single Blog" }], 309 | }, 310 | { 311 | title: "ALL SECTIONS", 312 | text: [{ list: "Headers" }, { list: "Features" }, { list: "Attractive" }, { list: "Testimonials" }, { list: "Videos" }, { list: "Footers" }], 313 | }, 314 | { 315 | title: "COMPANY", 316 | text: [{ list: "About" }, { list: "Blog" }, { list: "Pricing" }, { list: "Affiliate" }, { list: "Login" }, { list: "Changelog" }], 317 | }, 318 | ] 319 | -------------------------------------------------------------------------------- /src/components/home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Awards from "./awards/Awards" 3 | import Featured from "./featured/Featured" 4 | import Hero from "./hero/Hero" 5 | import Location from "./location/Location" 6 | import Price from "./price/Price" 7 | import Recent from "./recent/Recent" 8 | import Team from "./team/Team" 9 | 10 | const Home = () => { 11 | return ( 12 | <> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | } 23 | 24 | export default Home 25 | -------------------------------------------------------------------------------- /src/components/home/awards/Awards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import { awards } from "../../data/Data" 4 | import "./awards.css" 5 | 6 | const Awards = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 | {awards.map((val, index) => ( 15 |
16 |
17 | {val.icon} 18 |
19 |

{val.num}

20 |

{val.name}

21 |
22 | ))} 23 |
24 |
25 |
26 | 27 | ) 28 | } 29 | 30 | export default Awards 31 | -------------------------------------------------------------------------------- /src/components/home/awards/awards.css: -------------------------------------------------------------------------------- 1 | .awards { 2 | background-color: #122947; 3 | color: #fff; 4 | text-align: center; 5 | } 6 | .awards .heading { 7 | display: flex; 8 | flex-direction: column-reverse; 9 | } 10 | .awards .heading p { 11 | color: #27ae60; 12 | } 13 | .awards .heading h1 { 14 | color: #fff; 15 | font-size: 30px; 16 | font-weight: 400; 17 | } 18 | .awards .icon { 19 | width: 100px; 20 | height: 100px; 21 | line-height: 100px; 22 | margin: auto; 23 | margin-top: 50px; 24 | background: rgba(255, 255, 255, 0.1); 25 | border-radius: 4% 50%; 26 | font-size: 32px; 27 | color: #ffffff; 28 | } 29 | .awards h1 { 30 | font-size: 50px; 31 | } 32 | .awards p { 33 | color: grey; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/home/featured/Featured.css: -------------------------------------------------------------------------------- 1 | .featured .box { 2 | box-shadow: 0 0 20px 0 rgb(112 121 138 / 18%); 3 | border-radius: 6px; 4 | text-align: center; 5 | padding: 30px; 6 | cursor: pointer; 7 | } 8 | .featured img { 9 | width: 65px; 10 | height: 65px; 11 | margin: auto; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/home/featured/Featured.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import "./Featured.css" 4 | import FeaturedCard from "./FeaturedCard" 5 | 6 | const Featured = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Featured 20 | -------------------------------------------------------------------------------- /src/components/home/featured/FeaturedCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { featured } from "../../data/Data" 3 | 4 | const FeaturedCard = () => { 5 | return ( 6 | <> 7 |
8 | {featured.map((items, index) => ( 9 |
10 | 11 |

{items.name}

12 | 13 |
14 | ))} 15 |
16 | 17 | ) 18 | } 19 | 20 | export default FeaturedCard 21 | -------------------------------------------------------------------------------- /src/components/home/hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import "./hero.css" 4 | 5 | const Hero = () => { 6 | return ( 7 | <> 8 |
9 |
10 | 11 | 12 |
13 |
14 | City/Street 15 | 16 |
17 |
18 | Property Type 19 | 20 |
21 |
22 | Price Range 23 | 24 |
25 |
26 |

Advance Filter

27 |
28 | 31 |
32 |
33 |
34 | 35 | ) 36 | } 37 | 38 | export default Hero 39 | -------------------------------------------------------------------------------- /src/components/home/hero/hero.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | background-image: url("../../../../public/images/banner.png"); 3 | background-repeat: no-repeat; 4 | background-position: center; 5 | background-size: cover; 6 | height: 90vh; 7 | width: 100%; 8 | } 9 | .hero .container { 10 | padding-top: 15%; 11 | } 12 | .hero h1 { 13 | color: #fff; 14 | font-size: 60px; 15 | } 16 | .hero p { 17 | color: #fff; 18 | opacity: 0.8; 19 | } 20 | form { 21 | background-color: #fff; 22 | border-radius: 5px; 23 | margin-top: 50px; 24 | padding: 0 20px; 25 | } 26 | form input { 27 | padding: 10px; 28 | width: 100%; 29 | border: 1px solid rgba(128, 128, 128, 0.2); 30 | margin-top: 5px; 31 | border-radius: 5px; 32 | } 33 | form span { 34 | font-size: 14px; 35 | color: grey; 36 | } 37 | input::placeholder { 38 | font-size: 17px; 39 | color: black; 40 | } 41 | form .box { 42 | padding: 15px; 43 | border-left: 1px solid rgba(128, 128, 128, 0.2); 44 | } 45 | form .box:nth-child(1) { 46 | border-left: none; 47 | } 48 | form h4 { 49 | font-weight: 500; 50 | } 51 | @media screen and (max-width: 800px) { 52 | .hero .container { 53 | padding-top: 30%; 54 | } 55 | form { 56 | display: flex; 57 | flex-wrap: wrap; 58 | } 59 | form .box { 60 | border-left: none; 61 | } 62 | form input { 63 | width: 100%; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/home/location/Location.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import { location } from "../../data/Data" 4 | import "./style.css" 5 | 6 | const Location = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 | {location.map((item, index) => ( 15 |
16 | 17 |
18 |
{item.name}
19 |

20 | 21 | 22 | 23 |

24 |
25 |
26 | ))} 27 |
28 |
29 |
30 | 31 | ) 32 | } 33 | 34 | export default Location 35 | -------------------------------------------------------------------------------- /src/components/home/location/style.css: -------------------------------------------------------------------------------- 1 | .location .box { 2 | position: relative; 3 | border-radius: 5px; 4 | } 5 | .location img { 6 | border-radius: 5px; 7 | } 8 | .location .overlay { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | flex-direction: column; 16 | height: 250px; 17 | width: 100%; 18 | color: #fff; 19 | z-index: 222; 20 | } 21 | .location .overlay::after { 22 | content: ""; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 340px; 27 | height: 210px; 28 | background: rgb(15 28 47 / 30%); 29 | z-index: -1; 30 | margin: 20px; 31 | border-radius: 5px; 32 | } 33 | .location h5 { 34 | font-size: 18px; 35 | font-weight: 500; 36 | } 37 | .location label { 38 | color: #fff; 39 | margin-right: 20px; 40 | opacity: 0.8; 41 | } 42 | @media screen and (max-width: 800px) { 43 | .location .overlay::after { 44 | width: 280px; 45 | height: 170px; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/home/price/Price.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import "./price.css" 4 | import PriceCard from "./PriceCard" 5 | 6 | const Price = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Price 20 | -------------------------------------------------------------------------------- /src/components/home/price/PriceCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { price } from "../../data/Data" 3 | 4 | const PriceCard = () => { 5 | return ( 6 | <> 7 |
8 | {price.map((item, index) => ( 9 |
10 |
11 | 12 |
13 |

{item.plan}

14 |

15 | $ 16 | {item.price} 17 |

18 |

{item.ptext}

19 | 20 |
    21 | {item.list.map((val) => { 22 | const { icon, text, change } = val 23 | return ( 24 |
  • 25 | 33 |

    {text}

    34 |
    • 35 | ) 36 | })} 37 |
38 | 47 |
48 | ))} 49 |
50 | 51 | ) 52 | } 53 | 54 | export default PriceCard 55 | -------------------------------------------------------------------------------- /src/components/home/price/price.css: -------------------------------------------------------------------------------- 1 | .price { 2 | text-align: center; 3 | } 4 | .price .content .box { 5 | width: 31.5%; 6 | padding: 30px; 7 | border-radius: 10px; 8 | } 9 | .price button { 10 | margin-bottom: 20px; 11 | } 12 | .price .box:nth-child(1) .topbtn button, 13 | .price .box:nth-child(3) .topbtn button { 14 | display: none; 15 | } 16 | .price h3 { 17 | font-size: 22px; 18 | } 19 | .price h1 { 20 | font-size: 60px; 21 | } 22 | .price h1 span { 23 | font-size: 30px; 24 | font-weight: 500; 25 | } 26 | .price ul { 27 | margin-top: 40px; 28 | } 29 | .price ul li { 30 | display: flex; 31 | margin-bottom: 20px; 32 | } 33 | .price label { 34 | width: 30px; 35 | height: 30px; 36 | line-height: 30px; 37 | border-radius: 50%; 38 | margin-right: 20px; 39 | } 40 | 41 | .price .btn5 { 42 | width: 100%; 43 | } 44 | @media screen and (max-width: 800px) { 45 | .price .content { 46 | flex-direction: column; 47 | } 48 | 49 | .price .content .box { 50 | width: 100%; 51 | padding: 30px; 52 | border-radius: 10px; 53 | margin-bottom: 50px; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/home/recent/Recent.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import "./recent.css" 4 | import RecentCard from "./RecentCard" 5 | 6 | const Recent = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Recent 20 | -------------------------------------------------------------------------------- /src/components/home/recent/RecentCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { list } from "../../data/Data" 3 | 4 | const RecentCard = () => { 5 | return ( 6 | <> 7 |
8 | {list.map((val, index) => { 9 | const { cover, category, location, name, price, type } = val 10 | return ( 11 |
12 |
13 | 14 |
15 |
16 |
17 | {category} 18 | 19 |
20 |

{name}

21 |

22 | {location} 23 |

24 |
25 |
26 |
27 | 28 |
29 | {type} 30 |
31 |
32 | ) 33 | })} 34 |
35 | 36 | ) 37 | } 38 | 39 | export default RecentCard 40 | -------------------------------------------------------------------------------- /src/components/home/recent/recent.css: -------------------------------------------------------------------------------- 1 | .recent .text { 2 | padding: 30px; 3 | } 4 | .recent .category span { 5 | padding: 4px 15px; 6 | border-radius: 2px; 7 | font-weight: 600; 8 | font-size: 13px; 9 | display: inline-block; 10 | } 11 | .recent .category i { 12 | font-size: 20px; 13 | color: #bec7d8; 14 | } 15 | .recent p { 16 | color: #72809d; 17 | } 18 | .recent .button { 19 | border-top: 1px solid #e4e8f3; 20 | padding: 10px 30px; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/home/team/Team.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Heading from "../../common/Heading" 3 | import { team } from "../../data/Data" 4 | import "./team.css" 5 | 6 | const Team = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 | {team.map((val, index) => ( 15 |
16 | 17 |
18 |
19 | 20 | 21 |
22 | 23 | 24 |

{val.name}

25 | 26 |
    27 | {val.icon.map((icon, index) => ( 28 |
  • {icon}
    • 29 | ))} 30 |
31 |
32 | 36 | 39 |
40 |
41 |
42 | ))} 43 |
44 |
45 |
46 | 47 | ) 48 | } 49 | 50 | export default Team 51 | -------------------------------------------------------------------------------- /src/components/home/team/team.css: -------------------------------------------------------------------------------- 1 | .team .box { 2 | background: #ffffff; 3 | border-radius: 6px; 4 | border: 1px solid rgb(62 28 131 / 10%); 5 | padding: 2rem; 6 | transition: 0.5s; 7 | } 8 | .team .box:hover { 9 | box-shadow: 0 0 20px 0 rgb(112 121 138 / 18%); 10 | cursor: pointer; 11 | } 12 | .team .details { 13 | text-align: center; 14 | margin-top: 30px; 15 | } 16 | .team .img { 17 | width: 90px; 18 | height: 90px; 19 | margin: auto; 20 | position: relative; 21 | } 22 | .team img { 23 | width: 90px; 24 | height: 90px; 25 | border-radius: 50%; 26 | } 27 | .team .img i { 28 | color: #108be7; 29 | font-size: 17px; 30 | position: absolute; 31 | top: 35px; 32 | right: -10px; 33 | } 34 | .team .img::after { 35 | content: ""; 36 | position: absolute; 37 | top: -15px; 38 | left: -15px; 39 | width: 110px; 40 | height: 110px; 41 | border: 5px solid #edf0f5; 42 | border-radius: 50%; 43 | } 44 | .team label { 45 | display: inline-block; 46 | margin-top: 20px; 47 | } 48 | .team i { 49 | color: grey; 50 | margin-right: 5px; 51 | } 52 | .team ul { 53 | display: inline-block; 54 | margin-top: 10px; 55 | } 56 | .team ul li { 57 | display: inline-block; 58 | width: 40px; 59 | height: 40px; 60 | line-height: 40px; 61 | align-items: center; 62 | background-color: #f4f5f7; 63 | border-radius: 50%; 64 | margin: 5px; 65 | } 66 | .team .button { 67 | margin-top: 20px; 68 | } 69 | .team .button i { 70 | color: white; 71 | font-size: 20px; 72 | } 73 | -------------------------------------------------------------------------------- /src/components/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/src/components/images/about.jpg -------------------------------------------------------------------------------- /src/components/images/pricing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/src/components/images/pricing.jpg -------------------------------------------------------------------------------- /src/components/images/services.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil9813/Real-estate-website/5803ce8169cef95a8f4027db4035b739f2b0205a/src/components/images/services.jpg -------------------------------------------------------------------------------- /src/components/pages/Pages.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Header from "../common/header/Header" 3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom" 4 | import Home from "../home/Home" 5 | import Footer from "../common/footer/Footer" 6 | import About from "../about/About" 7 | import Pricing from "../pricing/Pricing" 8 | import Blog from "../blog/Blog" 9 | import Services from "../services/Services" 10 | import Contact from "../contact/Contact" 11 | 12 | const Pages = () => { 13 | return ( 14 | <> 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |