two sizes review card

Community feedback

• 

  abderrahmane bnd•150

  @abderrahmanebndPosted 8 months ago

  Salam, I liked how you used the semantic tags but i have some observations: 1- What happened if you will decide that color hsl(47, 88%, 63%) have to change to blue for example? so your variable --yellow: will be blue. And that is a mess. use something neutral for that, for example:

  :root {
      --primary-color: hsl(47, 88%, 63%);
  }
  

  2 - add

  .review-card {
  cursor:pointer 
  }
  

  to know that this is clickable, maybe u can add transition also .

  3- about your problem : just try to estimate the spaces between elements .

  1

  ---

  

  amina-refik•80

  @amina-refikPosted 8 months ago

  salam @abderrahmanebnd ,

  Thank you for your feedback. I've incorporated your suggestions, and I will explore further on how to incorporate CSS transitions.

  0

  

  abderrahmane bnd•150

  @abderrahmanebndPosted 8 months ago

  you can also do it with the other colors I mean the yellow one was just an exemple ,

  --color-brand-1:white,
  --color-branb-2:red ,
  and so on , 
  

  0
• 

  Linda Jensen•80

  @lindajensenPosted 8 months ago

  I think your it looks really great. I haven't been coding for very long so it's kind of hard to give feedback and offer solutions to the areas you need help with. The only thing I can think of is that it looks like the height of your card is a bit off. But then again I never would have known that if i didn't have the design image straight next to your version. I decided to put a height on my card, but I'm so not sure if that's how you're suppose to solve it.

  Good job and happy coding!

  0

  ---

  

  amina-refik•80

  @amina-refikPosted 8 months ago

  hi @lindajensen ,

  I also feel a bit awkward giving feedback to strangers who have had similar or greater experiences compared to mine, so please don't feel alone.

  Regarding the height of the card, yes, it was indeed larger in the screenshot than in the design. This discrepancy occurred because of the size of the avatar image. On the live site, the avatar image is smaller, and the issue only occurred in the screenshot. Upon inspection, I found that the problem stemmed from the use of nested CSS selectors. The headless browser used to screenshot the site doesn't support them. However, I have fixed the problem now.

  Happy coding!

  0