Used Flexbox, CSS Grid, Media Queries, and hover effects.
Design comparison
Solution retrospective
What I’m Most Proud Of I’m proud of creating a responsive layout with clean, functional design and smooth interactivity.
What I Would Do Differently Next time, I’d focus more on optimizing performance and exploring more advanced animations for smoother user experiences.
What challenges did you encounter, and how did you overcome them?Challenges Encountered I struggled with maintaining the layout while adding spacing for the footer, which caused my card div to shift.
How I Overcame Them I adjusted the body’s flexbox settings and used padding to ensure proper spacing without affecting the card div's position.
Community feedback
- @RetroApePosted 3 days ago
Hi Mariam. Nice work on matching the design; it is pretty close. I know what you mean with layout, but thankfully it will become easier to us with time.
I checked your solution and found a couple of things to note:
- the color of the title should change only when hovering with mouse over the title itself. Making two selectors on the title would solve the issue; one
:hover(to change pointer to hand) and one:active(to change text color when clicking) - two
@mediaqueries are unnecessary; simply having everything properly set up in CSS file is enough for bigger screens, and then you can use@mediaquery to change what needs to change for widths of 375px and under
I hope I helped a bit. Best of Luck!
Marked as helpful0 - the color of the title should change only when hovering with mouse over the title itself. Making two selectors on the title would solve the issue; one
Please log in to post a comment
Log in with GitHub
Join 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