Profile card using HTML and CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @mcclellangg 👋🏻

  I've got some quick tips to help you fix the background-color, background-image and a couple of other things.

  • In your markup, <div class="main">...</div> should be <main class="main">...</main>.
  • img tag must have alt, in this case it can be the name of the picture.These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Here's how to fix the background, in case of future reference you can check out my solution

  body {
      background-color: #19a2ae;
      background-image: url(./bg-pattern-top.svg), url(./bg-pattern-bottom.svg);
      background-position: right 52vw bottom 40vh, left 50vw top 50vh;
      background-repeat: no-repeat;
  }
  

  I hope this was helpful 👨🏻‍💻 one last suggestion would be to reduce the card size, but that's just my opinion 🙃 Cheers 👾

  Marked as helpful

  1
• 

  Brett•80

  @blpetersPosted about 3 years ago

  It looks like you may need to apply a background-color to your .main class in CSS. This should add a solid layer of color on top of the .svg image on the background and should "darken" the background. The correct color should be listed in the style guide. I hope this helps

  1