Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Nikul, congratulations for your new solution!
Your solution is really good done, I can see that you've paid attention to the details and have done the hardest part (the background). Thats amazing. Here's my tips for you:
You can add these two circles as a background, adding it to the body with two keys properties,
background-image
andbackground-position
, note that the comma inside each properties declare the single modification for each circle separated.REMOVE THE SPANS WITH
DISPLAY: NONE
AND THE BACKGROUND FRON THE CONTAINERbody { background-color: hsl(185deg, 75%, 39%); background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: top -332px left -56px, bottom -568px right 137px; } .bg-pattern-top { position: absolute; top: -45%; display: none; left: -15%; } .bg-pattern-bottom { position: absolute; bottom: -55%; right: -10%; display: none; } .container { /* background: var(--Dark-cyan); */ width: 100vw; height: 61rem; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; }
👾My rating for this solution: ⭐⭐⭐⭐⭐
👋 I hope this helps you and happy coding!
Marked as helpful0@nikul-sagadharaPosted about 2 years ago@correlucas Thank you Sir for suggest better code, its helps me a lot.
0 - @nikul-sagadharaPosted about 2 years ago
Hy.. guys i just created this awesome profile card, please do checkout and give feedback !.
Thank You :)
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