All solutions

Must the button have active states?

For my implementation of the input error icon and box, it's done with a div tag and img tag that are below the input tag. When validation error is detected, the input tag visibility is made hidden to reveal the div tag and img tag. If latter are clicked, the visibility of the input tag is restored. Why this implementation is due to revelation that the border of the input tag cannot be modified to take on a red border if there are errors. Pls let me know what are other solutions to tackle this part of the design. Thanks!

The challenge here is using grid to layout the 4 cards that have "parallax" offset. Initially, tried using multi-column layout. But it won't be able to acheive parallax offset effect. Let me know if anyone has achieved that.

Seems to have issue centralizing font awesome icon. In the end using translate and extra parent div to contain the FA icon. If you have a better solution, let me know.

The share bar trick to get to overlap the avatar segment fully, in the end use the absolute to parent (avatar segment) to solve this easily. Feel free to share your comment.

Please comment on whether the Hamburger menu items are done correctly in the mobile responsive mode of the component.

Also let me know what other solutions in setting the nav bar at the top of the component.

And if you like it, pls hit "like". Thanks!

Responsive at mobile level is a hit and miss due to width size. Not sure anyone can advise how I can tackle it?

Both desktop and responsive design. Uses grid to change the ordering of the sub-components.

Let me know about the functionality and look and feel.

I have yet to implement the mobile (responsive) version.