@Henr1queCruz
Posted
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 helpful
@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.
@Henr1queCruz
Posted
@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.
