Profile card component using HTML and CSS

Community feedback

• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @MishalZia ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like BEM structuring on your project.

  Here are some of the tips I like to provide. You used only 1 image for background here, and I think design requires 2 images. That is challenging part of this project. Using pseudo elements or as Mansour adviced above you can use 2 images for background.

  https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  1

  ---

  

  Mishal•130

  @MishalZiaPosted almost 3 years ago

  Hi @tymren608 Thank you for the kind words. I do the same as mansour suggested and it worked As I am learning sass/scss I have checked your code too which is very helpful.

  Thanks a lot.

  0
• 

  Mansour•220

  @Mansour0007Posted almost 3 years ago

  Hi Mishal good job try this on the body

  background-image: url(/images/bg-pattern-top.svg), url(/images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh;

  the positioning of both images hope that will help you good luck

  1

  ---

  

  Mishal•130

  @MishalZiaPosted almost 3 years ago

  Hi @Mansour0007 Thank you so much. I implement the background-position property just as you mentioned and it worked. again thanks a lot.

  0