HTML,CSS image overlay and position property

Hi Jill, great work on this challenge! 😉

Here are a few tips for improve your code:

• add main tag and wrap the card for improve the Accessibility
• using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
• remove margin-top from card class because with flex they are superfluous
• add min-height: 100vh to container class because Flexbox aligns child items to the size of the parent container
• add transition also on the text with hover effect

Overall you did well 😁 Hope this help!

Hi there😃,

The solution looks good. Here are some improvement code,

For more accurate center use flex-box:

Based on the problem use :

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

For <hr> (Horizontal line):

hr {
    border: 1px solid;
}

Happy Coding👨‍💻,

NitheeshKumar

hey, awesome you did it very perfect the only thing you have to look that is accessibility issues and html issues except these you did very well and Don't forget to check mine projects also. best of luck for your next projects.....