Challenge Overview
Welcome to the SunShot - Windowstreet Financial - Wordpress Responsive Theme Creation challenge!
The primary objective of this challenge is to create a responsive wordpress theme based on the provided storyboard design and requirements outlined in the Challenge Details section.
Final Submission Guidelines
General Requirements:
- Header and Footer navigations should utilize the built-in menu of wordpress
- Use Signika font family.
- Cascade Gotham font with Montserrat, so in your CSS font family declaration, Gotham should come first then followed by Montserrat.
- Page layout should be responsive, see “08 Mobile.psd” for guidelines in mobile view.
- All pages content should be editable in WP Admin.
- There are some images that should be considered as content, make sure they are not css backgrounds nor hard coded in the template.
Pages:
1. Homepage
- top right part is an image content, the text “Monthly Payments” and “Invest in Solar Loans” can be part of the image. You can use the Featured Image field or a custom field so that this image can be changed or updated in WP Admin.
- “Learn More?” section can utilize custom fields to enter the text, images, and links for “For Home Owner” and “For Endowments”.
- “For Home Owner” should be linked to “How it works - Home Owner”.
- “For Endowments” should be linked to “How it works - Endowments”.
2. How it works - Home Owner
- Top 3 images are content. Use custom field to upload each image.
- Bottom sections can be custom fields (WYSIWYG editor and Image file upload).
- Use form plugin for the bottom form section.
3. How it works - Endowments
- Top 3 images are content. Use custom field to upload each image.
- Bottom sections can be custom fields (WYSIWYG editor and Image file upload).
4. About
- This page will serve as a generic page template.
- Top image is a background but should utilize the Featured Image field.
- Our Team section should use custom fields to upload a person’s photo, name, and its position.
5. News
- These are posts from regular post type
- Each post title and “read more” text should be linked to the article details page.
- If a post has a Featured Image, it should be displayed as well.
- The article details page will be similar to this template except that it will take up the whole space to show the content.
6. Portal
- This page is out of scope for this challenge.
7. Other Pages
- “Home Owners - Success Stories” and “Homeowner FAQ” pages - use dummy text and use the same template as with the “How it works - Home Owner” page.
- “Endowments - Success Stories” and “Endowments FAQ” pages - use dummy text and use the same template as with the “How it works - Endowments” page.
- “Sundowment” - all pages under this can be similar to the pages of “Endowments”
- Press Release, Contact, Privacy Policy, and Terms & Condition are all generic pages, use dummy text to fill up their content.
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Safari & Chrome)
- iPhone (Safari & Chrome)
Wordpress:
- version 4.1.1
- Advance Custom Field is the recommended plugin for Custom Fields.
- Use Contact Form 7 plugin for the contact forms.
- Redux plugin in case you need to use theme options.
HTML5:
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3:
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap for this challenge.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
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.