Design comparison
SolutionDesign
Solution retrospective
Your feedback is highly appreciated
Community feedback
- @andreasremdtPosted about 2 years ago
Hey @mohamedshawgi,
Your solution looks awesome, close to the design and technically great - no HTML or accessibility issues. I only have a couple of small suggestions:
- For improved accessibility, I'd recommend adding some hover and focus styles to the button to indicate that it's interactive.
- Instead of using
div
elements for each section, you could usesection
elements. This would make it slightly more semantic, since each section contains its own type of content, but they are still related. - Speaking of semantics, I would use a
p
element instead of anh2
for "30-day, hassle-free money back guarantee". Each section should ideally have one heading, followed by content. While having two headings isn't the worst thing to do, it could be confusing because screen reader users might expect more content than there is, since the first sub heading indicates that there are more sub headings further down, which isn't the case. - You could tweak your media query breakpoint to be a bit lower, since it starts breaking quite early, which looks weird. I think a good value would be around 600px.
Other than that, you are good! Hope this helps you improving your solution, let me know if you have any questions :-)
Marked as helpful1
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