website calendar and details display pages

This project received 1 bids from talented freelancers with an average bid price of $ USD.

Get free quotes for a project like this
Employer working
Skills Required
Project Budget
Total Bids
Project Description

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.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online