Skip to content
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
68 changes: 67 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,67 @@
# js-project-business-site
# 🏒 Dian Real Estate

Welcome to **Dian Real Estate** β€” a modern, interactive real estate platform where users can search, filter, and explore properties in Dubai. This project demonstrates responsive design, dynamic filtering, and interactive UI components like a burger menu and investment cards.

This project is live on [Netlify](https://your-live-link-here).

---

## πŸ”— Demo

Check out the live project here: [Dian Real Estate on Netlify](https://dian-eng.netlify.app/)

---

## πŸ“Έ Screenshot

![Dian Real Estate Screenshot](img/Screenshot-2025.png)

---

## πŸš€ Features

- πŸ” **Search properties** by type, district, and price
- 🏠 **Filter options**: Apartments, Villas, Penthouses, Duplexes, Offices
- πŸ™οΈ **District filter**: Quick selection of Dubai districts
- πŸ“± **Responsive design**: Works smoothly from mobile (320px) to desktop (1600px+)
- πŸ” **Responsive burger menu** for mobile devices

---

## πŸ“¦ File Structure

```
πŸ“‚ css/ # Stylesheets
πŸ“‚ img/ # Property images
πŸ“‚ js/ # JavaScript logic
πŸ“‚ sass/ # SASS files
β”‚
β”œβ”€β”€ πŸ“ abstracts/ # Variables, mixins, functions
β”œβ”€β”€ πŸ“ base/ # Base styles (reset, typography)
β”œβ”€β”€ πŸ“ cards/ # Card styles for properties
β”œβ”€β”€ πŸ“ components/ # Reusable UI components
β”œβ”€β”€ πŸ“ layout/ # Layout and grid styles
└── πŸ“ page/ # Page-specific styles
```

---

## 🧠 How It Works

1. Apply **filters by type, district, or price**.
2. The app dynamically renders **property cards** with images, price, district, and type.
3. The layout is fully **responsive**, adapting to all screen sizes.
4. **Burger menu** appears on mobile devices for smooth navigation.

---

## ❗ Important

- This project helped me **practice responsive design, DOM manipulation, and interactive UI components**.
- Users can explore Dubai real estate, filter properties, and save favorites.

---

## πŸ“„ License

This project is free for educational use.
Loading