I liked how it looked, but I think it would improve the box-shadow and the responsive size ratio.
What challenges did you encounter, and how did you overcome them?The responsive part, simply.
What specific areas of your project would you like help with?Hi there! The solution looks awesome and I like how you structured your HTML. Your use of variables in your CSS was really cool, too!
One thing that could help with the responsive piece is to use a percent value for your .container width in the @media query instead of a hardcoded value like px. This will make your design fit really well especially on the smaller screen sizes. So you change this:
.container{ width: 320px; padding: .6rem; }
To this:
.container{ width: 90%; padding: .6rem; }
Sizing the box-shadow (or any element really) could match closer to the design by looking at the measurements in a tool like Figma using the fig file. It's super helpful for this and even border-radius values, dimensions, etc. It's a take a bit to get used to how to inspect the elements but really worth it!
Hope this helps and keep crushing it!
asdf
What challenges did you encounter, and how did you overcome them?asdf
What specific areas of your project would you like help with?asdf
Hey, there! Great job on completing the challenge!
Your solution looks great and using variables in your CSS was a great idea!
Here are some suggestions that could also help:
Instead of using a <dev> for your .card-container, you could use the semantic <main> tag to make your site more accessible.
Also, a great way to make your site responsive for mobile devices is to use @media queries for certain screen resolution max-width breakpoints. You can read up on media queries here.
While this is more of a preference, I would suggest using two spaces to indent your child HTML tags instead of tabs in order to structure it better and make is more readable. Collaborators and your future self with thank you!
Over all, it looks great! Hope this helps and keep crushin' it!
