Check out the final result: https://nikmaxott.github.io/intro-section-with-dropdown/
Check out the source code: https://github.com/nikmaxott/intro-section-with-dropdown
This challenge had a few key steps. I started with the basic Desktop Layout and perfecting that. This required extensive use of the CSS Grid, something that I’m not overly familiar with, in combination with Flexbox, a tool I have a lot of experience in.
The Mobile design for this site was a lot more complicated, especially trying to make the code somewhat neat and modular with the already designed desktop version.
The mobile design is mostly built with CSS Grid and has a lot of clever CSS tricks to scale the images and text to a mobile appropriate size. This means the entire application is dynamic and resizes rather well based on window size.
The most complicated part of the mobile design was the menu, this not only needed animations it also had to use z-index, and CSS filters to create the menu overlay effect, this was inspired by the menu here on this site.
The final change for mobile was to edit the menu dropdown so they behaved as expected in this setting, this took a lot of work but I’m very happy with the end result!
The final bit of CSS trickery was to move the menu in and out smoothly. Requiring both a bit of CSS and JS trickery I am very happy with the final result and I think I will try and use something similar in the future in other projects when the need arises.
The next steps for this site would be add some nicer animations, but as this is something I’m not overly familiar with I will have to dedicate some more time learning.
Next week I’ll be starting my new job so don’t except such frequent posts, but I’ll try my best to continue publishing where possible