Skip to content
OverviewSolutions
7
Comments
7
Isaias
@Isa696

All comments

  • Isaias•120
    @Isa696

    Great work! I noticed you used grid-column-start and grid-column-end instead of grid-column: 1 / 3; and grid-row: 1 / 2;. Both approaches work the same, but the second one is a bit more concise. However, your way can be more readable, so it really comes down to personal preference.

    Here’s a small suggestion: you could centralize your color variables by defining them in the :root like this:

    css Copiar código :root { --Moderate-violet: hsl(263, 55%, 52%); --Very-dark-grayish-blue: hsl(217, 19%, 35%); --Very-dark-blackish-blue: hsl(219, 29%, 14%); --White: hsl(0, 0%, 100%); --Light-gray: hsl(0, 0%, 81%); --Light-grayish-blue: hsl(210, 46%, 95%); } Then you can reuse them as var(--color-name) in your CSS. It helps keep the code more maintainable and scalable. What do you think? 😃"

  • Isaias•120
    @Isa696

    You did great! I just recommend adding some gap or padding inside the cards to ensure they all maintain the same size. I noticed that in windows smaller than 768px, some cards are a little bigger due to different text lengths. Additionally, you might consider using the main tag instead of a div. These are just slight adjustments. 🙌

  • Isaias•120
    @Isa696

    Hi you did a good job. Real good css clear and readable. But i see flex direction no working on my browser. I 'm using brave Browser

    Marked as helpful
  • Isaias•120
    @Isa696

    Your desing its almost identical on desktop. Only diference its the margin bottom.

    I would recommend checking the mobile design. It will require some media queries to remove the card container and make the image and card width at maximum.

    I know this exercise is quite simple, but I think using a CSS reset will ensure total control over margins, paddings, etc.

    Also, in my opinion, using relative sizes for paddings, margins, and fonts will result in better responsiveness.

    You did a great job!!! 🙌

    Marked as helpful
  • Isaias•120
    @Isa696

    Hi, you did a good job! To fix the background color, check the styles README guide. It contains all the styles, colors, fonts, etc.

  • Isaias•120
    @Isa696

    i got same problem with gap and padding / margings so i cant help 😔. i ll recomend checkout the figma file. The border-radius i think its 20px. its just a minor detail. You did it great 👍!!!

  • Raphael Samaglo•150
    @Rapasam
    What are you most proud of, and what would you do differently next time?

    Writing of the CSS was quite fun since it helped bringing imagination into reality.

    What challenges did you encounter, and how did you overcome them?

    The challenge was the CSS but I was able to work around it by the preview given.

    What specific areas of your project would you like help with?

    Writing of CSS.

    Visual Studio Code for writing HTML and CSS

    1
    Isaias•120
    @Isa696

    Hi your solution its almost perfect. I put attribution to bottom, just as it was a footer. Nothing important for this exercise really 🤣, just a minor detail. I didn`t use grid cause i think flexbox its enough for this.