responsive design

Hi Amaefula Joel, I just saw your comment on my solution and so I thought to check out yours as well. I think you did a really good job here on the whole, and I believe that with a few more fixes, your component could look pretty close to the original design. Here are some comments and suggestions:

• I see that you imported your font face, but it's not showing up properly at all, and so the browser has used the other styles you listed instead. You need to head over to the Google Font page and then select the font weights you need; it won't work just to add the link to the font page.

• You could add a bit of padding around the amount tag and maybe increase the font size a bit; I think once you fix the font issue above, it should look better.

• I'd suggest having the CSS in a separate style sheet instead of having it all in the HTML. For me it would just be easier to see without scrolling up and down, unless you have the file open on a split browser in VS Code, which also works.

• You also got some accessibility issues in your report; they're mainly related to landmarks, so for example, just make sure that in your HTML, you're using a <main> tag (simply changing the div of your main content would do) and that the div in your .attribution class uses a <footer> tag (again, just switching tags would do).

• I see that you're linking to a jQuery file that's in your repo; maybe you can just link to a CDN file instead. Also, now that you got everything working, as a challenge, you can try writing the code in vanilla Javascript without a library.

Once again, well done! :)