@salentipy
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?.
Latest solutions
Responsive QR code component
Submitted over 1 year agoEvery advice or note about my project is welcome to improve my code
Latest comments
- @Sayf3r
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 - @Sayf3rWhat are you most proud of, and what would you do differently next time?
I took some automatisms than allow me to complete this challenge faster than the other one.
What challenges did you encounter, and how did you overcome them?No major issues because this project looks like the previews one in the learning path "Getting started on Frontend Mentor".
What specific areas of your project would you like help with?Every advice is welcome on my project.
@Sayf3rThank you for you review. Very complete with a good advice I'll add this on my next projects :)
- @henrikkudesuWhat are you most proud of, and what would you do differently next time?
It didn't take me long to do it. There may be some adjustments to the measurements and sizes, but I think it is satisfactory.
@Sayf3rHi Leonardo,
You forgot the hover effect on desktop version when you go over the title.
On full screen you desktop version looks great but when your page only take the half of the screen your card is to tight because of the wh unit on the card. Same thing for the yellow background on the element with card__post--tag class.
To keep the responsive and give min width to your card you can use clamp() property. I tested with width: clamp(320px, 40%, 40%); on .card .
Overall you did a very good job :)
Marked as helpful - @RohanmyWhat are you most proud of, and what would you do differently next time?
Me siento orgulloso de haber resuelto mi primer desafia en Frontend Mentor, y para la proxima vez tratare de hacerlo en menos tiempo.
What challenges did you encounter, and how did you overcome them?lo supere utilizando conocimientos de css y html
What specific areas of your project would you like help with?En la especificidad del codigo
@Sayf3rLooks good I think you could center your qr code container, add display : flex and justify-content: center on your body so that your you qr code container will by centered vertically relative to the body element
