Alin Costea• 190
@CosteaAlin93
Posted
Hi Pulkit! Overall, it looks good. A few hints for the design:
- try surrounding the root element into an <main> element so you avoid the 'Document should have one main landmark' error
- the image-container element, could be a bit smaller in width to keep the proportions as a whole
- the image is too stretched, perhaps background-size: contain; will fix it looking more like in the solution
- the font-weight of the h2 could be ticker
- the span containing 'CHANEL ' text, didn't have to be green
- a bit ticker font on the price
- and don't forget the little icon on the 'Add to cart' button :)
On the Mobile view:
- image is perfectly set
- for the content part, you could increase the height a bit, or the spacing between the individual elements
Considering you are using Tailwind for this, my advice would be:
- always start designing with the 'mobile-first' design in mind
- once the above looks on point, start using 'md:flex-direction:row;' etc, for styling for the 'Desktop view'
Keep the solutions coming! Planning to do your approach once I start learning a bit or React!
Marked as helpful
1
