In this case, the background was a challenge! i would love your opinion and feedback.
I also added a hover on the profile pic, this wasn't included on this project but i wanted to practice with it and I thought it would be nice!
You have everything in your code, you just added words top, left, bottom, right in the background-position (which was unnecessary). Remove the words and you will see it work.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Hi, thanks for your attention. I am looking for feedback to improve quality coding. I try to use SEO in my code although, I feel it is quite awkward because I don't really know how to use it correctly. If there is any advice, I will be appreciated! This is the first time I am using CSS Gird (Normally I only use Flexbox), is there any other way to achieve the result without using gird-template-areas? Thank You.
If you like flexbox you could have used it instead of grid template.
Making 1 parent div with 3 div children inside. Children: 1) .left-container 2) .middle-container 3) .right-container
Inside .left-container is supervisor , in the .middle making 2 children divs (Team & Karma) and .right is calculator.
I still can't work well with background images.
The position might be a bit confusing, here you can find more info to clarify: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg);
background-position: -10px -10px, 355px 125px;
background-repeat: no-repeat, no-repeat;
In your code you've started good, you need to modify the background-position how many pixels or percentage to go in which direction: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
From my code:
.bg {
background-color: hsl(185, 75%, 39%);
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
background-position: -288px -498px, 633px 253px;
background-repeat: no-repeat, no-repeat;
justify-content: center;
height: 720px;
width: 1440px;
}