Skip to content
Submitted almost 4 years ago

HTML & CSS

Paulo Borges•20
@pauloboliveira
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 was unable to add one of the images of background, which name is bg-pattern-bottom.svg. When I tried to position it on the right bottom, the image expand the browser even when I put the relative on display tag.

Community feedback

  • hagureshinma•135
    @hagureshinmaPosted almost 4 years ago

    Hi Paulo.

    Instead of using the <img> tag try Calling the background images as such, using the property background-image; this way you can even have multiple background images in a single element and control their size and position independently.

    You can still tweak the solution a little bit, take a look at the fonts sizes/styles and the white space around the picture.

    Notice that the page should display the card correctly in a minimum width of 375px. Current browsers have a built in function to test this called Responsive Design Mode or Device Mode

    Happy coding!

    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