Topcoder Marketing 3.0 Company Pages UI Prototype Challenge

 

Technology Stack

• HTML
• JavaScript
• SCSS

Detailed Requirements

As part of this challenge, you need to use the provided UI Prototype to create the Company pages using HTML5/SCSS/JS.

Build the pages (both desktop and mobile) based on the provided design. Re-use existing styles and create a new one if they are not existing. Do implement also the transition animation when the user scrolls down the page.

Existing prototype code and MarvelApp project link will be provided in the challenge forum.

Page Requirements

Note: Headers (navigation and sub-navigation) will be just a static image. It is important to follow the correct spacing and typography.

1. About Topcoder page

• Use horizontal rule (hr) tag to the “wavy” separators

• Images should be treated as content and not as a background in CSS

• The icons (example: above the “1M+ Members”) are configurable and will be re-usable across many pages

  • Shapes can be changed

  • Background gradient color can be changed as well

  • The icon itself can be an image.

• In mobile, the “1M+ Members”, "Global Talent Network", and "Trusted by Top Orgs" section will be in carousel form.

• Other elements should be prototyped as in the design

2. Leadership page

• User image thumbs should be masked in SVG shape

• ���“Read Bio” links to the Leadership Details page

 

3. Leadership Details page

• ���User image thumb should be masked in SVG shape

• The circles below the paragraph are intended to be social media icons, a placeholder will be enough for this part
   

4. Partners page

• Create the page as per design

• “View Website” and the button below are dead links

���5. Events page

• Each event are collapsible/expandable like an accordion

• The icon chevron down expands the item

• Chevron up icon and the “Show Less” text triggers the collapse

• Multiple items can be in an expanded state at the same time

• The icons here can be set as background in CSS

 

6. Jobs page

• Use image for video thumb

  • When the user clicks on it, it will play the actual embedded video on the location of the thumb

  • In mobile, the embedded video should be played in a modal

  • User a video from here https://www.youtube.com/user/TopCoderInc

• The icons are also configurable just like what’s described in the “About Topcoder” page

  • In mobile, these group of icons will be in a carousel format

  • “Learn More” buttons links to the “Job Description” page

���7. Jobs Description page

• The form should be workable, except for its backend functionality

• The form in desktop should be sticky to always displayed on the right side as the user scrolls.

• The “Attach Resume” field/button should be able to browse and attach a file

• In mobile, there is an “Apply” button. When this is clicked, it will scroll down to the form below.

• Once the form is submitted, the form will be replaced by a “thank you” message. See https://marvelapp.com/6h0d145/screen/56451491/ for details.

 

Targeted Devices

• Desktop

• Mobile

Important Notes

• Use SCSS variables instead of hardcoding colors/paddings etc.

• Your code should be as clean, well-structured and well-documented as possible. The goal is to take your code and convert it into different forms (eg WordPress/React/Angular) to be able to use it in our various applications.

• Use a fluid layout.

 

What to Submit

• Submit your full source code in a zip file.