Product-preview-card-component -UI

** 👋 Hello yağız, congratulations for your new solution! **

✔ Check Points:

A. Button - You can add flex in button for similar look.

button {
    background-color: hsl(158, 36%, 37%);
    border: none;
    width: 200px;
    height: 40px;
    color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

B. Button svg : You should also add margin right to svg to give space between the svg and text.

margin-right: 10px;

👋 I hope this helps you and happy coding!

Hi! Welcome to the community!

This is an amazing approach, it is almost identical. Well done!

• Document should have one main landmark - Your page should have one and only one <main> tag to help screen readers navigate the page.You can wrap your card in a main tag.
• Page should contain a level-one heading - Your page should have one and only one <h1> tag to help screen readers navigate the page. You can put title in a <h1> tag.
• You should increase the font-weight of the cost text. You should also increase the padding slightly, both to make it look more like the design.
• I see that you used margin to center the div, I think you should use flex-box as it is a lot easier and works a lot better. Like this:

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

I hope this helps! Happy coding!