Profile card component using flexbox and background position

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @madhavan-ts!

  Your solution looks great!

  I have a few suggestions for improvement:

  • First: (Not a suggestion) Your use of BEM methodology is great, keep doing it 😊

  • Second: The background pattern with the circles is a bit tricky, but here's how you can do it:

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

  • Third: For semantic reasons, and since your page does not have a main title, you can replace the <p> with <h1> on the name of the person.

  • Fourth: Still about semantic HTML, you can replace your div.card with main.card.

  All these tag changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  1

  ---

  

  Madhavan•340

  @madhavan-tsPosted 11 months ago

  @danielmrz-dev I have made the changes that you have mentioned in the semantics and I had a hard time figuring about the background-position property. Thank you for the suggestion about the better approach. Looking forward to make use of this concept that I have learned today in any other projects🫡.

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  @madhavan-ts

  I'm glad I could help 😊

  0