Hi, congratulation to you on completing this challenge first of all. You have done an excellent job. I have some minor suggestions that I wish to share with you, although I am not able to clear all of your doubts.
You can place different names for each class in the rating section. By doing so, you can clearly distinguish between three other classes, and you can use position: relative and place them in the "staircase" like position by using the top, left, and proper commands in CSS. Perhaps, you can also use the absolute positioning method to do so. This is the link to learn further about positioning https://developer.mozilla.org/en-US/docs/Web/CSS/position You can do the same for the review cards sections.
You can use the Bootstrap 5 library to create column grids. Split the header, review sections and review sections into one row and three columns. Using proper prefixes for the desktop and mobile sizes, you can create a neater design, and the layout will not move.
This is the link to use Bootstrap 5 for the grid system.
https://getbootstrap.com/docs/5.0/layout/grid/
Thank you, and have a blessed day!
Give me valuable comments to my work.
Good day, Rakshith. Well done with your design. As there are some HTML issues, as shown in the report, you can avoid them using Bootstrap card design.
Since you are using Bootstrap, you can use the card-body class to design the preview card component. Using the component, you don't have to transform the property from CSS to avoid the HTML issue. It is my suggestion.
You can change the card property into a row flex-direction for the desktop view. It is easier, and through this, we can avoid minor issues as well.
Thank you, and all the best!
