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 with HTML and CSS

@mohapatraanurag

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Could setup the circles for 1440px and 375px but when checked other resolution the bottom circle moves around. Would appreciate if anyone can give feedback on this.

Working with sass for the first time and with HTML and css after a while.

Community feedback

Renszo Camachoβ€’ 1,615

@RenszCamacho

Posted

Hello, πŸ‘‹πŸ» mohapatraanurag. Well done my friend πŸ‘πŸ‘πŸ‘. Lovely job on this challenge, place properly the background image is quite tricky.

Just a suggestion in my humble newbie opinion. 😊

-I've been checking your code. And I would approach that, like so.

-Try to remove all unnecessary comments.

-Remove the bg-pattern from the Html, this way you avoid those Html issues. And in your sass file _global.scss I would place the bg images.

body { background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-top.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 38vh, left 49vw top 51vh; }

I know, there are many ways to place background properly, But that's how I solved it.

I hope, it helps.

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