Frontend Mentor - Product preview card component

Hello, Stanley Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="container"></main>
<footer class="attribution"></footer>

This would help improve accessibility.

• add the below styles to the body. It will center everything

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

• Add the below styles to the .container

.container{
    max-width: 40rem;
    /* margin: 7rem 15rem 9rem 15rem; */
    /* border: 1px solid hsl(30, 38%, 92%); */
}

Remove all margin

• Fixed the media issue.

• Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

• This is my solution of this challenge live, repo

I hope it will work. Happy coding.

I encountered an issue with the mediaqueries, could'nt work on the mobile properly. i'll update later