order-summary

Hi Dev_Ruan_Alexandre.S

Here are some suggestions for your code

Use semantic HTML elements: You can improve the accessibility of your code by using semantic HTML elements (e.g. header, article, nav, etc.). In this case, you could wrap the heading and description in a header element and the "Order Summary" section in an article element.

Consider using CSS classes with descriptive names: This can make your styles more readable and maintainable. For example, you could use class names like "hero-img" instead of "img".

To make your code more scalable and to reduce the chance of conflicts, consider using CSS class names that are specific to the component and avoid using tag selectors.

Happy Coding

Hi, @ruanalexandreS. I checked your solution. It's a good one. Keep coding... I have a suggestion for you.

The flexbox has 1-direction flow, so we can use padding and margin values in flexbox to align any flex-items. In your case, you can use this code to move your flex-item:

.price {
    /* text-align: center; */
    font-size: 20px;
    padding-left: 20px; /* This property and value can be changed to your alignment.*/
}

And you can use these properties with other flex-items to move them in your flex container. However, this feature only works in flexbox. We can't use it like this in CSS Grid.

Check some good solutions and implement to your code. I hope this will help you to improve your perspective. Keep coding. All the best.