
Solution retrospective
i was not able to set up the background 2 circles in a responsive way, they break when screen size moves
Please log in to post a comment
Log in with GitHubCommunity feedback
- @RenszCamacho
Hi, harsh.
I've been digging into your code. And this is how I would do it.
- I would give your card width, height, and a box-shadow.
.card-box { width: 353px; height: 376px; background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: -30px 50px 50px #00000030; }
-
I would delete the images from the Html. and places it in the Css.
-
Now place the card in the center, so in the main it would do something like this.
.main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
- Finally to the body I would place the background-images.
body { background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 38vh, left 49vw top 51vh; }
Hopefully, it helps.
Happy coding🧑💻
- @h-harsh
Thankyou soo much I got the things you said
Join 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