Challenge Overview
Final Submission Guidelines
Project Background
We are in the processing of updating the Topcoder Marketing website to have a fresh look and updated structure.
Keep in mind that the website will be created using Wordpress with the new Gutenberg editor. Each section of the page should be treated as “block” and should be created not dependent on its page.
Technology Stack
- HTML
- SCSS
- Javascript
Detailed Requirements
As part of this challenge, you need to create the responsive UI Prototype of the home page using HTML5/SCSS/JS.
MarvelApp project link will be provided in the challenge forum.
Overall Requirements
-
Each block (section of the page) should be created not dependent on its page. This means that if we want to create another page and include/add these blocks into that page in any order, they should work fine.
-
Build the home page (both desktop and mobile) based on the provided design
-
The pages have a fair amount of animation and interactive features. Make sure you view the animation notes and references to better understand the overall animation feel that we are trying to capture.
Blocks Requirements
-
Container block
-
Each section of the page will use this block.
-
This block serves as the container of all other blocks, including grids and layouts
-
The design is built on a 1280px wide, 12 column grid system with a 20px gutter
-
You can show the grid overlay in marvel when viewing handoff data.
-
-
Some of this block will have an option to have a curve end(s).
-
-
Homepage Hero - Video block
-
This video block will consist of 2 columns, 1 for text copy and the other for video.
-
The image thumb of the video should be implemented using SVG masking.
-
The gradient color should be implemented as an overlay.
-
When the user clicks the video thumb, it will morph the shape and it will launch a modal with the video it. See “Hero Video - Expanded” screen in the MarvelApp.
-
-
Card block
-
This is the “Ready to start a project?” and “have a complex project?” blocks.
-
In the mobile layout, the whole card should be clickable.
-
Make sure this card block can be put in any column and will still work fine.
-
-
Tabs block
-
The tab part can be seen below the “Our Talent, Your Success” section.
-
The detailed description can be seen in the MarvelApp notes.
-
-
Call to Action block
-
An example of this block is the “MAKE THE GIG ECONOMY…” section.
-
-
Small Call to Action block
-
An example of this block is the “Ready to go?” section.
-
-
Customers block
-
This is the “Our Customers, Their Success” section.
-
The cards that show only logo (ex. Ferguson and Comcast) will be just links with subtle color shifts on hover.
-
Targeted Devices
-
Desktop
-
Mobile
Animation Notes
-
Animation plays a big part in the new Topcoder brand and look & feel
-
We want the movements of the elements and interactive pieces to have a certain feeling
-
As you can see in the designs, the overall look and designs use a lot of organic shapes and white space. The elements on the page flow nicely as you scroll down.
-
We want to capture that same "flowing" and "organic" feeling in the animations as well
-
The animation style should feel organic and natural, not jumpy and glitchy with fast movements. Think about using easing in and out of movements
-
Organic shapes should morph and evolve in their overall shape, not stay static and rigid. Think of things like a lava lamp or amebas. Organic shapes that slowly change shape and morph/ evolve as they move.
-
We've included animation notes in Marvel within the comments section of specific things that should be interactive and how the movements should happen and when they should happen. We want you to explore the best way to make those movements fit into the overall theme and look as described above.
Important Notes
-
Use SCSS variables instead of hardcoding colors/paddings etc.
-
Use jQuery or any other library is allowed.
-
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 source code in a zip file.