@correlucas
Posted
👾Hello Oyindamola, congratulations for this solution!
Your card component seems great, but you can improve it even more.
Here's some quick tips for you:
1.First thing we can fix here is the background-image thats not filling all the screen, you can do that using some background properties, the more important in this case is background-size: cover; to allow the background gets all the screen without get same empty gap. See the fixes I did to your code below:
body {
background: url(images/pattern-background-desktop.svg), hsl(225, 100%, 94%);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
2.In order to keep the component flexible and responsive, you need to replace the card width with max-width to allow the card to behave flexible.
.card {
max-width: 450px;
}
3.Improve your box-shadows just creating them or in Figma or using an online tool for that, the box-shadow you've applied to the button is a little bit out the position and too strong.
Try this value: filter: drop-shadow(0px 8px 6px rgba(7, 23, 255, 0.245));
Or you can use this tool to create your own shadows: https://www.cssmatic.com/box-shadow
Hope it helps and happy coding!
Marked as helpful
@Oyinalade
Posted
@correlucas Thank you very much.
