Submitted

Profile Card Component using HTML and CSS

P
Royβ€’ 145

@royschrauwen

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

2

HTML Issues

View Report

Roy’s questions for the community

I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is welcome.

Also, in Chrome there is a cyan border around the top-half of the profile-image, but there is not in Firefox. Can anybody tell me why that is?

Community Feedback

P
Cezar Ganzonβ€’ 220

@cganzon

Posted

Hi I'm currently working on this project myself and I had the same problem with the image border. To fix it I decided to put a white background on the image tag. Not sure why that issue happens in the first place across browsers though. Also, great job on this project! I might just have to take a look at how you managed those circles staying in place as the screen size changes because that has me completely lost at the moment.

0


P
Royβ€’ 145

@royschrauwen

Posted

@cganzon Thank you for your feedback. πŸ˜ƒ The solution you offer for the image border is something I would not have thought of. Thanks for the tip! The circle-positioning was also something I struggled with for some time. It took a lot of Googling before I got to this solution πŸ˜‚

1

Yudi Yoshidaβ€’ 350

@yudiyoshida

Posted

Hey, royschrauwen, how are you?

Your project looks perfect, congratulations! You're studying for only a month and you've made a nice work!

Keep coding!

0


P
Royβ€’ 145

@royschrauwen

Posted

@yudiyoshida Thank you very much for your kind comment. 😊 I sometimes think when things are not pixel-perfect they are wrong, but you are right, it looks great for only studying a month. Thank you! πŸ’ͺ

1

Give some feedback to @royschrauwen about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!