Skip to content
Submitted 3 days ago

Responsive Profile Card Component using Flexbox and CSS Grid

pure-css, accessibility
Carlos Alberto da Silva•280
@slayer-br
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of how closely I matched the layout and design, especially the responsive behavior and the clean structure of the CSS using custom properties. Next time, I would focus more on accessibility improvements, such as better semantic structure and ARIA labels.

(pt-BR): Tenho orgulho de ter replicado fielmente o layout e o design, especialmente o comportamento responsivo e a estrutura limpa do CSS usando variáveis customizadas. Na próxima vez, eu focaria mais em melhorias de acessibilidade, como uma estrutura mais semântica e uso de ARIA labels.

What challenges did you encounter, and how did you overcome them?

Positioning the avatar image partially overlapping the card header was a challenge. I solved it using negative margin and a white border to maintain the circular shape and separation from the background. Getting the background patterns to look good on all screen sizes also took some trial and error with media queries and background positioning.

(pt-BR): Posicionar a imagem do avatar parcialmente sobrepondo o cabeçalho do cartão foi um desafio. Resolvi isso usando margin negativa e uma borda branca para manter o formato circular e a separação do fundo. Fazer os padrões de fundo funcionarem bem em todos os tamanhos de tela também exigiu tentativa e erro com media queries e posicionamento de background.

What specific areas of your project would you like help with?

I would appreciate feedback on my responsive layout decisions, especially the use of background images and how they scale at different breakpoints. Also, suggestions on how to improve accessibility for screen readers would be very helpful.

(pt-BR): Gostaria de receber feedback sobre minhas decisões de layout responsivo, especialmente quanto ao uso das imagens de fundo e como elas se ajustam em diferentes breakpoints. Além disso, sugestões para melhorar a acessibilidade para leitores de tela seriam muito bem-vindas.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,970
    @thisisharsh7

    Awesome work! Your solution is clean, well-organized, and visually very close to the original design!

    Strengths:

    • The layout scales nicely across screen sizes — media queries and background positions are well-handled.
    • Good use of utility classes and CSS variables, which keep the code maintainable and scalable.
    • Avatar positioning with negative margin and a white border is a clever and clean solution.

    Some suggestions:

    • Semantic HTML: You might wrap the .card in an <article> instead of a <section> for better semantics, and possibly use <figure> for the profile image.
    • The footer attribution is nicely done but could benefit from aria-label="Attribution" to give it more context.
    • Folder structure: Since you’re using only one CSS file, there’s no need to place it inside a nested folder (assets/css/). You can keep style.css in the root for simplicity unless the project scales.

    Overall, solid execution — happy coding!

    Marked as helpful

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