Design comparison
Solution retrospective
Hello everyone! Here is my Solution for this Amazing Challenge!
I found it hard and tricky to make the SVG backgrounds of some sections in the design. It is my first time using SVG photos, so it is not perfect.
Hope you like it!
Witing for feedback.
Community feedback
- @macdeeshPosted over 2 years ago
Hello Obaida, That looks pretty good ! Well done ! Have a look at the report above, it shows a few issues that you can fix. I also have some suggestions for you :
-
I would recommend using pseudo-element
::before
and::after
to put the Custom shape dividers inside the CSS. That way, you can remove the decorative elements from the HTML structure. -
Add obvious focus visible styles to every interactive element. This should be obvious and differ from the hover style, it helps keyboard users know where they are on the page.
-
For the email input, it should be
<input type="email" id="email" name="email">
, and before that you should add a label :<label for="email">
. -
Don't forget to write a good alt text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.
Marked as helpful0 -
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