Profile-Card-Component-Solution

Your site looks pretty good. To add in the two circles to the background you need to use background-image and background-position. Here is what I did:

  background-color: var(--theme-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;
  /* top img is offset 52 percent of the vw from the right and offset 35 of the vh from the bottom*/
  /* bottom img is offset 48 percent of the vw from the left and offset 52 of the vh from the top*/

Hope you find this useful 👍

Hi Gerardo,

I can see your effort, You did great 👍

Here are some suggestions to improve your code:

Headings

• each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.

 <h1>Victor Crest</h1>

ALT

• images should have descriptive alt text, which is important for SEO and screen reader users

<img src="" alt=" Headshot of Victor Crest"

Accessibility

• you can use aria-labelledby to define a name/relation between the number and their titles for screen readers

<p aria-labelledby="title">80k <p>
<p id="title"> follower </p>

SEO

• you can add meta description for better SEO, it provides a brief summary of a web page

<meta name="description" content="..........."/>  

here are some helpful articles:

• headings best practices

• headshot alt

• alt text

• meta description

• aria-labeledby

hope you find this helpful. Happy Coding