All solutions

Still needs a lot of work but this is the basic rough-out. Need to make it responsive and work on mobile. Right now the phone thing is hard-coded pixels... not sure how I'm going to deal with this problem yet...

Kind of a difficult one. I iterated over a few solutions for integrating the curved images before eventually settling on the current solution. Still need to do responsiveness and clean up the code a bit...

What could I have done better?

Just got the desktop version up. Optimized for 1440px wide display. Not really responsive and no mobile yet...

Not the best solution. Still need to do mobile and make it responsive.

Not very elegant when it comes to responsiveness. I basically wrote the desktop version for a 1440px width and then changed everything to match on a 375px width using a media query.

Probably quite bad in terms of responsiveness. I hard-coded things to fit on screen widths of 1440px and 375px. Just trying to get comfortable with layouts before I start with fancy stuff... Only thing I didn't bother with was the white dot on the progress meter. Used a pure CSS triangle with absolute positioning to get that speech bubble effect.

Pretty bad solution. Had a lot of trouble trying to work with Grid. I just made it work for 1440x900 and 375xN for mobile layouts. Will probably need to revisit sometime in the future to make it good.

Fairly simple implementation. Learning Grid currently so it took some work but conceptually quite simple. Please let me know how I can improve, thank you!

Not perfect. I didn't know how to replicate the top border so mine is a bit different. I had some trouble with this one... first I tried using grid but there were small things that were making it more difficult than it should have been IMO so I switched to flexbox. I also ignored mobile for time's sake. Will likely revisit this challenge in the future. Please lmk what I can do to make this better, thank you!

Handwritten HTML and CSS. Learning Grid and Flexbox, trying to make good use of both but I felt like it got a little hairy. Didn't bother with mobile because I've already spent too much time on it and my overall design was poorly implemented so making it responsive was going to be even hackier than it already is. Please help me out with any suggestions you may have, thank you!

Realized I should probably use aria-hidden="true" for the image that are for decoration only, like the background SVG's. Didn't include that in this project but I'll go for it next time. Please let me know if there's anything I can do to clean this up or any best practices I should be following. Thank you!

Attempt at making my pages more responsive. Used breakpoints listed in Edge as reference. Only bothered with making it nice for 1440px and 375px, but the code is there for each breakpoint. Please let me know any improvement I can make. Thank you!

Probably my worst work. Forced a lot of things to align with weird hacks and I was spending too much time on it so I didn't bother with mobile layout. Maybe I'll revisit it sometime.

Trying to avoid hard-coding pixel values except for border-radius. Had some trouble getting the background image to work properly so that it would shift when the viewport is resized. Works pretty well but maybe there's a better way? Any criticism is welcome. Thank you!

I couldn't quite figure out how to get the hover to work on the NFT image. I tried using :hover pseudo class and ::after pseudo element, but could not get it to work. Any suggestions on code quality or styling would be very much appreciated. Thank you!

There are a few minor things I didn't bother with, like the spacing between the SVG and the text on the button. I'm using flexbox a lot for these types of challenges but please let me know if I should be taking a different approach, or if you have any tips on how to improve my use of flexbox. I tried to stay away from hard-coded values but sometimes it seems like it's necessary. I appreciate any feedback you may have, thank you!

Not perfect. Minor details should be cleaned up and my monitor is not so great with colors so I just made a best-guess given what I have. Please let me know of any improvements you would recommend in terms of style, best practices, optimization, or anything else... Thank you!

I tried to make my HTML as semantic as I could and not just spam divs. Please let me know if there are any noobie mistakes or optimizations I can do in either my HTML or my CSS. Thank you!