Design comparison
Solution retrospective
This was a good review and practice. I had a fun time making this component, it seems self explanatory and was a great exercise. I would go back and implement the accessibility part, but didn't this time.
What challenges did you encounter, and how did you overcome them?I had trouble with creating the social links container part that had the triangle portion when toggling the social links on and off. I had to look up how to make a triangle or shape online which I reference from this source https://css-tricks.com/snippets/css/css-triangle/ This was a great resource to implement that for the social links part. Toggling the event listener for the JS button, took a little bit of trial and error but eventually got it.
What specific areas of your project would you like help with?This was a great and fun mini exercise, although I did not make it accessibility user friendly or didn't implement any aria in the HTML part for screen readers and etc.,. No specific questions for here, I am always open to feedback.
Community feedback
- @Talika-BajajPosted 4 months ago
Hi
Well done on completing this challenge. It looks similar to the original design. However I would like to suggest something regarding the image styles applied -
Update the style of the drawers image and add
width: 100%
so that the image covers the whole area in the mobile designThe style you have provided to the profile image is also applied to the share button image.
.profile img { height: 50px; width: 50px; border-radius: 50%; }
I suggest you should give the profile image a class or an id and directly access it so that the style is applied to that image only.
Also on the share button, you should update the
.share-icon
class styles to these -border-radius: 50%; padding: 18px; border: none; cursor: pointer;
And also update the
.share-icon img
style and set it to -height: 25px
only.I hope all these style updations help you achieve the share button look similar to the design.
Well Done. Keep it up!
Marked as helpful1@xayrax88Posted 3 months ago@Talika-Bajaj Thank you so much for your reply! I appreciate the feedback I will get to working on this! :)
0 - @MachadoAPosted 4 months ago
Your project is very good! Congratulations! Keep it up!
I suggest that in the part with the link, you put the images inside the <a> and give them a CSS cursor pointer. The change could be like this, for example:
html
<div class="links"> <li><a href="#"><img src="./images/icon-facebook.svg" alt=""></a></li> <li><a href="#"><img src="./images/icon-pinterest.svg" alt=""></a></li> <li><a href="#"><img src="./images/icon-twitter.svg" alt=""></a></li> </div>It is also advisable to fill in the alt attribute of the img to support screen reader users.
Best regards, Ana
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