Design comparison
Solution retrospective
Just wanted to ask how can we know about the width of the container on which we are working on, because obviously we couldn't know about it by seeing the design on the image.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Omer, Congratulations on completing this challenge!
❓ Answering your question:
You can do it in two ways you can use a design program to open the jpeg file, for example photoshop and figma, use a rectangle and measure the elements. Or you use a google chrome extension called
pixel perfect
that allows you to overlay your html output with the jpeg and then compare both designs.To improve your box-shadow, you’ve to have in mind two things that make a good shadow,
blur
andlow opacity
for smooth shadows. To improve your current shadow, decrease theopacity
and increase theblur
, try this value instead:box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);
If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/
✌️ I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord