All solutions

Why didn't Anna like the Chess club :(

The chess image was really bugging me, just could not get it to float right for the life of me, tried using float, justify self, justify-content with the container but wasn't having it. I added a margin but messed it up for mobile display so left it how it is. Any help with that is appreciated

Messing around with some basic keyframes

Enjoyed this one! Starting to get the hang of using grid and flexbox, whilst also learning JavaScript. If anyone could help me with the following that would be appreciated:

I know the CSS is messy, is there a good way of simplifying this code? I know I have repeated a few things that I could easily simplify but any best practises would help me.

What are the best breaking points for media queries with a design like this?

I have used a lot of absolute font sizes and image sizes, is there a better way such as using Rem and Em?

I used grid and flexbox for mobile, I know I can just change the grid to span one column but it is very easy just to change it to flexbox for mobile, is this a bad practise?

How are the semantics with my HTML?

I have recently learnt the grid layout in CSS and decided to implement this into this design to test even though it is a basic design. I also changed the grid layout to flex for when it is mobile as it will only ever need a 1 dimensional layout for mobile. Is this a good way to go about the structure or should I have left it as grid and just make it drop down for mobile? I also couldn't get the icon border to be a perfect circle it was showing as an ellipse no matter what I changed with the width and height. Any help is much appreciated on this.

Getting the hang of styling now, however I know there are better ways of doing this and reducing code etc. as well as improving the media queries so any help is appreciated!