Design comparison
Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Community feedback
- @Sayf3rPosted 7 months ago
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 helpful1@salentipyPosted 7 months ago@Sayf3r I fixed it! Thank you! It appears to be working now. :)
1 - @fish-ladderPosted 7 months ago
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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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