Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card using HTML and CSS

@mcclellangg

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


For the life of me could not figure out why the background color is so light, any tips on that would be great.

Also is there a better way to get the image to overlap the two flex items it is between other than using absolute/relative positioning?

Community feedback

P
Ken 4,915

@kens-visuals

Posted

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

@blpeters

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

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