Design comparison
Solution retrospective
In this challenge I implemented a tabbed interface using vanilla JavaScript and laid out the design using SASS.
What challenges did you encounter, and how did you overcome them?The tabbed interface was the first time I have implemented such a feature and luckily through the community I found a great article about implementing such a feature.
What specific areas of your project would you like help with?I am always appreciative to hearing suggestions or tips on how to improve my code especially with JavaScript.
Community feedback
- @DalaScriptPosted 5 months ago
Heyπ, Good Job!
Your Project looks very good and most importantly it is functional and works
I'm kind a perfectionist Person, And I'll give you some tips to improve your design.
- your image in
<figcaption class="profile">
container needs outline property instead of border, and image's sizes will match. <h1>Jeremy Robson</h1>
needsline-height: 47px
- you need hover for your
<div class="content"></div>
container. - you need also hover for your ellipses image, it should be actually button, And on hover it should change color :
<button class="card-btn"> <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg"> <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill="#BBC0FF" fill-rule="evenodd"/> </svg </button>
and then to change color of those ellipses (I saw your using scss, so I will write for scss):
button { &:hover { path { fill: **here comes what color you want**; } } }
Good Luck! π
Marked as helpful0@nvallinePosted 5 months agoHi @NikaDalalishvili ,
Thanks for the feedback! I didn't know about using outline instead of border to get the desired result like the design.
The rest were very helpful as well, I mainly just forgot/missed some of the hover effects.
I have implemented your feedback and updated my solution.
Thanks again!
1@DalaScriptPosted 5 months ago@nvalline With pleasure! π Thank you so much for such a kind assessment. π Good luck! πβ¨
0 - your image in
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