Profile Card

<div class="profile-card">

  <div class="profile-avatar">AM</div>

  <h2>Alex Morgan</h2>
  <span class="profile-role">Frontend Developer</span>

  <p class="profile-bio">
    Building clean interfaces and simple user experiences.
  </p>

  <div class="profile-stats">

    <div>
      <strong>128</strong>
      <span>Projects</span>
    </div>

    <div>
      <strong>8.4K</strong>
      <span>Followers</span>
    </div>

    <div>
      <strong>312</strong>
      <span>Following</span>
    </div>

  </div>

  <div class="profile-actions">
    <button class="profile-primary-btn">Follow</button>
    <button class="profile-secondary-btn">Message</button>
  </div>

</div>

.profile-card{
  width:320px;
  padding:30px;
  background:#08111f;
  border:1px solid rgba(34,211,238,.25);
  border-radius:18px;
  text-align:center;
  color:#ffffff;
  box-shadow:0 15px 40px rgba(0,0,0,.30);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.profile-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(34,211,238,.18);
}

.profile-avatar{
  width:80px;
  height:80px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6,
    #d946ef
  );
  color:#ffffff;
  font-size:24px;
  font-weight:800;
  box-shadow:0 0 25px rgba(139,92,246,.40);
}

.profile-card h2{
  margin:0 0 6px;
  color:#ffffff;
  font-size:23px;
}

.profile-role{
  display:block;
  color:#22d3ee;
  font-size:14px;
  font-weight:600;
}

.profile-bio{
  margin:16px 0 22px;
  color:#9fb3cc;
  font-size:14px;
  line-height:1.6;
}

.profile-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.profile-stats div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.profile-stats strong{
  color:#ffffff;
  font-size:17px;
}

.profile-stats span{
  color:#7f93ad;
  font-size:11px;
}

.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px;
}

.profile-actions button{
  padding:11px 16px;
  border-radius:9px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease;
}

.profile-primary-btn{
  border:0;
  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6
  );
  color:#ffffff;
}

.profile-secondary-btn{
  border:1px solid #22d3ee;
  background:transparent;
  color:#22d3ee;
}

.profile-actions button:hover{
  transform:translateY(-2px);
}

How This Profile Card Works

The Profile Card presents a user identity, role, short bio, activity statistics, and two action buttons inside a compact centered layout. The published component uses HTML and CSS only, so there is no JavaScript controlling the card or its buttons.

The main .profile-card container has a fixed 320px width with 30px of internal padding. Its dark #08111f background is paired with a subtle cyan border using rgba(34,211,238,.25). An 18px border radius softens the corners, while text-align: center keeps the main profile information aligned through the middle of the card.

The default shadow uses 0 15px 40px rgba(0,0,0,.30), giving the card some separation from the page background. On hover, the entire card moves upward by 6px through transform: translateY(-6px). The shadow also changes to 0 20px 45px rgba(34,211,238,.18), adding a subtle cyan tone around the card. Both changes use .3s ease transitions.

The circular .profile-avatar measures 80px by 80px and is centered with margin: 0 auto 18px. Flexbox places the AM initials in the center. A three-color gradient moves from cyan through purple to magenta using linear-gradient(135deg, #22d3ee, #8b5cf6, #d946ef). The avatar also has a purple-tinted glow created with box-shadow.

Below the avatar, the profile name appears inside an <h2> at 23px. The .profile-role is displayed as a block element directly underneath and uses cyan text at 14px with a 600 font weight. The short biography uses a muted #9fb3cc color, 14px font size, and 1.6 line height.

The statistics section is built with CSS Grid. .profile-stats uses grid-template-columns: repeat(3, 1fr), creating three equal columns for Projects, Followers, and Following. A 10px gap separates the columns, while subtle top and bottom borders visually divide this area from the rest of the card. For more detail about this layout method, see the MDN CSS Grid documentation.

Each statistic is arranged vertically with Flexbox. The main values such as 128, 8.4K, and 312 use a 17px font size, while the corresponding labels use smaller 11px text and a muted #7f93ad color.

The .profile-actions section also uses CSS Grid, but this time with two equal columns. This places the Follow and Message buttons side by side with a 12px gap. Both buttons have 11px 16px padding, 9px rounded corners, and a .2s ease transform transition.

The Follow button uses a cyan-to-purple gradient and white text. The Message button keeps a transparent background with a solid cyan border and cyan text. When either button is hovered, transform: translateY(-2px) moves it slightly upward. The published component does not attach any click behavior to these buttons.

Customizing This Profile Card

The card can be adapted by changing its existing text, colors, dimensions, statistics, and interaction values.

• Change the 320px card width if you need a larger or smaller profile layout.
• Replace AM, Alex Morgan, Frontend Developer, and the biography with your own profile content.
• Update the Projects, Followers, and Following values and labels.
• Adjust the 80px avatar size or replace the gradient colors #22d3ee, #8b5cf6, and #d946ef.
• Change the 18px card radius or 30px padding to control the overall shape and spacing.
• Increase or reduce translateY(-6px) to adjust how far the card lifts on hover.
• Modify the cyan border and muted text colors to match your interface.
• Change the Follow and Message button labels, gradient, border, or .2s hover transition.

Where to Use This Profile Card

The structure works well anywhere a user identity needs to be combined with short profile details, statistics, and actions.

• Social networking profile previews.
• Team member directories.
• Developer portfolio pages.
• Community member cards.
• Dashboard account sections.
• Creator or author profiles.
• User management interfaces.

Because the component uses only HTML and CSS, multiple profile cards can be arranged inside a larger Grid or Flexbox layout without adding JavaScript. For a different card interaction with stronger visual movement, the 3D Hover Monster Cards component is another related CodeRipple option.

Frequently Asked Questions

Does the Profile Card use JavaScript?

No. The published component contains only HTML and CSS. The card hover movement and button hover effects are handled entirely through CSS.

How are the three profile statistics arranged?

The .profile-stats container uses grid-template-columns: repeat(3, 1fr), which creates three equal-width columns for Projects, Followers, and Following.

Do the Follow and Message buttons actually work?

No. They are standard <button> elements with visual styling and hover movement, but the published component does not include JavaScript event handlers or other action logic.

How is the profile avatar created?

The avatar is an 80px circular <div> containing the initials AM. It uses Flexbox for centering, a three-color linear gradient for the background, and a purple-tinted box shadow.

The Profile Card provides a straightforward way to display user information, activity statistics, and profile actions while keeping the implementation lightweight and entirely CSS-based.