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

Product Preview Card

@tbensheimer

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


Hello everyone! I completed another project and this one was one of the harder newbie challenges in my opinion but I still enjoyed doing the project! I had fun figuring out how to lay the image perfectly next to the div container. I also never knew that you can use the border-radius property on certain corners which was interesting. If any of you have any suggestions on how to improve my code please let me know! Thank you in advance!

Community feedback

Fatlind Shehu 2,230

@fatlindshehu

Posted

Hi @tbensheimer

There is a way of seting the border-radius only on the container and showing also on the image, you can do that like this:

.container{
  border-radius: 10px;
  overflow: hidden;
}
  • I would suggest using rem or em units, instead of pixel units, px can cause Issues when trying to make your site/component responsive.

Now you can remove the border-radius on the image!

Keep it up :)

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