html css bootstrap

Hi Pavel, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

Document should have one main landmark, this problem is being caused by the fact that there is no main tag around the main content of the page! Since this challenge is based on only one component, there is no other component more important than it on this page, so to solve this, wrap all the content with the main tag,

It's always good to pay attention to the correct use of semantic html elements, as they are extremely important for people who use screen readers, to know what the main content of the page is in the case of the main tag!

The rest is great!

I hope it helps... 👍

Hello Pavel, You have done a good work! 😁

Some little tips to improve your code:

• add main tag and wrap the card for improve the Accessibility
• also you can use article tag instead of a simple div to the container card for improve the Accessibility
• You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
• 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
• not use inline style inside the html but create a class
• remove all margin from box class
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• instead of using px or % use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!