Skip to content
Submitted 8 months ago

Responsive Product Card

Michael•80
@vonsacker
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

What are you most proud of, and what would you do differently next time?

I think the responsiveness came out well, without using to much extra code

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

I had some issues with copying the layout of the text from the designs. After some trial and error it came out pretty close to the original

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

I'm using a normalize.css file, but i'm not sure it's necassry. Also i'm not sure if i'm using spacing the right way fot the text.

Community feedback

  • Nikki•160
    @nicolette-codesPosted 8 months ago

    I received some feed earlier today that I found helpful, so I gonna copy it here.

    --variables: don't use color name for your variable

    :root{
   --Dark-Cyan: hsl(158, 36%, 37%);
   --Cream: hsl(30, 38%, 92%);
   --Very-Dark-Blue: hsl(212, 21%, 14%);
   --Dark_Grayish-Blue: hsl(228, 12%, 48%);
   --White: hsl(0, 0%, 100%)
}

    what happened when your designer calls you and he will tell you that he wants color of the background change it to pink?

    --Cream: pink;

    It's better to names like this: primary, secondary, link-color, header-color, bg-color, text-color and so on.

    --bg-color: hsl(30, 38%, 92%);
    Marked as helpful
    1

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