All solutions

First time using an API on my own, not really sure what all of it means but I kind of understand it.

Let me know how it looks

Let me know how I went, I decided to add less padding in the bottom right container as I thought it looked better

Order preview card done with flex-box and relative units. Set up all color and font variables inside the root: element, use of flex box to center the preview card, as well as used flex to stack the buttons and annual plan/price. Transitions were added for mobile layout giving it a smooth transition for the media queries. CSS is a bit messy, just wanted to smash something out quickly and didn't refractor a lot of unnecessary code, such as the several display:flex,justify... etc. Let me know how it looks

Hey all, just completed the sunnyside landing page. Took me a couple of hours and decided to try some new things, such as; CSS variables, mobile-first design, implementing before/after pseudo-elements, and multiple CSS folders for different needs. It was also my first try at coding a hamburger menu without help, don't think it went too bad. I used a combination of flex-box and grids, with the use of relative units to keep it responsive. I tried to keep the code clean and DRY at the beginning but after a while, it got a bit hard so the use if !important was used for the header which was done last, I also tried to keep the HTML semantically correct and alt tags for accessibility. Let me know how I did :)

Stats preview card was done using flex-box to center the container, first time usage of CSS variables for my colors, the purple gradient overlay for the picture is slightly off as it was my first time doing it so if anyone has any pointers that would be awesome. Notes for future to change, use relatives units such as; rem and em, instead of fixed units like px to make it more responsive. Let me know how I did!

Hey guys, so I completed this preview card w/ flex-box with a fully responsive layout, and semantic HTML. Let me know how I did and where I can improve in.

I mainly focused on the design of it so the HTML isn't that semantic with only divs. I decided with a wrapper that is display flex and aligned and justified to center on the screen, padding to make some more white space. Let me know how I did!

Js and css code is a little scuffed probably a bit of repeat and unnecessary code written, wasn't too sure whether to change the class or js style attributes so I just did attributes so there is a big clump of code for the different themes down the bottom. I couldn't figure out how to format to 100,000 I got close though ahah. also i didnt know how to change hover color in js, I assume the way around it was to set an event listener for mouse over and have it set that way. Give me some criticism

Please be as critical as possible, all criticism is good criticism. Still new to this I had trouble trying to learn it up (this is my first frontend mentor challenge), had to hard code widths because it wasn't working properly, I need to work on the amount of code I have written down, I tried to follow the DRY rule I think. I tried to stay on top of semantic HTML, it was difficult trying to center the container so its a bit of funky code, flex => justify and align center wasn't working for me only align was, and I tried to keep it accessible but wasn't sure what else to add. Im familiar with js but I wanted to keep it just HTML and CSS so I've set the images to display none depending on screen size, and as I'm typing this i see i put too much padding/margin on the pricing for mobile but oh well. I appreciate the feedback from anyone.