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

HTML, CSS

@bolanleola

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


I'm finding it difficult to add background images (.svg) to the body.

Please any suggestions?

Community feedback

Rachael 610

@RMK-creative

Posted

Hi Hawawu, congrats on completing another challenge 😀

Just a few quick things to help you get closer to the design:

  • there is a slight white border that I can see, you could remove it from .card

  • you’ll need to add the front-weight 700 to the google link in your html in order to get the bold font that you’re after: quickest way is to simply type ;700 directly after 300 in the link. Alternatively you could go back to google fonts and select all the font-weights you need and copy paste the link again.

  • Also don’t forget to add alt to the photo, for people who use assistive technology

And one final tip, after you have submitted a challenge, you can then easily see a filtered list of all previous solutions for the same challenge. It’s in the visit challenge hub, then click on solutions - you’ll see only the solutions for the challenge you’re in.

Marked as helpful

2

Faris P 2,810

@FarisPalayi

Posted

@RMK-creative I can't believe I haven't noticed that yet. Thanks for this comment man👍

1

@bolanleola

Posted

@RMK-creative thank you so much

1
Faris P 2,810

@FarisPalayi

Posted

Yeah, your image paths are currently incorrect. Since images are in the images folder, try: images/put_your_image_name_here

Marked as helpful

0

@bolanleola

Posted

@FarisPalayi thank you for your feedback. I tried using this but still not getting it

https://bolanleola.github.io/profilecard/

1
Faris P 2,810

@FarisPalayi

Posted

@bolanleola There's a typo in background-position, change botto to bottom😇. To get the image positioned correctly, If you want to, you can take a look at my solution, or you can use viewport units like vh and vw in the background-position and play with it some time, is one of the harder part of this challenge.

To prevent these kinda typos in the future, you can add some CSS linting or formatting extensions to your code editor.

0

@bolanleola

Posted

@FarisPalayi thanks. Kindly share your solution URL

1
Faris P 2,810

@FarisPalayi

Posted

@bolanleola Okay, here's the link

You can just click on someone's name to see their profile and all the solutions they have done so far👍

0

@bolanleola

Posted

@FarisPalayi thank you so much

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