Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML CSS BEGINNER

Kate 30

@unic0rnKate

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please don't judge me hard, I'm a completely beginner. Have some mercy, ok? :) I found difficult for my to make a border-radius on both image and my product description. If i apply border-radius for both of them separately then it will look not like 1 box. Don't know the solution for that and will be thankful if someone will help me. Thank you!

Community feedback

Elaine 11,400

@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

0

Kate 30

@unic0rnKate

Posted

@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

@elaineleung

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord