Product Preview Card

Hi @Jackgomez You've done great 💪

• You can center the component using flexbox Add this property to body element

main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

And delete margin: 15rem auto; from .box

You can learn more about flexbox here

• Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

Click here for more information

Good job, and happy coding!

Hey @Jackgomez, some suggestions to improve you code:

Your direction is correct. I can see that you've used the majority of the semantic tags that are appropriate for this challenge; the only block you missed was the paragraph that contains the quote text. By using <blockquote> there, you can increase accessibility by telling screen readers that the content inside that paragraph is a quote.

To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

Happy Coding! 👻🎃