@Grego14
Posted
Hello! Congratulations on finishing the challenge.
Here are some recommendations:
For the .title element it would be better to use a <h1> element instead of <p>.
Also remember to add an alt attribute to the image, even if it is empty.
To align the .learning-card I recommend doing it directly from the parent styles, in this case the <body>.
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column-reverse;
}
And you must delete the styles that you added to the .learning-card
.learning-card{
position: fixed;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
}
When all sides of the border are equal, there is no need to make styles for the 4 sides
border: 2px solid hsl(0, 0%, 7%);
I hope this helps!
Marked as helpful
@BDWNAV
Posted
@Grego14
Thank you so much for the help, but why do I delete all the styles from the learning card? As that is the parent div I have that stores all the elements inside.
@Grego14
Posted
@BDWNAV Sorry I didn't explain, I meant that only the styles you used to align the learning-card element, these:
.learning-card{
position: fixed;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
}
Marked as helpful
