This website was created to highlight the ongoing issues with the european economy by showing an example of a
building project that despite being in one of the most expensive area's to buy still failed.

View website Here.

This project centered on a simple, responsive design that should be familiar and intuitive to the user. Set over four pages with various elements available to view on different screen sizes it should provide the user with a good UX!

Balsamiq was used to set out the general look and feel of the site and is available in this repository.

The navbar is set on all but one of the pages, and in this page a scroll to top button has been added to bring the user back to the navbar.

The opening page has a background image of the development with a text box overlay to the left which includes a link to more information about the area, and has a promotional video set to the right. The video doesn't render on mobile as it looked cluttered.

The second page has a background image of an aerial shot of the area, and in keeping with the first page a text box to the left and this time google maps to the right with a marker to point out the area. Hovering over the marker reveals an instruction to zoom in and look at the satellite image. The map doesn't render on mobile as it looked cluttered.

Page three has a similar layout of background image and navbar, but this time has full width scrolling overlay images of the development in a state of disrepair. There is sufficient padding between these images to view the set background image. Boxes of text have been added in this area giving the user some more detail. Amongst this text is a link to Wikipedia for more information. A scroll to top button has been applied to this page which appears after you scroll past the first page.

The final page returns to a similar layout as the first two which the user will be familiar with. A large text box which includes a final external link to a local property site to the left and an image to the right.

1. HTML5
2. CSS
3. JAVASCRIPT
4. BOOTSTRAP
5. GOOGLE MAPS
6. GITPOD
7. GITHUB

I have run testing on Chrome developer tools and on W3C Validator. It has been checked on these screen sizes and renders well on all.

1. Desktop
2. Laptop
3. Ipad
4. Iphone

It has been tested on

1. Google Chrome
2. Firefox
3. Safari

This site was created using GITPOD, stored in GITHUB, and deployed through GITHUB pages.

You can clone this project from this repository by,

1. Clicking on the "clone or download" button at the top right
2. Copy the URL
3. Change the current working directory to the location of your clone directory
4. Enter git clone and paste in the URL

All images taken and supplied by me with exception of:

1. front.jpg from: google images bristolpost.co.uk
2. Vista.jpg from: google images quintadolago.com
3. money.jpg from: google images exchangerates.org.uk

Video from The Keys/Birchview developers, via YouTube

Google maps