Skip to content
Submitted over 3 years ago

Responsive landing profile card page using Flexbox and Grid

Jonny Ngo Luong•80
@Shirajuki
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

Hello! 👋

This is my 2nd solution on Frontend Mentor, and also my 2nd week here! As this was a newbie challenge with no dynamic elements, I chose to build it using static HTML5 and CSS.

I had little time working this week and thus only used about 2 hours on the newbie solution, which means that there is probably still lots to improve code quality-wise. Even though I do believe that I did quite well on this, I still hope for some feedback from the community! Any feedbacks on my use of "percent" (%) on the opposite side for the background-circles as well as the CSS syntax, since i tend to write lots of redundant code for styles, are greatly appreciated!

This time, I used Figma for measuring which has made it a lot easier to get the measurement right even though the monitor on my laptop is smaller than 1440px. All in all I've had a good time relaxing while working on this solution and enjoyed it very much.

I'll be back for another challenge next week, see you all there!

  • Shirajuki

Community feedback

  • Christopher Nance•240
    @ctnancePosted over 3 years ago

    Hi Shirajuki,

    Great job on this project, especially considering your time restraints and this being your 2nd project!

    My first impression is that you did a fantastic job matching your design to the original. I would only recommend adding some margin between the text in the "info" classes (inside the "infoWrapper").

    I also find your use of the ::before & ::after selectors an interesting, but an effective choice for the background images within the body tag. I like how it turned out!

    Happy Coding!

    • Chris
    1
    Jonny Ngo Luong•80
    @ShirajukiPosted over 3 years ago

    Hi @ctnance!

    Thank you for the feedback and your time to look through the source code, I am glad that my solution to the design gave you a good first impression :) I see that there's still lots of small issues to fix such as the margin you've pointed out, this is something I'll try to remember in detail for the next projects in order to get a better precision in matching the original design.

    I'll be back for another challenge next week, and hope to receive more feedbacks from you!

    Thank you!

    • Shirajuki
    0

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