Building a Responsive Profile Card with HTML & CSS

Flexbox, pseudo-elements, and round images done right

INTRO: In this post, I walk through building a responsive profile card: how flexbox centers the card, how a ::before pseudo-element creates the colored header behind the avatar, and how border-radius with object-fit keeps the image perfectly round.

CODE SNIPPET: .profile-card::before { content: ""; background-color: #4070f4; height: 36%; width: 100%; position: absolute; top: 0; left: 0; border-radius: 24px 24px 0 0; }

Demo: https://muhammaduzairkhalid15.github.io/Responsive-Profile-Card-Uzi-Solutions/ Repo: https://github.com/MuhammadUzairKhalid15/Responsive-Profile-Card-Uzi-Solutions

TAGS: css, html, webdev, frontend, beginners