All solutions

I really liked the way this turned out and it was a great project to learn Next.js.

I wish I could have figured out exactly how to get the Masonry layout moving across rows instead of down columns but I'll keep looking for a good solution to that.

I wanted to do this challenge to learn how to make a custom range slider and a toggle switch which was much harder than I anticipated. This also seemed like a good project to continue practicing Object Oriented Programing with ES6 classes. I was able to create a slider class and attach methods to it to create the slider functionality and color styling. I had not originally intended to create two slider objects instances but having the ability to create one for mobile and one for desktop was easier than doing a bunch of repositioning with CSS.

I really like this component and it has a lot of useful features that I could use in other projects. One thing I would like to come back and figure out is how to attach the event listener in the class object. I know it can be done but I was having trouble implementing it.

For anyone else looking to do this project I found these articles really helpful. https://css-tricks.com/sliding-nightmare-understanding-range-input/ https://www.w3schools.com/howto/howto_css_switch.asp

I had two goals in mind while doing this project.

1 - Create the layout only using display grid. I've gotten in the habit on relying 95% on flexbox and I need to practice using grid more.

2 - Really work on positioning background images in a more precise manner. I found that I could place and keep the background images in the correct position using edge offset values in the background position where before I was just trying to use percentage values with no edge reference. This worked so much better.

This was a good practice working with img layering, positioning and z index priority. Initially I struggled with having the main person image not being allowed to overflow out side its div container while allowing the box to appear like it was coming out of the container.

To solve this I placed the box img out side of the section that overflow: hidden was applied to and used absolute positioning to move the box where it needed to be and it worked nicely.

One thing I wish I could make better is the positioning of the background pattern. Is there a better way to position to make it where it is more responsive. It looks great to me at 1440 X 900 and below but when going larger the positioning gets lost and to make it work like I am currently doing to I will have to add a ton more @ medias to reposition the top and left absolute values.

I'm not great with animations and this was a challenge for me. I found the Green Sock animation Library very helpful and would suggest others struggling with this challenge check it out https://greensock.com/.

A couple small thing that still bug me are my apostrophe will not tilt. I tried wrapping it in a span and using trasform: rotate(30deg) but that did nothing.

Also in the design provided it looks like the card is folded forward slightly and I cant seem to replicate that look. Any suggestions? Thanks in advance.

Wow this was a fun challenge. Thanks frontendmentor team! It was a great design for flex-box practice and I learned a lot.

The submenu was a challenge for me but I was able to discover some nice solutions to create the functionality I was aiming for. More details on that in my README.

Its not 100% mobile responsive for IPad and tablet view so I still need to work on that but mobile and desktop worked out pretty nicely.