.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
You can place the quote symbol as background in the purple card in the CSS like this:
background-image: url('./images/bg-pattern-quotation.svg'); background-repeat: no-repeat; background-position: right 90px top 0;
a
What challenges did you encounter, and how did you overcome them?a
What specific areas of your project would you like help with?a
I used Grid and Flexbox together.
What challenges did you encounter, and how did you overcome them?I had trouble with responsive design. It was easier to start with the mobile version and then transition to desktop.
What specific areas of your project would you like help with?I am open to suggestions for improving my code.
You can make the discounted price text bolder by setting the font-weight: 700,.
I am proud of how I was able to group the nutrition list and able to align it with their weights. And how I check less solution online.
What challenges did you encounter, and how did you overcome them?how to scale the Max-width to meet various mobile screen sizes
What specific areas of your project would you like help with?I would love to get help with JavaScript. Learn it alone is quite confusing.
N/A
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?N/A
I think you can make the card scrollable by setting the height of the html tag in .css file to 100%, and use flex with both justify-content and align-items center.
The solution is fine, but you can add box-shadow attribute to the main card's CSS. It looks like this:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
More info here: https://css-tricks.com/almanac/properties/b/box-shadow/