Design comparison
Solution retrospective
I had some trouble dealing with the 2 background images that I suppose to put in this challenge. I try to make it a close as possible the best I can.
Also, it took me a couple of attempts to make text elements appear next to each other using wither inline or inline-block.
So far, I think I did everything I can to make my solution look close to the image on both versions of desktop and mobile.
Feel free to check out my code. I welcome any feedbacks, tips, and ideas. i have more to learn and improve.
Community feedback
- @yishak621Posted about 2 years ago
The main challenge of these project is to practice the svg background adjustment ...so to make long story simple here is how u done these project...u are given two circular shaped svg picture and background color ...so the background of the card is the mixture of three things ....but unfortunately the circles are aligned center so first u will add them and push the bottom svg picture out of the screen by psuedo elments
/*adding the top svg after the container*/ .container:after { top: 100%; left: 100%; background: url('./images/bg-pattern-bottom.svg') no-repeat top left; /*to expand to top and left*/ }
and for the top svg pic u will first place it in the center by/*adding the top svg before the container*/ .container:before { top: 0; left: 0; background: url('/images/bg-pattern-top.svg') no-repeat bottom right; /*to expand to bottom and right*/ }
and then for the whole container that is the parent of all/*Containers*/ .container { display: flex; min-height: 100vh; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; background: var(--color-one); z-index: -1; }
if u notice in the above i say position relative to place its circular svgs absolute..then here comes the magic part finally u will move both svgs to the left -50% and to the top -50%/*psuedo elments*/ .container:before, .container:after { position: absolute; content: ''; width: 100vw; height: 100vh; background-size: auto; transform: translate(-50%, -50%); /*to the left and top*/ z-index: -1; }
if u don't know about psudeoelments after and before please review again thanksMarked as helpful1
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