website calendar and details display pages

We have a legacy product for displaying an Auction Calendar and Auction Display pages on corporate websites. This project is to build an updated frontend for this product that is modern, user-friendly, mobile-friendly, and conforms to HTML5 and current browser standards.

This project is strictly for the front-end of the system. All back-end coding will be done by the employer. The HTML, CSS, and jQuery are the deliverables required of the vworker employee. Content in the delivered version will be hard-coded for example and display. Employer will implement the data access components.

There are two components to the project:

Auction Calendar

Auction Details page

The attached .docx document contains details about each component. There are .jpg mock-ups of some of the functionality to be included in the project. Please review these documents prior to bidding.

First deliverables are JPG mock-ups of the calendar page and calendar pop-up. Project deadline will be extended as need to complete the requirements.

## Deliverables

**Auction Calendar listing display**

Loosely based on the design represented by **calendar_sample.jpg. **

Single photo to be displayed. The photo is stored in 400x300, so the image displayed on the calendar listing should have the same aspect ratio.

**Each Listing must prominently display the following information:**

Auction Title

Auction Date

Auction Location (Address, City, State, Zip)

Short auction description

Width of the calendar display should be adjustable based on the content region of the site, but should fit in a minimum 750px frame.

Clicking on the auction listing will direct the user to a seperate Auction Details page.

When the user hovers over one of the listings on the calendar, a jquery pop-up will display with additional details about the auction. The pop-up should contain all of the details included in the listing, along with a larger photo and more of the auction description text. *See the included **calendar\_popup\[url removed, login to view]** image. This is a very crude example of how the pop-up should look. Please use creative expertise to make an elegant and professional design.*

When the user moves the mouse off of the auction calendar, the pop-up will be hidden.


**Auction Details Page**

An auction details page lists all details, photos, and other information about an auction event. Here is a link to our existing legacy auction details page: <[url removed, login to view]>

The new details page will still incorporate the right-tabs, but they will be jquery driven and will not post the page. There will be a minimum of 4 tabs, but can be up to 12, so the display must be flexible.

**_Tab #1: Details_**

The details tab will contain the same information found on the example link:

Title, Date, Location

Horizontal scrolling photo display. (see notes below, and **[url removed, login to view]**)

Contact Information

Auction Description

Online Bidding



***Note about photo scroller****: Mousing over a photo should display a pop-up with a larger display of the photo. Clicking on any of the photos will take the user to the 'Pictures' tab.*

**_Tab #2: Pictures_**

The pictures tab should implement a jquery slideshow and large image display. See <[url removed, login to view]>.

**_Tab #3 Request Info_**

Clicking on this tab will result in a jquery modal pop-up contact form. The form will have fields for:


Company Name

Phone Number

Email Address


Message (large text box).

*The form will post the information back via ajax. The employer will handle the postback operation and back-end coding.*

**_Tab #4 Send to A friend_**

This tab will also display a jquery modal pop-up, similar to the #3 Request Info tab.

Your Name

Your Email Address

Your Friend's Name

Your Friend's Email Address:

Message (large text box).

*The form will post the information back via ajax. The employer will handle the postback operation and back-end coding.*

**Other tabs will be added as needed by employer. HTML code should be well formatted and indicate where new tabs are to be placed when needed.**


**Aspects to consider in the design:**

Content must be all HTML and jquery. No wordpress.

Layout and display must be mobile-compliant for use on touch-screen devices as well as desktop/laptop computers.

**Project notes:**

The project deadline will be extended as necessary in order to obtain the objectives. Budget will be adjusted if needed based on scope of work.

Skills: HTML, User Interface / IA

See more: www vworker com is, website user requirements document, website title design online, website of design photo, website design objectives, vworker's, vworker end, vworker company, vworker *, touch of modern, tab scope, slideshow with text to the website, online document review, online design of corporate image, online bidding website design, modern calendar design, location devices, location based devices,, legacy com, html photo design online, html & css design and build websites, html coding websites, html code website layout, html code for website layout

About the Employer:
( 10 reviews ) Sweet Home, United States

Project ID: #2675625