All solutions

First i was wondering how do you add the " Please check your email " on the input when the email is not the right format ? ::before and ::after doesn't work on input tags, and to my knowledge It is not possible to style a parent on child hover (or :invalid in my case) so I am stuck.

Second of all I know my code is very sloppy and I feel kind of bad for putting it out there :). When looking at the design I thought about going in a certain direction, turned out to not be so good and instead of redoing my html and the first part of my css I justed pushed on and kind of brute forced my way out.

I want to keep pushing on challenges with HTML / CSS only to soon start working and learning JS which I am excited about, and will later come back to this challenge and fix my solution.

I wasn't a fan of the footer so I did not try to replicate " exactly " the design.

In the first section "Keep track of your snippets" i did not find a way to have a nice responsive design, on some viewports width it does not look good at all. I had to fix the width of the text on the right to make it okay-looking but I don't like that.

Also I used the facebook , instagram and twitter in img tags, blocking me from having a hover effect to switch colors. I don't know if there is still a way to do so in this situation. Or if I should have searched and used the ones from Font Awesome.

I did not expect to have this mutch fun doing this challenge when i started it.

The responsiveness of the background's body for screens above 1440px annoys me a bit, I still need to work on my understanding of backgrounds rules.

I am pleased with the way I handled the progress bar, making it nice and responsive.

I am not happy about the responsiveness of the page, especially the way I dealt with the body's background image.

Not realy happy about the way I added the shapes in the background, could you please give me advice on a better way to do it ?

What do you think about placing the Learn More button in absolute ?

I had trouble placing the "change" link and I am not happy with the way I placed it. Will have to find a better solution the next time facing a similar situation.

I think I should name my color variables based on their importance / purpose instead of giving them a name related to the color used.

I think I should have fixed the height of the card instead of letting it be defined by the space all the text is taking and the height of the picture.

I have trouble importing media queries in SASS, I heard it was better to do all of your @import at the start of a scss file. But If I do so , most of the rules i set in my media queries are overwritten and i dont want to spam my media queries scss file with !important rules, i dont know how to fix this.

ps: I dont know why my solution in solution to design comparison is off, I looked at the page in Chrome , Firefox and Edge and it looks ok there.

First time submitting a solution, as well as first time using Github.

• Is my README file good enough or did i miss to give some key informations ?

I am not sure of some of the paddings and the shadow for the card but think the overall results is decent.