Skip to content
Submitted almost 3 years ago

Responsive card with flexbox

Florin.Porut•380
@zastar23
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

It has been more than a week since my last update on this site.

I started to study JS and I wish that soon I can complete projects that require JS also.

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Florin,

    Awesome solution, nice work!

    You could clear your accessibility/html report if you swap <div class="attribution"> with <footer class="attribution">. Semantic html is really important.

    You could also centre your design responsively in the viewport using Flexbox on your <body>:

        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    Marked as helpful
    1
  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hi, @zastar23 ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    Here are some of the tips I like to provide.

    • Please try BEM for naming element classes. It will help you a lot on bigger projects.
    • For background, I suggest you to use css background-image property or pseudo elements like ::before, ::after.

    https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

    Marked as helpful
    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