All solutions

It's not the best one, but it does the job.

I don't know how to :

• Modify the colors of the icons, it's surely because I put them into "<img>", which tag should I use instead ?
• Set "opacity: 0.3" except for the orange border for the thumbnails.
• When the thumbnails are in big screen, how to add a white background when we hover it or click on it. Because the background is "rgba(0, 0, 0, 0.7)" so when we hover it or click on it the bg is black and I haven't found a solution to set it white.

Any recommendations or thoughts about my code guys ?

Hey there, but I am pretty noob with the DOM so I typed a looot of lines of code and I am sure I could have done this much smaller concise and understandable if I would know how to create only one function for all the 5 notes instead of create one function for each. So if someone is good enough to explain me, I take it! Everything is working well tho, so don't forget to click on the "5" and submit it :p

I struggled a bit because of some details like the pictures. First I thought to use a div with background-image, but it wasn't working very well so I thought about put the 2 images with "<img>" in the code and then change to "display: none" for one of them depending of the screen size. I still could do better with the responsive, any thought fellows?

I still don't know how to center the div vertically [UPDATED]. But anyway everything seems good and responsive. I don't get why the "up" word of the "sign up" text into the button go to a new line when we use the zoom around less 1300px.

My first challenge. Here it is.