@elaineleung
Posted
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