Skip to content
OverviewSolutions
4
Comments
4

AminForouzan

@AminForouzan60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • AminForouzan•60
    @AminForouzan

    Hello! There are a few mismatches between your code and the original design:

    1. You need to add top padding to the body to ensure the recipe card sits lower on the page, as per the original design.
    2. In your unordered list (ul) elements, the bullets should have different colors and font sizes according to the original design.
  • AminForouzan•60
    @AminForouzan

    well done 👏

  • AminForouzan•60
    @AminForouzan

    Hello @Filippo-balicco,
    I liked your idea of applying the shadow effect as a hover interaction—it’s a great touch! Even though it wasn’t part of the original design, I think it enhances the overall look and feels like an upgrade.
    I wanted to check out your code, but unfortunately, the page isn’t accessible. 😔 I hope you consider making it public so we can explore and learn from it!

  • AminForouzan•60
    @AminForouzan

    Hey @youns-nibras 👋

    I took a look at your code, and it's well-structured! Your use of Flexbox for centering and your clean layout are great. I just have a few suggestions to refine it and make it even more efficient:

    1. Use box-sizing: border-box for Consistent Sizing

    Currently, when you add padding to elements like .card, the total width increases beyond what you set. Adding box-sizing ensures padding is included in the defined width. This prevents unintended layout shifts.

    2. Use rem or em for Responsive Font Sizes

    Instead of hardcoding font sizes like 22px, switching to rem or em makes text scale better across different screen sizes:

    font-size: 1.375rem; /* 22px ÷ 16 */
font-size: 0.9375rem; /* 15px ÷ 16 */

    This helps maintain accessibility while keeping the original design proportions.

    Marked as helpful