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 with Flexbox in Flexbox in Flexbox...

NBD 240

@bdal90

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


Dear All,

Here is my 3rd project from the bottom of my heart. I felt like I was getting more and more comfortable with flexbox and positioning that's why I was experimenting with percentages in sizing. I kind of like the outcome, but I would appreciate some feedback on it to see if it is correctly done or not. I also tried to make it nicely responsive, I just wonder if I managed to.

Cheers,

Dalma

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Some HTML tips

  • Instead of using h2 and p for the prices, you can use em and s. The <em> tag is used to define emphasized text. The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it by default.
  • You shouldn't use the alt attribute for decorative images

Some CSS tips

You can add some effects to the button like....

button:hover {
     transform: scaleY(1.1);
     background-color: hsl(158, 35%, 20%);
}

and...

button {
    transition: 300ms;
}

This is just an example!!!

Marked as helpful

0

NBD 240

@bdal90

Posted

Hey there @pRicard0,

Thanks for reminding me of the transition, I forgot about that. As for the HTML tips, very useful, I'll keep them in mind!

Cheers,

Dalma

0

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