We’ve had a few requests for how the top section of our website was built, both the hero section with the 5 different sections, and the 4 steps below.
As usual it’s about the creativity/inventiveness and thinking out of the box of who designs the site with the available tools, @Nathan in this iteration of our home page.
Both are achieved with popups and hover actions on buttons, triggering the popups.
Here you can download two sample project files that recreate a simplified version:
I guess the non-intuitive aspect of this project is that the four popups for the four different states contain a duplication of all elements, with a single section containing the “current” content. The animation is triggered by hovering the buttons, for each section.
