Skip to content
Submitted almost 4 years ago

Profile Card with HTML and CSS

Anurag Mohapatra•20
@mohapatraanurag
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @RenszCamachoPosted almost 4 years ago

    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

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