Profile Card

Elevate your website's aesthetics using HTML and CSS with a beautifully designed profile card. Learn how to showcase user information in an elegant and visually appealing format.

Adding a profile card to your website can showcase user information stylishly and compactly. This guide will walk you through creating a profile card using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and customize the profile card to fit your specific requirements.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the profile card. Select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

  • Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Personalize the profile card to match your website's branding and functionality. Adjust the CSS styles to modify the profile card's appearance, colors, and content. Experiment with different fonts, sizes, and layouts to create a profile card that seamlessly integrates with your website's design.

By following these steps, you can implement and customize a profile card on your website using HTML and CSS. Tailor the profile card to your specific needs and effectively showcase user information stylishly and compactly.

Code Explanation

HTML Code

Card Container (<div class="card">):

  • The outermost div with the class card is the container for the entire card component. This class will typically be styled with CSS to give the card its appearance, such as borders, shadows, padding, and overall layout.

Image (<img>):

  • <img src="https://github.com/frontend-joe/css-components/blob/main/cards/card-1/image.jpg?raw=true" />
  • This img element displays an image of the user or any relevant graphic. The src attribute points to the URL of the image file. The image enhances the visual appeal of the card and provides a visual context for the content.

Content Container (<div>):

  • A nested div that contains the textual content and button of the card. This div groups the content elements together for styling and layout purposes.

User Name (<h2>Kaye Morris</h2>):

  • The <h2> element displays the name "Kaye Morris". It is styled as a heading, likely to be one of the most prominent pieces of text on the card.

User Role (<h3>UX Developer</h3>):

  • The <h3> element displays the role "UX Developer". It is a subheading providing additional information about the user.

Description (<p>):

  • The <p> element contains a brief description of the user: "Empowering users through captivating interfaces, turning ideas into pixel-perfect realities." This paragraph provides more details about the user's skills or philosophy.

Button (<button>Follow Account</button>):

  • The button element displays a clickable button labeled "Follow Account". This button allows users to perform an action, such as following the user’s profile.

CSS Code

Global Styles
* {
  box-sizing: border-box;
}
  • * { box-sizing: border-box; }: Ensures that the padding and border are included in the element's total width and height.
Body Styles
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  background: #221d2d;
  color: #fdfcfd;
  font-family: "Poppins";
}
  • body: Centers the content vertically and horizontally on the page, gives a dark background color, and sets the text color to white. It uses the "Poppins" font family.
Card Container
.card {
  display: flex;
  align-items: center;
  width: 75vw;
  max-width: 650px;
  padding: 50px 30px 50px 20px;
  background: #121017;
  border-radius: 24px;
}
  • .card: Creates a flexible container with padding, a dark background, and rounded corners. The card has a maximum width and scales with the viewport width.
Card Image
.card img {
  max-width: 280px;
  width: 35vw;
  height: 300px;
  object-fit: cover;
  margin-left: -60px;
  margin-right: 30px;
  border-radius: inherit;
  box-shadow: 0 60px 40px rgb(0 0 0 / 8%);
}
  • .card img: Styles the image within the card to fit nicely, applying a shadow, setting dimensions, and rounding the corners to match the card's border radius.
Card Headings
.card h2 {
  font-size: 26px;
  font-weight: 400;
  margin-top: 0;
  margin-right: 30px;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  opacity: 0.75;
}
  • .card h2: Sets the primary heading's font size and weight, and adjusts the margins.
  • .card h3: Sets the secondary heading's font size, weight, margin, and opacity to make it less prominent.
Card Paragraph
.card p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
  opacity: 0.5;
}
  • .card p: Styles the paragraph text with a smaller font size, lighter weight, and lower opacity to appear more subdued.
Card Button
.card button {
  border: 1px solid #f8f8f8;
  background: transparent;
  color: #f8f8f8;
  font-family: inherit;
  padding: 16px 26px;
  font-size: 16px;
  border-radius: 40px;
}
  • .card button: Styles the button to have a transparent background, white text, and a rounded shape with padding.
Media Queries

For screens 600px wide or less

@media (width <= 600px) {
  .card {
    margin: 0 40px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 60px;
    width: 100%;
    text-align: center;
    flex-direction: column;
  }
  .card h2 {
    margin-right: 0;
    font-size: 26px;
  }
  .card img {
    margin: -100px 0 30px 0;
    width: 100%;
    max-width: 1000px;
    height: 250px;
  }
  .card p {
    max-width: 360px;
  }
}
  • Adjusts the card's layout to be more vertical, centers text, changes padding, and adapts the image size for smaller screens.

For screens 440px wide or less

@media (width <= 440px) {
  .card img {
    height: 45vw;
    width: 45vw;
    border-radius: 50%;
    margin: -140px 0 30px 0;
  }
}
  • Makes the image circular and adjusts its size for very small screens, ensuring it looks good in a more compact layout.