Skip to content
Submitted almost 2 years ago

CHALLENGE HUB Profile card component

Kaique•40
@KaiqueNeres
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had difficulty making the background of the body, as it came with two images, and I could not position myself equal to the challenge.

Initially I had difficulty with the color of the border below the name of the city, because I was not getting the color tone right, but I managed.

Community feedback

  • Mirza Monirul Alam•680
    @WebDevMirzaPosted almost 2 years ago

    Hi,

    Congratulation on completing this project. You have already found a problem regarding bg-image.

    HTML:

    • Every html should have a main tag that you have not applied. Wrap everything inside <main></main> to solve accessibility WARNING that you have now. main is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School

    CSS 🙂

    body {
  background: url(../img/bg-pattern-top.svg) no-repeat right 50vw bottom 40vh,
    url(../img/bg-pattern-bottom.svg) no-repeat left 50vw top 54vh;
 background-color: hsl(185, 75%, 39%);
}
    • This will add the background images at the position that they should be. 🧐

    Apart from this, the rest of the part looks nice.👍

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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