Skip to content
Submitted over 3 years ago

Profile Card Component with HTML and CSS

John_diddles•470
@Johndiddles
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'd love your feedbacks. If there's anything you think I could have done better, please stone me that feedback 😁

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hey, John_diddles! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍

    The background shapes in your solution seem rather well-placed, but I don't think you need to create two separate <div>s to add both of the shapes. You can simply add and position both of them in the <body> of the page using the regular background, background-size, and background-cover properties but simply separate the different values for each image with commas. See this article for more info. 😉

    Hope that helps. 😃

    Keep coding (and happy coding, too)! 😁

    2
    John_diddles•470
    @JohndiddlesPosted over 3 years ago

    @ApplePieGiraffe Thanks. Thanks and Thanks. 🤗

    1
  • Claire Calder•310
    @claire-caPosted over 3 years ago

    Your solution looks great! Very close to the original design - well done! Maybe add a box-shadow on the profile card to make it even closer. Great work!

    1

Please log in to post a comment

Log in with GitHub

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