Skip to content
Submitted 12 months ago

Product preview card component

Lehlohonolo Jeremia Motaung•70
@J3r3mia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Good day Frontend Mentor community To do this challenge I used pure HTML/CSS. Struggled to use border-radius on the container containing my image-container and card container, therefore I used border-radius on image itself and card-container.

Solutions on how to do this would be appreciated and how to write a clean code.

Thank you.

Community feedback

  • Luan Barcaça•500
    @barcacaPosted 12 months ago

    Nice work on the challenge!

    For a cleaner solution, wrap both image-container and card-content in a parent div. Apply the border-radius to the parent div. Example:

    HTML

    <div class="parent-container">
  <div class="image-container">...</div>
  <div class="card-content">...</div>
</div>

    CSS

    .parent-container {
  border-radius: 10px; /* Adjust as needed */
  overflow: hidden;
}

    The overflow: hidden; property hides any content that goes beyond the rounded corners set by border-radius: 10px; in the .parent-container. Feel free to remove border-radius from other CSS properties for a cleaner look.

    Great work!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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