Hi there!
This challenge was interesting for working with full screen images, mobile one was easier, with desktop i've found some difficulties while working, but i think is fine now, if you have any feedback or correction is well accepted!
Another thing, for a coherent color scheme in dark mode i've basically copied the original svg and made another with needed colors, there is a better solution for achieve this?
Cheers
Love the dark mode option and the loading animation, definitely something i'm gonna try. At about the 1050px mark of the screen, I noticed the image goes up and it leaves a big empty space below it, then as you close it more, it goes to mobile view. I think try to have it take up a hundred percent of the height as your closing it past the 1000px mark.
The layout is great! A few things, the background color of the button should change when you hover over it, and also the main card should be centered horizontally in mobile view. Also for your buttons, instead of having three separate classes and giving them all the same properties for each button, you can give your buttons the same class, and style that one class in CSS giving all three buttons the same properties. It saves a lot of space.
This was more challenging than I thought it would be. I don't fully understand grid yet. Working on it. I always end up feeling my code could've been cleaner. Also, first attempt to implement BEM. I haven't grasped it yet. :) Feel free to comment!
Looks good. I would say for this project all you need is flexbox, not grid. Grid is good if your your containers go in two dimensions, both horizontal and vertical, Flexbook is good if you only have one dimension. Since these containers are only going horizontal, flexbox is all you need.
I'm not sure the way I've put the background image is the correct way to do it. I wanted to resize my background image keeping its original ratio and making a container exactly the same size of the image. Any suggestions or feedback ?
Looks pretty good. Two things: the button should change color when you hover over it and the cursor should change to a pointer, also in the mobile view the main card should be centered vertically.
