HTML CSS BEGINNER

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Kate, welcome to Frontend Mentor, and good job completing your first challenge! About the border radius, what you need to do is add them separately because the values are different.

  With the card component, you can just throw on a 1 rem all around (or whatever value works for you)

  .perfume {
    border-radius: 1rem;
  }
  

  For the image, you will need to add this instead; this specifies each corner of the box, starting with the top left and going clockwise:

  .perfume img {
    border-radius: border-radius: 1rem 0 0 1rem;
  }
  

  You'll also want to remove the box shadow on .peach-color and add it onto .perfume instead so that the card gets the box shadow. Also, the font face in this challenge isn't showing up; I see that you used some different font faces, and that's OK if it's what you want, but you'll have to add that font property into the CSS selector so that the font actually shows up, otherwise the browser will resort to using default fonts. You can add the property like this:

  body {
    font-family: Roboto;
  }
  h1 {
    font-family: Fraunces;
  }
  

  One quick suggestion I have on how to improve is to use class names in your HTML and CSS to structure your code. Instead of peach-color, I might give it a name that tells me what that element is doing, such as container or wrapper, or instead of perfume, I'll call it card or component.

  While there are still lots to learn, you made an excellent first start already, so keep going and keep practicing. Don't worry about asking questions and getting feedback as we're all learning together! Once again, great job, and keep coding :)

  Marked as helpful

  0

  ---

  

  Kate•30

  @unic0rnKatePosted over 2 years ago

  @elaineleung Thank you so much for taking your time and helping me out! Appreciate it! I tried your solution for border-radius and it is perfectly works this way. Thank you! :)

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @unic0rnKate Glad to hear I could help! Keep going!

  0