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

Social Links Profile

P
Julie 130

@salentipy

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

.

What challenges did you encounter, and how did you overcome them?

.

What specific areas of your project would you like help with?

.

Community feedback

Sayf3r 80

@Sayf3r

Posted

Hy,

I had the same problem as you with the image ! You must use relative path instead of absolute path. When you use absolute path your code looks at the root of the website. In this exemple the root is the github website and not your own website so your code can't find your photo https://github.com/salentipy/femnHTMLCSSsociallinks.

Replace your link with a relative path like this <img src=".\avatar-jessica.jpeg" alt="jessica randall headshot"> it should solve the problem

About your CSS, your card is not center vertically. You can easily fix this by using flexbox. You can add this in your body :

body { height: 100%; display: flex; justify-content: center; align-items: center; }

I found a very good ressource about flexbox. Feel free to take a look : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It's a detail but don't forget to add bold on your social links and resize the image of the profile. Overall you respected the design and you work is clean. Feel free to ask if you have a question :)

Marked as helpful

1

P
Julie 130

@salentipy

Posted

@Sayf3r I fixed it! Thank you! It appears to be working now. :)

1
P

@fish-ladder

Posted

Looks great, Julie. The styling is precise and your CSS is very simple. I like your use of custom properties for the fonts and colors.

It looks like your img src in your html file doesn't point to the location of the picture file. If you correct the path, your image should show up. Hope that helps.

Marked as helpful

0

P
Julie 130

@salentipy

Posted

Thanks so much!! @fish-ladder

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