I build a card example. Maybe you like it

Code Feedback
1

Here it is: https://codepen.io/a2-zubair/pen/zYYoyeW

Tell me what do you think?

Thanks.

:nerd_face:

2

Looks nice!
Maybe to give it a little more functionality, you could add links on mouseover.

1 Like
3

It does look nice. I do have a few points.

  1. I would set a max-width on the cards and just let them wrap. I don’t think you need all those media queries and in my opinion, it looks better to have the cards not grow and shrink.

  2. I’d do it all in CSS. It seems a lot simpler.

https://codepen.io/lasjorg/pen/VwwpKar

  1. If you are going to use jQuery then you can clean up the code by having just two functions instead of writing the same code again for every card. I have used the same selectors as you, but at least for the button, it might be better to have a more explicit selector name than just a.

https://codepen.io/lasjorg/pen/pooeEbz

$(document).ready(function() {
  
  $(".card").mouseover(function() {
    $(".divider", this).css("border", "1px solid #dfe6e9");
    $("a", this).css({"background": "transparent", "color": "#0984e3"});
  });
  
  $(".card").mouseout(function() {
    $(".divider", this).css("border", "1px solid #636e72");
    $("a", this).css({"background": "#0984e3", "color": "#fff"});
  });
  
});

Again nice job, keep it up.

1 Like