Hi everyone. I did this project and also learnt some new techniques during the way of bulding it. In this markdown I want to tell some of my issues when bulding it and also the things that I learned from building this.
1- HTML
2- CSS
3- A little bit of responsive design
1- Well first of all I used linear-gradient myself without the help of anybody and I think I did actually a good job.
2- During making "76 out of 100" circle I had the problem that the text were not at the center of the circle. Well I could use margin and padding to put at the center but I wanted to happen automatically. So after putting some time and experiencing different kinds of ways, I used flexbox but in a column direction and used align-items and justify-content to put at the center. It was fun!
3- Well I used flexbox pretty much in this design and I think it really expanded my knowledge of flexbox.
1- First of all I don't know why I couldn't put the main div at the center with margin: 0 auto; . I used this property all the time to put the main div at the center of the body but it didn't work. So I had to put it at the center using flexbox.
2- Another problem is the corner borders of the 4 boxes in right. I searched a lot for it, multiple linear-gradients, svgs and many other ways were the solutions but I couldn't figure out any of them!
3- Also I wanted to put transtiton for the "continue" button but it seems that background-image doesn't take transtion so I couldn't find a way for transtitioning my button from the state color to the gradient color while hovored.
Anyhow, I think my design was pretty close to what it is in frontend mentor. I hope you liked it too and I really appreciate your help for the problems that I mentioned above.