Web landing page template with dynamic page elements
$100-500 USD
Cancelled
Posted almost 13 years ago
$100-500 USD
Paid on delivery
We are seeking to build a web site landing page template that we can re-use for a variety of different marketing campaigns. The core structure of the page will be the same for each marketing campaign, but we will adjust various elements for each campaign, such as:
* The web site copy
* Web site images
* Menu and section headings
* Fonts and colors
* Etc.
For this project, we are looking for someone to build a single generic version of landing page, which we will then customize by modifying the copy, adjusting the stylesheets, and changing the images.
The model for our landing page is the landing page now available at BankSimple ([login to view URL]). The BankSimple landing page has a number of features that we want to emulate:
* Fixed navigation menu at the top of the page
* Automatic smooth scrolling to subsections within the page
* Subsections that contain carousels that fade smoothly between different panels of information
* Ajax-based sign-up form that captures an email address and other elements without refreshing the page
Please note that we are not seeking to duplicate this page exactly. There are a number of elements that aren't important to us, such as the keyboard navigation or the Canvas element with the dynamic pattern. More details are provided in the advanced description section.
The output of the project will be a set of html, css, and javascript files that we can modify for different marketing campaigns. The code should of course be well-formed, compact, and should work in the following browsers:
* IE 6+
* Firefox 3.6+
* Chrome 11+
* Safari 5+
## Deliverables
## UPDATE
I added a zipped up set of files that contain the basic page and file structure (attached). However, the dynamic elements don't work and need to be implemented.
## TECHNICAL DETAILS
As noted, we would like to emulate several of the features of the BankSimple landing page. BankSimple has placed some of their Javascript in the public domain. They're implementation is built on top of the Mootools Javascript framework:
* [login to view URL]
* [login to view URL]
* [login to view URL]
Using these publicly available libraries will likely reduce time and cost.
The delivered code should consist of static HTML, css, and Javascript files. With the exception of the email capture tool, no dynamic server-side code should be required. A logo is attached.
## TOP LEVEL NAVIGATION
There are several requirements for the top-level navigation:
* Top-level nav remains fixed on the page when the user scrolls
* Clicking a top-level link causes the browser to scroll to the relevant within page subsection
* The page automatically detects when the user has scrolled to a new subsection and applies a highlighted style to the corresponding link
## SUBSECTION CAROUSEL
Subsections within the landing page can contain arbitrary HTML, but one subsection type that we want to implement is a "carousel." A carousel consists of a set of navigational elements, each linked to a different panel of content. Only one panel is visible at a time, and clicking on a navigational element causes its associated panel to be made visible.
As in the BankSimple landing page, navigational elements should be arranged horizontally, and their width should be adjustable so that the number of navigational elements can differ between subsections. Navigational elements should be richly structured, containing arbitrary HTML. The currently active navigational element should have a highlighted style applied to it (and all others should have a default style). Hovering the mouse over a navigational element should cause a hover style to be applied to it.
The content panels associated with each navigational element should be able to contain arbitrary HTML. Transitions between panels should be via a quick fade.
## EMAIL CAPTURE FORM
The email capture form should have the following properties:
* Each form field can have a validator attached, and users can only submit when all the fields contain valid content
* Two types of validation rules are possible: checking that a field isn't blank (when trimmed of white space) and checking that it contains a correctly formatted email address (when trimmed of white space).
* Fields that fail validation rules should have an error style applied to them
* Fields that fail validation should have an error message associated with them that can be displayed on screen
* After successful submission of the email form, the form should be transformed to a thank you message, without requiring a page refresh.
* Successful submission of the email should register as a conversion goal with Google analytics
* A piece of server-side code should capture the email address and any other submitted form data in a csv file. It should also capture a current time stamp. Our preferred server-side scripting language is PHP, although we are open to alternative suggestions.
## OTHER PAGE DETAILS
The BankSimple landing page obviously contains a number of other elements and design choices, such as the font and color treatments of heading and subheadings, the placement of elements on the page, the numbers used to label subsections, etc. We will be applying our own styling to the pages on our site, so for the purposes of this project it is important that the HTML be cleanly formatted and contains appropriate classes and ids so that we can easily customize the styling.
Other page features, such as the keyboard navigation or the error images that appear in the email validation form, are not necessary to implement. In general, if we don't mention a feature in this project description, then we don't need it. If you have any questions about scope, please ask.