Challenge Overview
Welcome to SunShot - RE-volv - Responsive Website Prototype Challenge! RE-volv is a solar energy crowdfunding platform. The platform allows individuals to donate to solar energy projects. RE-volv then re-invests the money the projects' saved by switching to solar into more solar energy projects.
For this challenge, you are going to create the Responsive HTML Prototype based on the provided storyboards with features and details outlined below.
As part of this challenge you will need to document all HTML/CSS/JavaScript code. We need clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the Responsive HTML prototype of this app by using industry standard best practices.
Overall Requirements
1. Layout
- Use the Bootstrap grid options.
- Storyboard with suffix “-NOTES” in the filename will serve as instruction reference and not to be treated as
2. Header
- Header will be in fixed position.
- Link logo to Home page.
- Link “Donate Now” button to Get Involved page.
- Link “Sign Up” to Sign Up page.
- Link “Sign In” to Sign In page.
3. Footer
- Link to their respective pages.
- Link “WHAT WE DO” to What We Do page.
- Link “GET INVOLVED” to Get Involved page.
- Other links will be dead links.
- Logo and social icons will be dead links.
4. Fonts
- Embed or link directly from Google.
5. Hover effects
- Apply uniformed hover effects on the buttons and links that are not mentioned below.
Page Requirements
The following are the page and functionalities required for this challenge:
1. Home
- See 1.0-Home-Desktop.jpg for reference.
- Scrolling down the page will have the sections content reveal animation effect. See this site for reference. Tutorial on how to create the effects can be found here. Reveal animations can be slide from bottom to top.
1.1. Header
- By default or when the page is not yet scrolled or when the page is scrolled up, the header will be in transparent background.
- When the page scrolled down with a certain pixel or about 15% of page height, the header will dock and stick to the top of the page with fixed position. Use your best judgement in determining how much pixel should be scrolled before making the header in fixed position. See 1.2-Home-StickyMenuSlideDown-Desktop-NOTES.jpg for reference.
- Use minimal animation/transition when docking/undocking the header. Refer to this site for reference.
1.2. Top Section
- This will be a carousel with infinite loop. This carousel will not auo move.
- The video background should be automatically played on page load. Use this video.
- Clicking the down arrows will animate scroll down to the next section. See the functionality in the reference site mentioned above.
1.3. Active Projects
- Thumbnails will be linked to Project Details page.
- Thumbnails should be image base <img> tag.
- Implement hover effect on the thumbnails. Normal thumbnail will have dark layer with 60% opacity, then when hovered the dark layer will be at 0% opacity.
- The round progress bar should reflect whatever value they will hold in HTML code.
1.4. Our Impacts
- On reveal of this section, the figure should be animated to show that they are counting.
- Animate or show counting from 0 to their final figure in about 5 or 6 seconds.
1.5. How it Works
- Embed a Youtube video in replacement for the video placeholder in the storyboard.
- Use this video https://youtu.be/eSADOAxjcPU
1.6. Testimonial
- Each thumbnail when mouse hover will reveal their corresponding testimonials.
- On mouse out, a testimonial details will not hide. It will be replaced or show another testimonial only when user hover on to another user thumbnail.
- Each thumbnail should be <img> based.
- Link “Start Your Own Project” button to Get Involved page.
1.7. Featured On
- This will have a carousel with infinite loop. This carousel will not auto move.
- Move only 1 logo at a time.
- Mouse hover effect on each logo will show colored version.
1.8. Newsletter
- Background should have simple parallax effect. This will be a small moving of background on scroll. See this site for reference.
2. About Us
- Refer to 2.0-AboutUs-Desktop.jpg
- “How It Works” button will open the “How It Works” modal.
- Implement tab section.
2.1. How It Works modal
- Refer to 2.2.1-AboutUs-LightboxButton-Desktop.jpg
- Clicking the “x” or outside the modal or pressing “Esc” key should close the modal.
- Embed a Youtube video in replacement for the video placeholder in the storyboard.
- Use this video https://youtu.be/eSADOAxjcPU
2.2. Tab section
- Content for “How We Do It” tab is shown in 2.3.2-AboutUs-TabbedContent-Desktop-NOTES.jpg
- Content for “How We’re Funded” tab is shown in 2.3.3-AboutUs-TabbedContent-Desktop-NOTES.jpg
- Content for “Get Involved” tab is shown in 2.3.4-AboutUs-TabbedContent-Desktop-NOTES.jpg. On this tab, all buttons will be dead links except for “Solar Ambassador” which will link to the “Solar Ambassador Program” page.
3. What We Do
- Refer to 3.0-WhatWeDo-Desktop.jpg
- All buttons will be dead links.
4. Get Involved
- Refer to 4.0-GetInvolved-Desktop.jpg
4.1. Active Projects
- This is the top section listing all the active projects.
- Thumbnails will be linked to Project Details page.
- Thumbnails should be image base <img> tag.
- Implement hover effect on the thumbnails. Normal thumbnail will have dark layer with 90% opacity, then when hovered the dark layer will be at 0% opacity.
- The round progress bar should reflect whatever value they will hold in HTML code.
- “Read More” button leads to Project Details page.
- Social icons are dead links.
4.2. Past Projects
- This will be a carousel with infinite loop. This carousel should not auto-move.
- Move 3 projects per slide.
- Thumbnails will be linked to Project Details page.
- Thumbnails should be image base <img> tag.
- Implement hover effect on the thumbnails. Normal thumbnail will have gradient style at the bottom as shown in the storyboard, then when hovered this gradient style will be hidden.
- The round progress bar should reflect whatever value they will hold in HTML code.
- “Read More” button leads to Project Details page.
5. Project Details
- Refer 5.0-ProjectDetails-Desktop.jpg
5.1. Top section
- The round progress bar should reflect whatever value they will hold in HTML code.
- Embed a Youtube video in replacement for the video placeholder in the storyboard.
- Use this video https://youtu.be/eSADOAxjcPU
6. Project Updates
- Social icons should be dead links.
6.1. Sidebar
- “I Want To Donate” button are dead links.
6.2. Venue
- Implement Google map.
6.3. Donors
- Use dummy content for Basic and Silver but should use the same format as with Gold tab.
- Make the Gold tab active by default as shown in the storyboard.
6.4. Solar Ambassador Program
- Refer to 6.0-SolarAmbasadorProgram-Desktop.jpg
- Use dead links for the buttons.
7. Partners
- Refer to 7.0-Partner-Desktop.jpg
7.1. Supporting Organizations
- “Visit Site” buttons and Logos are dead links.
- Pagination are dead links.
7.2. Sponsoring Organizations
- Implement carousel with infinite loop. This should be auto moving.
- Make the logos links, use dead link for now.
8. Blog
- Refer to 8.0-Blog-Desktop.jpg
- The Month and Category will have dropdown options. See 8.4-Blog-AJAXfilterSearch-Desktop-NOTES.jpg for reference. Use dummy options for Category.
- Implement playable video. See 8.1-Blog-VideoPostFormat-Desktop-NOTES.jpg for reference. You can use the same youtube video from the other page mentioned above.
- Implement slidable gallery. See 8.2-Blog-GalleryPostFormat-Desktop-NOTES.jpg
- Implement pagination by mouse hover. See 8.3-Blog-ScrollLoadBlog-Desktop-NOTES.jpg for reference. Simulate at least 1 page load.
- Read Button leads to Blog Details page.
- Social Icons will be dead links.
9. Blog Details
- Refer to 9.0-BlogDetails-Desktop.jpg
- Implement carousel on related blog section. See 9.1-BlogDetails-RelatedBlog-Desktop-NOTES.jpg for reference.
- Month, Category, and Search will have the same functionality outlined in Blog page.
- Read More button can link to this same page.
- Social Icons are dead links.
10. Sign Up
- Refer to 10-SignUp-Desktop.jpg
- Implement form validation
- Redirect to home page on successful sign up.
- Link “Log in here” text to Sign In page.
11. Sign In
- Refer to 11-SignIn-Desktop.jpg
- Implement form validation
- Redirect to home page on successful sign in.
- Link “create an account” text to Sign Up page.
- “you can reset it here” will be dead link.
Browser Compatibility:
- IE10+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad browsers
- iPhone browsers
HTML
- HTML should be valid HTML5 compliant.
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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
- CSS code should be valid level 3.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
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.
- Use jQuery library for this challenge.
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.
- Use separate or single images/sprites that will also support retina images/file for retina display.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.