WoningVrij - Wonen Zonder Hypotheek

WoningVrij is a modern, responsive landing page for a fictional housing service that offers homes without traditional mortgages or BKR checks. The website showcases a unique non-mortgage model, available properties, locations, and explains the process to potential buyers.

🌟 Features

• Modern Design: Clean, professional UI using a "gold & dark" color scheme.
• Responsive Layout: Fully responsive design that works seamlessly on desktops, tablets, and mobile devices.
• Interactive Elements:
  • Parallax Effects: Smooth parallax scrolling for hero and feature sections.
  • Scroll Animations: Elements fade in as you scroll down the page.
  • Sticky Header: Navigation bar stays accessible while scrolling.
  • Mobile Navigation: Hamburger menu for mobile devices.
  • FAQ Accordion: Expandable/collapsible questions and answers.
  • Horizontal Scroll: Touch-friendly horizontal scrolling for location cards.
• Smooth Navigation: Smooth scrolling to anchor links.

🛠️ Technologies Used

• HTML5: Semantic markup.
• CSS3: Custom properties (variables), Flexbox, Grid, and media queries for responsiveness.
• JavaScript (ES6+): Vanilla JavaScript for interactivity (no external frameworks required).
• Google Fonts: 'Inter' for body text and 'Poppins' for headings.

🚀 Getting Started

Prerequisites

You need a modern web browser to view the website. No build tools or package managers are strictly required to run the static files.

Installation & Running

1. Clone the repository:

   git clone https://github.com/yourusername/woningvrij.git
   cd woningvrij

2. Open the website:

   • Simply open index.html in your web browser.
   • OR for the best experience (especially for avoiding CORS issues with some assets locally), use a local development server.

   If you have Python installed:

   # Python 3
   python -m http.server 8080

   Then visit http://localhost:8080 in your browser.

📂 Project Structure

WoningVrijInzicht/
├── index.html          # Main HTML structure
├── style.css           # Global styles and responsive design
├── script.js           # Interactive functionality (scroll, parallax, nav)
├── attached_assets/    # Images and other assets
│   └── ...
└── README.md           # Project documentation

🎨 Design System

• Primary Colors:
  • Gold (#d4af37)
  • Black (#111111)
  • White (#ffffff)
• Typography:
  • Headings: Poppins (Weights: 600, 700)
  • Body: Inter (Weights: 300, 400)

📸 Assets

Images used in this project are sourced from Unsplash and local assets.

📄 License

This project is for demonstration purposes.