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 component with flex-box

Mulugeta 360

@MrDevM

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


give an help full feedback it help thanks

Community feedback

Bryan Li 3,550

@Zy8712

Posted

Your site is pretty solid. Main things I'd add/modify are:

  • a hover effect for your button using the :hover feature
  • using variables so that its easier to tell which color is which. It also helps with reusability and quick modification. It would look something like this:
:root{
  /* Primary */
  --dark-cyan: hsl(158, 36%, 37%);
  --cream: hsl(30, 38%, 92%);

  /* Neutral */
  --very-dark-blue: hsl(212, 21%, 14%);
  --dark-grayish-blue: hsl(228, 12%, 48%);
  --white: hsl(0, 0%, 100%);

  --font-theme-montserrat: "Montserrat";
  --font-theme-fraunces: "Fraunces";
}

Then to use it you could do something like: color: var(--dark-grayish-blue);

Hope you find this feedback useful 👍

1

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