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

Profile card component | Built with React and styled-components

Connor Zā€¢ 5,115

@zuolizhu

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


Feedbacks are welcome!

Community feedback

Arturo Simonā€¢ 1,785

@artimys

Posted

Hi Conner, you pretty much nailed the matching to the design. Especially with those background images.

The only minor thing I would suggest is for the bottom background image to stick to the right edge of the viewport.

Awesome job!! šŸ‘

2

Connor Zā€¢ 5,115

@zuolizhu

Posted

@artimys Thanks for your suggestion šŸ˜†!

0
P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

Hey, Connor Z! šŸ‘‹

I'm so happy to see you submit another challenge! Your solutions always inspire me! šŸ˜Š

This one's another pixel-perfect solution that looks great! šŸ‘

Keep coding (and happy coding, too)! šŸ˜

1

P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

@ApplePieGiraffe

BTW, I just recently submitted a solution to the Room Homepage challenge in which (inspired by your solution to the same challenge) I did the exact same thing you did and added the same intro animation using GSAP and stolen (I, I mean, learned) from Dev Ed! šŸ˜†

1
Connor Zā€¢ 5,115

@zuolizhu

Posted

@ApplePieGiraffe The transition of the carousels are amazing šŸ„³! I will steal your idea for my next carousels project šŸ˜† hahaha!

1
P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

@zuolizhu

šŸ˜‚

0
Anna Leighā€¢ 5,135

@brasspetals

Posted

Hi, Connor! Overall, the solution looks great!

I'll preface this by saying I know nothing about React, but I noticed at 479px~480px the card shifts vertically on both Chrome and Firefox. I'm not sure what's causing it, but thought you might like to know. Otherwise, no other issues that I can see!

1

Connor Zā€¢ 5,115

@zuolizhu

Posted

Hi @brasspetals ,

That's a nice catch up on the little detail šŸ‘! But don't worry, its just because I set a break point where the padding top changed from 147px to 173px šŸ¤£ (for presenting purpose, make it looks like same as the design file).

React is over complicated for this kind of project, but it is worth to try out on some large size project, I will make one in my coming project solution šŸ˜Ž

Happy coding šŸ™Œ!

1
Anna Leighā€¢ 5,135

@brasspetals

Posted

@zuolizhu Welp, I'm half an idiot - can't believe I missed the blatantly obvious. šŸ¤¦ā€ā™€ļø šŸ˜… This is why I should really stick to my typical rule of not commenting on challenges I haven't completed myself, and also not commenting so late at night! Apologies!

1
Connor Zā€¢ 5,115

@zuolizhu

Posted

@brasspetals LOL it's okay šŸ˜! I appreciate you looked into my work and make any of the suggestions, that makes me motivated and keep improving šŸ˜†!

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