All solutions

First project using react. I plan to add local storage for the list of todos and the the latest set dark or light mode. I could not figure out how to get the filter buttons to separate into there on section on small screens as shown in the design. Also I could not find out how to make the borders a gradient color when being hovered.

I can't seem to get the big image to be the right size or get the text to line up properly as its shown in the design. Any advice on what I could have done wrong will be a tremendous help. Thanks.

hard time with getting images to resize correctly and getting the header image to display correctly. Still unsure if I displayed the header image like I should have and the order of the content is still incorrect when displayed on mobile screens.

Had a very tough time trying to implement the custom tip using aria expanded and could not figure it out. I found a different way that works so maybe in the future I can come back and do it the right way.

Had a tough time figuring out how to add and remove the icon but found a solution that worked for me. Let me know if there is a better more efficient way of doing so, thanks!

Only found grid to be kind of useful when using my media queries in order to have two columns to be the exact same size on bigger screens.

Let me know what I could have done better!

Trying my best to make it responsive at multiple screen sizes. Let me know how I did.

Tried my best to use correct semantic elements to structure my html document.

Had trouble styling the radio buttons and getting everything lined up how I wanted to.

I'm still learning how to structure my html document to display everything I want in the correct order. At first I had trouble getting the text information on the left and the image on the right to be split down the middle without one taking more space than the other. But I think I figured it out and got it to work.

Any advice on my css code and how it could have been better?