All solutions

I wasn't sure if I should use just buttons or a <form> for this challenge. I used the buttons for simplicity, but if its better practice to use a form let me know. I also wanted to validate that a rating was selected before the user can submit. I'm not sure if that was part of the challenge, but that was one of the first things I thought about. I initially tried to validate the value through JS, than maybe alert the user to select a rating before submitting, but couldn't get it to work, so I opted for making the submit button inaccessible until a rating was selected. That I figured out by googling, and if there is a better way, please let me know since this is my first JS challenge. I'm also concerned about accessibility, and that makes me think a <form> with <input> and <label> would've been a better choice.

I wasn't sure about the mobile design... The style guide says mobile design is made with 375px width, but the provided design photo is 750x1600px so I used that height and width for the mobile view and got it as close as possible. If this was wrong, let me know, so I can go back and fix it. As always, any other feedback is welcome too. This was the last challenge using just html and css, and I look forward to implementing javascript and attempting those challenges.

Edit: corrected the mobile view with 375px screen width.

I tried to do the desktop design with grid initially, but couldn't get it quit right. Any tips or links to such solutions are welcome. Also my concern is that maybe I'm writing too much css, so if anyone could link their solution/code for me to study, I find it very helpful to look at code of more experienced devs.

I didn't know about grid areas, so had to do some googling to arrange the cards. Hopefully that was the right way of doing the card arrangement. I noticed my sizes are consistently off by a little, usually smaller, but I guess that comes with practice. I've tried to open the design photos in photoshop, and via the select tool get the sizes, which somewhat works, but when coding in those measurements in vscode, they seem to be off by a bit, so it takes additional calibration. I also overlay the design photo with the solution and check that way to. If anyone has any tips regarding that, please let me know.

I changed the background svg opacity to make it easier to work with, but ended up keeping it because I thought the design was more interesting that way. I ended up using just flex for both mobile and desktop design, and used translateX and translate Y to create the cascading card effect. Not sure if those were the right calls for this challenge.

The most challenging part for me was setting the background elements, I initially tried setting each as a class with absolute position, but in the end used background-image and background-position. It took me a lot longer to complete, hopefully the code is not too spaghetti. If there are better solutions, please let me know, thanks in advance as always!

I used <section> for the columns, not sure if that was the right choice. Also, not sure if my button active state code is the cleanest but it works. I changed the colors playing around with svgs and background colors. As always, any feedback is much appreciated.

This was my fifth challenge and I tried to do it in a single session and submit it as is to test myself. I feel like I need to tweak it a little more, so I'll definitely continue to work on it. I think I could have used <picture> like in the product preview challenge, but opted to try something different this time. Also, for some reason, the image overlay layer is not quite like the design, I used the accent color and opacity for it, but its not exact.

For this challenge, I tried to keep use of divs to a minimum, but still had to use them a fair bit, especially for the plan box. I didn't know how to separate and arrange the elements in the plan box without putting them in separate divs and classes. If there is a more elegant solution, please let me know, as I'm looking to develop good practices early on as a beginner. I also added a dark mode option to try to implement the javascript I'm still learning, and also make the solution a bit more unique. I was able to find a resource that helped me do it. I'm sure it maybe doesn't follow best UI design practices as I'm still learning that too. Also, this might be trivial, but if someone has tips on matching that overlay slider of our design to the original solution design, please let me know. I was wondering if it has to do with the way you take the screenshot. Thanks!

Even though the challenge was fairly straight forward, it took me some time trying to get it as close as possible, especially the text. I tried to open the design photos in photoshop and get the sizes that way. If this is cheating, let me know, but I figured in real work situations you would work off designer's files anyway. I usually try building a challenge a few times after completing it, or building it differently in some way, therefore, as always, any feedback is much appreciated. As I'm still learning, I'm somewhat hesitant to comment on other peoples solutions so I don't give someone bad advice, but very much appreciate these challenges and the community, and will work on that going forward. Thanks!

Wasn't quite sure if my design was on point, I can definitely see how having access to design files might be beneficial, and as projects get more complex, will upgrade. As I'm still learning, any feedback regarding responsiveness, accessibility, best practices, is very much welcome.

Lines of text don't match the design photos exactly, as in where the lines break and new lines start. Wasn't quite sure how to achieve this exactly, any feedback regarding this issue or the solution in general is greatly appreciated as this is my first challenge.