Challenge Summary
InsuranceTree.com is a new site for insurance agents to network and be part of a database for consumers. The application allows insurance agents to register an account. The data captured will be used to create a landing page that advertises the agent to consumers.
For this contest, you will be developing the HTML and CSS for the provided storyboards. The prototype should simulate the full functionality of the web-based application and match the provided storyboard design.
For this contest, you will be developing the HTML and CSS for the provided storyboards. The prototype should simulate the full functionality of the web-based application and match the provided storyboard design. If anything is unclear PLEASE ASK QUESTIONS IN THE FORUM! We are happy to help clarify any points that are not clear. Individual Page Requirements Account Information Page (1-Account_information.psd) - Use the following for "Secret Question" in each of the three designated drop downs. --- What is the name of your favorite pet? --- What is you high school's mascot? --- What is the name of the city you were born in? --- What is your favorite hobby? --- What is the name of the model of your favorite automobile? --- What is the street number for your first home? --- What is your favorite sports team? Agent Information Page (2-Agent_information.psd) - City drop down must be changed to a textbox - Zip drop down must be changed to a textbox - Populate the State drop down with the following states http://www.50states.com/abbreviations.htm Agency Information Page (3-Agency_information.psd) Additional Information Page (4-Additional_information.psd) Registration Success Page (5-Congratulations.psd) - Change the "Upgrade Now" button colors similar to the provided button_example.psd. The button should still have "Upgrade Now" for the text. My Account Page (6-My_Account.psd) - Under the Maintain Account section, you must simulate the changing of tabs --- For the Account Information Tab, reuse the information from 1-Account_informaiton.psd --- For the Agent Information Tab, reuse the information from 2-Agent_information.psd --- For the Agency Information Tab, reuse the information from 3-Agency_information.psd --- For the Additional Information Tab, reuse the information from 4-Additional_information.psd --- For the Credit Card Information, Information Tab, reuse the information from the bottom of 6-My_Account.psd - In the bottom right part of the screen under the "Credit Card Type" drop down, add a textbox and label for Credit Card Number. - Change the "Upgrade Now" button colors similar to the provided button_example.psd. The button should still have "Upgrade Now" for the text. Agent Profile Page (7-Agent_Profile_Page.psd) Registration Wizard Header - On the registration pages there is a wizard header with Account Information, Agent Information, Agency Information, and Additional Information. As the user moves from page to page, ONLY THE CURRENT PAGE SHOULD BE HIGLIGHTED IN THE WIZARD HEADER. This needs to be updated. The storyboards are incorrect for this behavior. Site Index - Each storyboard has a "Site Index" in the top right of the page. For this contest, all you need to do is provide it on your page. You do not need to concern yourself with its functionality. Notes: - Keep in mind as you code your pages the client wants the ability to easily brand the site with new colors, headers, and footers. Your site must have the ability to be skinned easily. HTML/CSS Guidelines Your HTML should be structured so that there is a common structure for each page with common headers and footers. The content specific to each page will be inserted into a common section of the page template. The following guidelines will improve your changes of success. 1. Your HTML code must be XHTML 1.0 Strict compliant 2. Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. Validate your code against this link http://validator.w3.org/ 3. Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). 4. Proper use of structural CSS to lay out your page is strongly encouraged. 5. No inline CSS styles - all styles must be placed in an external stylesheet. 6. Use semantically correct tags - use H tags for headers etc 7. Use strong and em tags instead of bold and italic tags 8. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent 9. Label all CSS, Javascript, or HTML *hacks* with explanations so others will understand. 10. Only use table tags for tables of data/information and not for page layout. 11. Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. 12. Your pages should be Search Engine Optimization (SEO) friendly. Please consider good code semantics. JavaScript All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are allowed to use the jQuery javascript library for this contest. Judging Criteria Your submission will be judged on the following: - How closely the prototype matches the provided storyboards - How well items are styled that are not provided in the storyboards - Cleanliness and organization of source code Preview Image Your preview image should be a screenshot of one page of your choice with no added effects or skewing.
Entries must be your original work, and must not infringe on the copyright or licenses of others. Stock art, clip art, templates and other design elements from other sources are prohibited unless specifically permitted here in the Contest Details.
For this contest, you will be developing the HTML and CSS for the provided storyboards. The prototype should simulate the full functionality of the web-based application and match the provided storyboard design. If anything is unclear PLEASE ASK QUESTIONS IN THE FORUM! We are happy to help clarify any points that are not clear. Individual Page Requirements Account Information Page (1-Account_information.psd) - Use the following for "Secret Question" in each of the three designated drop downs. --- What is the name of your favorite pet? --- What is you high school's mascot? --- What is the name of the city you were born in? --- What is your favorite hobby? --- What is the name of the model of your favorite automobile? --- What is the street number for your first home? --- What is your favorite sports team? Agent Information Page (2-Agent_information.psd) - City drop down must be changed to a textbox - Zip drop down must be changed to a textbox - Populate the State drop down with the following states http://www.50states.com/abbreviations.htm Agency Information Page (3-Agency_information.psd) Additional Information Page (4-Additional_information.psd) Registration Success Page (5-Congratulations.psd) - Change the "Upgrade Now" button colors similar to the provided button_example.psd. The button should still have "Upgrade Now" for the text. My Account Page (6-My_Account.psd) - Under the Maintain Account section, you must simulate the changing of tabs --- For the Account Information Tab, reuse the information from 1-Account_informaiton.psd --- For the Agent Information Tab, reuse the information from 2-Agent_information.psd --- For the Agency Information Tab, reuse the information from 3-Agency_information.psd --- For the Additional Information Tab, reuse the information from 4-Additional_information.psd --- For the Credit Card Information, Information Tab, reuse the information from the bottom of 6-My_Account.psd - In the bottom right part of the screen under the "Credit Card Type" drop down, add a textbox and label for Credit Card Number. - Change the "Upgrade Now" button colors similar to the provided button_example.psd. The button should still have "Upgrade Now" for the text. Agent Profile Page (7-Agent_Profile_Page.psd) Registration Wizard Header - On the registration pages there is a wizard header with Account Information, Agent Information, Agency Information, and Additional Information. As the user moves from page to page, ONLY THE CURRENT PAGE SHOULD BE HIGLIGHTED IN THE WIZARD HEADER. This needs to be updated. The storyboards are incorrect for this behavior. Site Index - Each storyboard has a "Site Index" in the top right of the page. For this contest, all you need to do is provide it on your page. You do not need to concern yourself with its functionality. Notes: - Keep in mind as you code your pages the client wants the ability to easily brand the site with new colors, headers, and footers. Your site must have the ability to be skinned easily. HTML/CSS Guidelines Your HTML should be structured so that there is a common structure for each page with common headers and footers. The content specific to each page will be inserted into a common section of the page template. The following guidelines will improve your changes of success. 1. Your HTML code must be XHTML 1.0 Strict compliant 2. Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. Validate your code against this link http://validator.w3.org/ 3. Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). 4. Proper use of structural CSS to lay out your page is strongly encouraged. 5. No inline CSS styles - all styles must be placed in an external stylesheet. 6. Use semantically correct tags - use H tags for headers etc 7. Use strong and em tags instead of bold and italic tags 8. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent 9. Label all CSS, Javascript, or HTML *hacks* with explanations so others will understand. 10. Only use table tags for tables of data/information and not for page layout. 11. Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. 12. Your pages should be Search Engine Optimization (SEO) friendly. Please consider good code semantics. JavaScript All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are allowed to use the jQuery javascript library for this contest. Judging Criteria Your submission will be judged on the following: - How closely the prototype matches the provided storyboards - How well items are styled that are not provided in the storyboards - Cleanliness and organization of source code Preview Image Your preview image should be a screenshot of one page of your choice with no added effects or skewing.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.