All solutions

• That image layout was hard!!! Like rock inside an onion. I persevered and finally got it. I ended up going through the SVG file for the geometry of the platform and then learned how to make my own SVG, so I could use them as the backdrop and the wireframe outline above. If there is an easier way, please let me know!

• I set out specifically to do the accordion with only css because I wanted the practice (Why I'm here at Frontend Mentor). The choice reinforced how limiting the ID selector is, as well as the 'for' attribute in the <label> tag. It led to a ton of code duplication that would make me want to do the project again with JS. I realized I should have gone with radio buttons instead of checkboxes as it would only allow one question open at a time vs. having them all opened.

If I could make the accordion CSS any less duplicated without delving into javascript, please let me know. I tried all the ways I could find to avoid the copy paste increment route.

Thanks!

• I used nth-child for positioning the staggered divs and placing the stars. That was fun.
• Learned how to use the open / close quotes in css. Very cool.
• I feel like I'm not using flexbox to it's full advantage. In particular, flex-basis and flex-grow / flex-shrink. There's something there that hasn't sunk in.
• I need to look back more into units: em rem px % vh vw and better understand when to use them. In particular. em and rem, and % and vh/vw.

• I liked this one. I bet it will require some rework to be responsive though.

• The design guide has the two white text colors mixed up compared to the design spec.
• There should be an 'nth' word selector for text strings to manipulate via css. Styling that one word gave me a bit of trouble for all it was.
• Overall, I feel like I am getting more comfortable completing the challenges (desktop only). I am learning or refining something on each challenge -- either something I thought I knew how it worked, or searching to find how to make an element do what I want.

• Was I missing a color for the plan container? I just took one of the colors and turned down the opacity to make the music icon stand out.
• Why were there two backgrounds included in the design files?
• First time really using css custom variables. At least for colors, they make it a lot easier to style due to VSCode autocomplete when you type in the '--".

• I feel like I could be using more divs to make the page layout easier.
• Is my CSS readable? I try to be logical about placement of selectors in the stylesheet so the stylesheet flows as much as possible with the page flow.
• I am considering never appending 'cont' to a class again in favor of just spelling out container... I spent over 20 minutes trying to get a hover effect to work and it was "-cont" in the html, and "-container" in the stylesheet...

• Is my background too flexy? I feel like the moving circles are a bit distracting on resize.

• I am not sure that I implemented flexbox the best way for this challenge.
• Is there a good way to get measurements from a design photo when you don't have access to the design files?
• I completed this challenge before reviewing the comments on the QR code challenge I did earlier so I wasn't able to incorporate them into this one. Will do on the next one though.

• How to get the heading text to break on "front-end" consistently without a <br> tag? I sacrificed matching the ending word to make the margins match.