Submitted

3 Column Preview Card Component using Flexbox

Ken 455

@lmaoken

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

3

Accessibility Issues

0

HTML Issues

View Report

Ken’s questions for the community

I feel myself getting better at this and hoping that I reached the desired result on my first attempt.

If anybody has any criticism, advice, or feedback. It is so greatly appreciated if you could take some time out of your day to leave a comment. I am doing my absolute best to improve everyday.

Community Feedback

Ken 455

@lmaoken

Posted

Does anybody have advice on how to have the content align with the original design properly?

I made sure to have a container surrounding the main card component. I set the container height to a 100vh and justified its content center to center the main card in the middle of the page(justify-content: center;) -- yet my result seems to be a few pixels above the original design.

0


Ken 455

@lmaoken

Posted

@lmaoken Giving it more thought, it might be because I didn't style the footer at the bottom which pushed the page up a little.

0

CyrusKabir 1,095

@CyrusKabir

Posted

hello my dear friend ♥ your cards at all are good and clean but here some tips :

  • we can't see any hover state in your code
  • and it's better to keep cards in this design in row when viewport it's more than 1000px or something like that you know what i mean but at all it's good but try to improve it for sharping your skills ♥♥♥

Marked as helpful

1


Ken 455

@lmaoken

Posted

@CyrusKabir Thank you for the feedback! I did not add a hover state because I believe the design asked for an active state and not a hover.

0

Give some feedback to @lmaoken about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!