Build a User Profile Card

In this project, you'll create a static user profile card using HTML and CSS. This card will display a user's avatar, name, title, and a short bio or description. It's a great way to practice fundamental HTML structure, basic CSS styling, and introduces simple responsiveness.

Requirements:

• HTML Structure:
  • The card should be contained within a single div element.
  • Include an img element for the user's avatar.
  • Use an h2 for the user's name.
  • Use a p element for the user's title/job role.
  • Include another p element for a short bio or description.
• CSS Styling:
  • The card should have a distinct background color and a subtle box-shadow or border.
  • Center the entire card horizontally on the page.
  • Apply appropriate padding and margin to the card and its internal elements for good visual spacing.
  • Style the user's avatar to be circular (using border-radius) and a fixed size (e.g., 120px by 120px).
  • Choose appropriate font-family, font-size, and color for the name, title, and bio.
  • Ensure text is readable and well-aligned within the card (e.g., centered).
• Responsiveness:
  • The card should have a max-width (e.g., 350px) to prevent it from becoming too wide on large screens.
  • Ensure the card and its content scale down gracefully on smaller screens without horizontal scrollbars, utilizing margin: auto for centering.
  • Text should wrap naturally.

Submission Includes:

• An index.html file containing the project's HTML structure.
• A style.css file linked to index.html, containing all the project's CSS.
• Any image files used for the avatar (or use a placeholder image URL).