html5 css3

👾Hello Maria, congratulations for your new solution!

I saw your solution and the structure is fine, but you can do some adjustments to improve it.

For example, you can reduce a bit your code deleting some unncessary divs, you've really a lots of divs and some content can stant alone without the div. Doing that you've a clean code and more control over everything.

Other thing you can improve is the box-shadow that is too hard, you can create a smoother shadow playing with blur and opacity values.

Try this value instead: box-shadow: -0.625rem 1.25rem 1.875rem rgb(45 50 72 / 20%);

To create better shadows without looking the code, use this online tool: https://www.cssmatic.com/box-shadow

👋 I hope this helps you and happy coding!

Hey there, design is pretty close to the original. Awesome work as your first challenge! My suggestions:

• For semantic html you should wrap elements with landmarks. In this challenge you can change .card-container and .attribution elements to main and footer such as <main class="card-container">...</main> and <footer class="attribution">...</footer>.
• Also you need a <h1> heading in page for same reason. For this challenge to add in a way makes sense, you can use it on person name instead <span>. Semantic html helps assistive technologies to navigate easier and result in better SEO.
• As for CSS, in a small project it is totally fine aligning items with height property. But for best practice I suggest not giving height to parent elements and practice aligning items with margin, padding etc. and let the parent element's height defined by it's children. This way you'd prevent any possible overflow especially in dynamic sites.