All solutions

Any feedback welcome. The code itself is quite messy, tried to organize it by declaring the variables per step at the top, then declaring the functions below those. Quickly found that scrolling up and down was more of a drag, and especially as the file got bigger I noticed that having (almost) all variables at the top did not really offer any benefit anymore. At that point I gave up trying to organize it, but it is noted for the next project. We live and we learn.

I was often wondering if my way of doing things was the most efficient (unlikely) or even considered bad practice. For example, the way I hide and show elements in this code seems a bit 'basic'. I knew creating elements and appending them was an option, but with the way I started the project (a bit naively just went straight in) I felt it would be too much of an effort to make that a thing.

So if there is any feedback on that, it would be very welcome. Things that are bad practice, things that can be more efficient. But also maybe things that are actually good practice and efficiently done.

Most differences between my project and the design images (I did not have the design files - used the free version) are intentional as I prefer it (e.g. displaying the yearly offer and resetting the add ons after going back to step 2) or small details which would be easily correct with the design files (font sizes, colors, etc.).

Also definitely did not forget ( ;) ) to make it resizeable to mobile. Will do that in the near future, as well as adding some transition effects to make it all look and feel nicer.

I had some issues with the review boxes when scaling my screen down, at certain points the text overflowed outside of the boxes. I couldn't figure out how to fix that. What I did now was take the critical screen sizes and lower the font-size until it overflowed again. I assume there should be a more efficient way to do this?

I also had problems with the placement of the quotation marks. I couldn't manage to stick them to the first box. Especially for the mobile design, where I placed the boxes in flex-direction: column, they start out on the left and as I lower the size, the boxes move over them and they end up on the right of the boxes. This all makes sense, as I used a static measurement to place them. However, I have similar issues with percentages and it just doesn't look good.

• Used this challenge as a 'more info' page following the other landing page challenge, as I wanted to use working links on the landing page *

I had some issues with the placement of the stats (messages and communities), I couldn't get the pink images to line up with the text as well as in the design. Also the numbers were being very difficult to line up (in the design '1.4k+' overlaps 'communities created', but I couldn't get that to work. Possibly because I used a different font(size)?