HNDRX Webflow Dev Challenge

Tasks

Below are the specific tasks you need to complete (tip: read all tasks first, then start building). Please refer to the already built site for reference on how everything should look and work: Click here!

1. Blog Post Collection List

• Add a collection list to the 'posts_list-wrapper' element and rebuild the design of our blog posts.
• Limit the posts to 6 per page.
• Display each post's categories and authors.
• Use the CMS Collection Lists that are already in the project.

2. Footer Reveal on Scroll

• Make the footer reveal on scroll.

3. Contact Form in Footer

• Add a contact form to the footer with the following fields: Name, Email, Staging URL, and Read-only link URL.
• Name and Email input fields should be in the same row and stacked on mobile portrait.
• Make all fields required.

4. Mobile Portrait Footer Display

• Make the white box of the footer mobile responsive.

5. Navigation Button Anchor Link

• Add an anchor link to the navigation's 'Submit Challenge' button and link it to the footer section.

6. Footer Section Component

• Turn the footer section into a component.
• Replace the current footer section in the post template page with the new component.
• On the post template page, change the headline to "Submit your application now!" (keep the headline on the other page as is).

7. Sticky Content Sidebar

• On the post template page, make the 'content_sidebar' element sticky when it comes towards the top while scrolling.

8. Finsweet's Client-First Approach

• Implement Finsweet's Client-First approach in all tasks where applicable.

Submission

• Make the contact form functional and submit your application build by filling out the fields and submitting the form to yourself. Then, forward the Webflow form submission email to chris@hndrx.co.nz.
• Tip: Before submitting, send a couple of test submits to yourself to ensure functionality.

Note

• Take your time! Function is more important than speed.
• Refer to the provided example site to understand how each element should look and function.
• The task are not in any particular order. If you get stuck on something, move on and get back to the task later.