Skip to content
OverviewSolutions
8
Comments
5
Haico Paulussen
@Haico-Paulussen

All comments

  • Haico Paulussen•170
    @Haico-PaulussenPosted over 2 years ago

    Hello @Hiddev,

    First off, great solution. I really like your animations. The only thing that's a bit off is the position of the dice in the button. It's not perfectly centred. Maybe try to use a little flexbox to position it.

    Overall great work! Keep coding!

    Kind regards

    Marked as helpful
    1
  • Haico Paulussen•170
    @Haico-PaulussenPosted almost 3 years ago

    @hiddehulsof,

    Great work! To make it even better, maybe you could put some extra time and effort into the details to make it as similar as possible to the designs. Also, take a look at your responsiveness, especially for the ultra wide users (like me) ;)

    Keep on coding!

    Marked as helpful
    1
  • Éric Férole•420
    @Eric-FeroleSubmitted almost 3 years ago

    I created a Figma file because I'm not a full member yet. So I know it's not pixel perfect. The only things that bugs me is the small padding you can notice at the bottom of the image when you roll over it.

    CSS, Flex and Grid

    2
    Haico Paulussen•170
    @Haico-PaulussenPosted almost 3 years ago

    Hi @Eric-Ferole ,

    Great work. You should really take a look at the accessibility and HTML report from FEM. It will make your code a bit better!

    Some points:

    • Your hover overlay on the image is a little bit off. Take a look at that.
    • I like how you use Flexbox and CSS Grid together.

    Great effort and keep on coding!

    Marked as helpful
    0
  • Mark Teekman•365
    @markteekmanSubmitted almost 3 years ago

    I used the ::before pseudo element to create the overlay for when you hover over the image, it's actually something I've used for years now, but I was wondering whether nowadays there might be a better or alternative way to do this? I do like the fact that there is less HTML in the end, though you do need more CSS to style the pseudo element.

    Astro, WCAG Accessibility, CSS Flexbox & CSS Animations

    1
    Haico Paulussen•170
    @Haico-PaulussenPosted almost 3 years ago

    Hi Mark,

    Well, great solution again from you! I really like how you always make sure the WCAG guidelines are honored. Also, the extra touches of interactivity and animations make it way more interesting. Well done!

    One small thing you could change is to use a Grid or Flexbox in your card__content so you can space everything evenly and you don't need to use padding to make it as close as possible. But everyone has their own style, your solution works too!

    I like what you did with the ::before to add the hover animation on the image, that's a smart solution!

    Keep up the good work!

    1
  • Haico Paulussen•170
    @Haico-PaulussenPosted almost 3 years ago

    Hey Nick,

    First off, great solution! I see you used CSS Grid, I'm a big fan of that.

    There are some minor fixes possible to take it to the next level:

    • Even though you use the grid-gap correctly there still are some inconsistencies in your margins. Try to set the margin on the p to 0. This way the grid only uses the gap you set on the grid.

    • Your h1 is a little bit off from the design. You could fix this to make it even more alike!

    Hope this helps and good luck with your next challenges!

    1