Design and code HTML5/CSS for single webpage to display home for sale

Closed Posted 7 years ago Paid on delivery
Closed Paid on delivery

You must have design/creative skills.

The first step will be to mock up a design for this single page.

Then, after design is approved, you may start with the HTML/CSS.

Single, very beautiful one page webpage to show a home for sale listing.

When a visitor looks at the page, they need to go WOW! This is cool!!

This should NOT be a traditional looking home for sale page.

Sample photos and text about home is attached.

You may use HTML5 animations, etc. It would be great for the photos and text to animate into place as the user scrolls down the page.

The page should NOT have a navigation menu (except maybe the photo gallery area will need one). The page will need to scroll vertically.

Page must be highly responsive in design.

Visitors to the page will most likely be on mobile, but can also be on a desktop computer.

Images need to fill screen vertically and horizontally, for all different screen sizes desktop computer and mobile (portrait and landscape).

It might be that only a handful of the best photos (front of house, kitchen, master bath, living room, maybe backyard…) are used in main design and all the photos are in the gallery area.

The photo gallery is NOT a separate page or popup – must be incorporated in design

There will need to be areas of descriptive text such as,

- Description of the home (a few paragraphs)

- Address

- Number of bedrooms, bathrooms, square footage, year built

- Price

Here are the sections of the page that are required, but I am open to suggestions.

1. Main image, typically front of home

2. Address text – this can be decorative. Likely only need street number, street name, city (maybe state)

3. Body – descriptive text – possibly 2 or 3 paragraphs

4. Details – limited details will display here. Number of bedrooms, bathrooms, square footage, year built

5. Price – user will have to click a button to view the price. When they click the button, the button will change into a form asking for name, email. When they submit this data, then the price will be displayed on the screen in place of the original button. The client side script should handle changing the “View Price” button into a form and then revealing the price. I will take care of server side script to collect the data

6. Photo Gallery – buttons or some type of navigation is ok for this section to scroll through photos

7. Video – some homes have video tours that are hosted on youtube or vimeo. We would show a photo with a play button on it

8. Map – link and image of Google Maps location of the home location

9. Contact info. Agent name and phone. Contact form where visitor can enter Name, Email, Phone and a Message. Also, company logo and descriptive paragraph about the company. I will take care of the server side script for this form to collect data. I just need the form design

CONCERNS and Other Design Suggestions

- The photos of the home will likely be hi-res and large filesize. The photos I sent are probably smallest file size they will ever be

- For the page to load nicely for end user experience (smooth scrolling, etc), the photos may have to load completely before user can scroll page

- So, we might want to show a “Loading…” animation and text immediately

- Also, can we program anything to first load photos at top of page? And subsequently load photos further down and that are in the photo gallery? I don’t know if this is possible or not, but would be nice.

- The first photo at the top of the page should be the front of the house. Maybe this photo loads first and then the address of the home animates in at the top or bottom of the photo. The photo needs to fill the entire screen as best as possible without stretching the image

- No images should be stretched. But, it is ok to dynamically crop them as the screen size varies

CSS Graphic Design HTML Website Design

Project ID: #13232833

About the project

23 proposals Remote project Active 6 years ago

23 freelancers are bidding on average $498 for this job

meet2amitvw

Let's discuss more about project to finalize the proper scope with estimated cost and time so ping me over the freelancer chat.....I will share some demo as well for recent works if you want to check. You can also c More

$721 USD in 10 days
(87 Reviews)
9.0
gazsmith09

Hi, I am a British developer and I specialise in what we call "sexiness" with JavaScript which is essentially animations, loaders etc. I'm acctually in the process of doing a website for an estate agent so it'll still More

$750 USD in 5 days
(2 Reviews)
2.1
TahirAli197

Hello dear, I'm especially familiar with multimedia industry. I would love to extend my experience to get your project in perfect format. Let me take this off your hands, please. I am strategic and goal orien More

$555 USD in 10 days
(1 Review)
2.5
nomananjum88

Dear Hiring Manager, I am applying today for this position which I saw listed on Freelancer. I am seeking better opportunities in long term job because I want to build a long term good relationship with my clients. I More

$477 USD in 4 days
(0 Reviews)
0.0
SirTalen

I have the perfect idea for what to create for your site. A design focused on the photos of the house with the information arranged to really compound the effect. Animations that add the page, not distract from the pho More

$555 USD in 10 days
(0 Reviews)
0.0
pramayue23x

I've worked as a front-end developer for 3 years, and for this project I will finish it for 9 days. so please accept me for this project.

$555 USD in 10 days
(0 Reviews)
0.0
bparseghian1991

A proposal has not yet been provided

$555 USD in 10 days
(0 Reviews)
0.0
janerose081

Hi! I'm a product designer working on app and web design at a well known startup in NYC. I'd be a great fit for this project because I merge both design and development skills into smooth, intuitive, and visually appea More

$500 USD in 10 days
(0 Reviews)
0.0