Design comparison
Solution retrospective
how can I improve my code pls? responsive design is my biggest issue how can improve it? thank you!
Community feedback
- @correlucasPosted about 2 years ago
Hello again Anass, here's one tip about the background image:
The step by step to include the two circles as background positioned on top and bottom:
Remove the
background-color
from the container and add it to thebody
to make sure this color background will display it full screen..container { width: 1440px; height: 800px; /* background: hsl(185, 75%, 39%); */ display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 0px 10px 20px rgb(63 92 97 / 16%); }
To add the circles (bottom/top) in the background, the best way is by using
background-image
to manage it since adding them to thebody
you make sure it will be under everything, see the properties below and see that the comma inside each properties declare the single modification for each circle separated.body { 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 -500px left -400px, bottom -700px right -250px; display: flex; align-items: center; justify-content: center; height: 100vh; }
See if works for you!
Marked as helpful2 - @sanba-anassPosted about 2 years ago
hi Lucas thank you for the useful tips i will fix every single challenge in the near future. imay add some animation too thanks again man really useful stuff as always! 😁😁
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