Design comparison
Solution retrospective
NONE
What challenges did you encounter, and how did you overcome them?NONE
What specific areas of your project would you like help with?NONE
Community feedback
- @Henr1queCruzPosted 7 months ago
Hi there 👋. Amazing work!
I suggest considering the use of flexbox or grid to enhance the responsiveness of the page. Relying solely on
position: absolute
with specific pixel values for positioning elements can result in a static layout.Additionally, there appears to be a misspelling in the class name of the last links group.
Lastly, incorporating pseudo-classes such as
:hover
could enrich the user experience by providing interactive feedback when users interact with the links.Continue the great work! 😊
Marked as helpful0@CHBNDJPosted 7 months ago@Henr1queCruz thank you for the feedback i used position: absolute to be able to positioned the card exactly like the design but im agree with you the flexbox is more practical. The last links is card---links because i used a margin between the links but i didnt wanted in the last one thats why because the height will have been a little bit too big compared with the design. You mean :hover instead of :active ? I just followed the figma files but you right i personnaly prefer hover rather than active but in this case it does not really matter because we dont have the responsive.
0@Henr1queCruzPosted 7 months ago@CHBNDJ Yeah you are right in the design is just for
:active
but I personally prefer using:hover
instead.I have notice an improvement that you can do. You have this code and you are using basically the same code in both classes.
.card--links { padding: 14px; background-color: hsl(0, 0%, 20%); border-radius: 8px; margin: 0 0 16px 0; display: flex; justify-content: center; font-size: 14px; font-weight: bold; } .card---links { padding: 14px; background-color: hsl(0, 0%, 20%); border-radius: 8px; margin: 0 0 0 0; display: flex; justify-content: center; font-size: 14px; font-weight: bold; }
Instead of duplicating the same code, you can streamline it by grouping the shared properties togethe. This reduces redundancy and makes the code more maintainable
.card--links, .card---links { padding: 14px; background-color: hsl(0, 0%, 20%); border-radius: 8px; display: flex; justify-content: center; font-size: 14px; font-weight: bold; }
After consolidating the common properties, you only need to specify the unique property for
.card--links
, such as the margin.card--links { margin: 0 0 16px 0; }
You don't need to add
margin: 0 0 0 0
to.card---links
because it is redundant.0
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