Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Challenge

alexivany 80

@alexivany

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@AssadullahADELYAR

Posted

congratulations on completing this challenge 🎉🎉

This is great but I think you should consider changing some things:

You don't need to have extra div's to set two background-images on your body Instead you can do something like this:

inside of your body

body {
background-image: url(images/bg-pattern-top.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: top -40rem left -30rem;
}

ofcourse you can use more than one background image like this:

body {
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
}

please check This

I hope it was helpful for you👍👍

Happy coding 🙂🙂

Marked as helpful

1

alexivany 80

@alexivany

Posted

@AssadullahADELYAR Thank you very much for your feedback! Honestly I wasn't sure the best way to go about creating the background image, and the way you mentioned makes a lot more sense than my convoluted container way lol

I've updated my code with a much cleaner solution, thank you for your help!

0

@AssadullahADELYAR

Posted

@alexivany I am happy that you find my feedback helpful.

If you want to practice CSS flexbox, I recommond you to use Flexobx-Froggy it is fun game.

there are CSS Grid games as well.

Let me if it was helpful Happy Coding

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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