@GreenKeewi
Submitted
@zarak
@GreenKeewi
Submitted
Nice use of CSS grid! The layout looks great on small screen sizes as well as large - it's small enough that it doesn't need adjustment on smaller screens, which looks great.
That said, the design spec asked for a slightly larger card (in terms of pixels) on tablet sized screens, so making the layout responsive to accommodate tablets according to the design could be one area of improvement.
The animation on hover looks great! One enhancement you could make is to support using the keyboard - you can do this with :hover
selectors. The styling could be similar to the hover effect.
Great work!
This looks great - I love the hover effect on the entire card!
You might be able to organise your CSS slightly better by using variables for things like colours and spacing. The solution looks quite similar to the design. You didn't neglect to include the solid border on the card like I did, so you definitely have an eye for detail. Great work!
@xxmileww
Submitted
Hi!
The card could use a bit of a box-shadow
to look more like the design spec. The border radius could be a little higher for the card as well, as the design seems to have rounder edges. The border-radius
of the image itself looks good though!
The h1
font size is a bit small compared to the design. You could also experiment with giving it a font-shadow
.
Apart from that, the colours look good! And the font styles are correct. You may wish to experiment with the line-height but that might be a minor detail. You could try using CSS variables for the colours, although for a project this small it's probably not needed.
Great work!