Challenge Overview
Welcome to the Deloitte Pixel™ - FAST (96 HOURS) - Anti-Corruption Education and Commitment Responsive Prototype Challenge! The goal of this challenge is to build a prototype based on the provided storyboard. Keep in mind in when creating the prototype that the end product will be converted into a WordPress Theme.
The site will be launched on December 1st at the international Anti-Corruption Conference (IACC) and the timeline for this challenge is extremely tight.
Jump in and ask questions now!
- Logo should be image tag. Ideally, it should be similar to WordPress custom logo markup. Example output is like this:
- Two columns layout in Desktop view should use CSS3 Multiple Columns (column-count).
- Use CSS3 gradients on the button background colors and not image background.
- Implement header navigation across all pages, the nav item under the "Take Action" pull down nav leads to Take Action Detail page.
- Implement the search action UI functionality. See 07_Search_Action.psd and 11.png for reference.
Font Source:
- Lato https://www.fontsquirrel.com/fonts/lato
- Oswald https://www.fontsquirrel.com/fonts/oswald
- Lucida Bright - replace this with Georgia web font
Top section
- Learn More Now button leads to What is BOT (Beneficial Ownership Transparency) page.
What is Beneficial Ownership section
- Read More button leads to What is BOT page.
- Watch Video button will launch a player inside a modal. Open Desktop's 01_Homepage.psd and show the "Video Popup" layer to see the style. Please note that we are going to use Youtube video.
Take Action section
- Icons should be image tag.
- Action button leads to Take Action page outlined below.
Map section
- This is just a static image.
News Update section
- Implement carousel, the News Update title is not part of the carousel.
Keep Me Updated section
- Implement the UI, no action or functionality required.
Footer section
- Brand logos should be image tag.
2. What is BOT page
Business Case for BOT tab
- Action button leads to Take Action page.
Global Action on BOT tab
- The Timeline part is a slider that when slide it will reflect the data of the selected month-year.
- Action button leads to Take Action page.
- Clicking left/right arrow from the Government Action on BOT section will increase/decrease Month/Year.
- The Map visualization is just a static image.
Issues Facing BOT tab
- Action button leads to Take Action page.
Mobile Device
- Read More button will expand the content. The Less More button will collapse the content to its original form.
- The tabs are shown as collapsible section in this storyboard.
3. Take Action page
- Icons should be image tag.
- Action buttons leads to Take Action Detail page.
4. Take Action Detail page
- Commit Support buttons leads to Commit Support page.
- Case Studies are tabs
- Resources Titles and category labels in the right sidebar are dead links.
5. Commit Support page
- As per storyboard. All fields and dropdowns should be working including the "clear" function in Message field.
- Submit button will show the Congratulation modal message.
6. About Us
- Brand logos should be image tag.
- Contact form section column layout should NOT use the CSS3 column-count instruction above.
7. Resources
- This is like a blog type layout
- Image thumbnails should be image tag.
- Titles, category labels, and pagination are dead links.
- Search dropdown to select category, showing of selected category, and removing categories should be working. The actual search functionality is out of scope.
- 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.
CSS
- You are allowed to use SASS or LESS CSS Pre-Processor.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Mobile Browsers
- Tablet Browsers
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The site will be launched on December 1st at the international Anti-Corruption Conference (IACC) and the timeline for this challenge is extremely tight.
Jump in and ask questions now!
Final Submission Guidelines
Create the following pages based on the provided storyboards and details outlined below.Important and Overall Rules:
- The provided storyboards are for Mobile and Desktop layouts. For tablet portrait layout, use the mobile storyboard. For tablet landscape layout, use the desktop storyboard.- Logo should be image tag. Ideally, it should be similar to WordPress custom logo markup. Example output is like this:
<a href="./index.html" class="custom-logo-link" rel="home" itemprop="url">
<img width="194" height="28" src="path/to/logo.png" class="custom-logo" alt="logo">
</a>
- Do not put class names on p tags, wrap them in div tag and use nth child or nth-of-type to style the p tag respectively.- Two columns layout in Desktop view should use CSS3 Multiple Columns (column-count).
- Use CSS3 gradients on the button background colors and not image background.
- Implement header navigation across all pages, the nav item under the "Take Action" pull down nav leads to Take Action Detail page.
- Implement the search action UI functionality. See 07_Search_Action.psd and 11.png for reference.
Font Source:
- Lato https://www.fontsquirrel.com/fonts/lato
- Oswald https://www.fontsquirrel.com/fonts/oswald
- Lucida Bright - replace this with Georgia web font
Required Pages:
1. Home pageTop section
- Learn More Now button leads to What is BOT (Beneficial Ownership Transparency) page.
What is Beneficial Ownership section
- Read More button leads to What is BOT page.
- Watch Video button will launch a player inside a modal. Open Desktop's 01_Homepage.psd and show the "Video Popup" layer to see the style. Please note that we are going to use Youtube video.
Take Action section
- Icons should be image tag.
- Action button leads to Take Action page outlined below.
Map section
- This is just a static image.
News Update section
- Implement carousel, the News Update title is not part of the carousel.
Keep Me Updated section
- Implement the UI, no action or functionality required.
Footer section
- Brand logos should be image tag.
2. What is BOT page
Business Case for BOT tab
- Action button leads to Take Action page.
Global Action on BOT tab
- The Timeline part is a slider that when slide it will reflect the data of the selected month-year.
- Action button leads to Take Action page.
- Clicking left/right arrow from the Government Action on BOT section will increase/decrease Month/Year.
- The Map visualization is just a static image.
Issues Facing BOT tab
- Action button leads to Take Action page.
Mobile Device
- Read More button will expand the content. The Less More button will collapse the content to its original form.
- The tabs are shown as collapsible section in this storyboard.
3. Take Action page
- Icons should be image tag.
- Action buttons leads to Take Action Detail page.
4. Take Action Detail page
- Commit Support buttons leads to Commit Support page.
- Case Studies are tabs
- Resources Titles and category labels in the right sidebar are dead links.
5. Commit Support page
- As per storyboard. All fields and dropdowns should be working including the "clear" function in Message field.
- Submit button will show the Congratulation modal message.
6. About Us
- Brand logos should be image tag.
- Contact form section column layout should NOT use the CSS3 column-count instruction above.
7. Resources
- This is like a blog type layout
- Image thumbnails should be image tag.
- Titles, category labels, and pagination are dead links.
- Search dropdown to select category, showing of selected category, and removing categories should be working. The actual search functionality is out of scope.
Code Requirements
HTML / 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.
CSS
- You are allowed to use SASS or LESS CSS Pre-Processor.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Mobile Browsers
- Tablet Browsers
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser