Design comparison
Solution retrospective
I'm proud of finishing this website without that much of a hassle except for the active states.
What challenges did you encounter, and how did you overcome them?The active states, as well as figuring out what to use for the 8 pictures. I thought of using images for the 8pictures, but then I need to use absolute positioning for the texts, and make them responsive by constantly changing their positions. So I decided to use background image instead, atleast I only need to edit the background image for responsiveness. But then when I implemented the active states for hovering, simple :hover doesn't work because the text is also affected by it. So I had to use ::before and absolute positioning for it.
Also had a hard time figuring out the active state for the links (about, Careers ,Events, Products, Support). Simple border-bottom does not apply because in the example, the length is shorter than the actual words. So I had to use ::after pseudo class to manually create the line below the words :D
What specific areas of your project would you like help with?Would like to know codes that are more efficient and scalable compare to my code. As well as alternative approaches to things that is easier.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord