Profile Card 2025: simple, responsive profile cards built with HTML, CSS & JS

A lightweight profile card pattern built with HTML, CSS, and JavaScript focuses on clarity and flexibility. It uses a single social icon and is optimized for portfolios and team pages.

Why This Matters

Modern web development often relies on heavy frameworks, but this card demonstrates that simplicity can achieve performance and accessibility goals. Overhead from bloated libraries can slow load times and complicate maintenance, whereas this approach prioritizes minimalism without sacrificing functionality.

Key Insights

“Lightweight design reduces load times by 40% compared to heavy frameworks.”
“Single social icon simplifies UI without sacrificing functionality.”
“CodLico’s profile card used by developers for portfolios and team pages.”

Working Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Profile Card</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="profile-card">
    <div class="card-header">
      <div class="avatar">
        <img src="https://secure.gravatar.com/avatar/?d=mp&s=500" alt="Profile picture of Alex Morgan" />
      </div>
      <button class="btn-follow">Follow</button>
    </div>
    <div class="card-body">
      <h2>Alex Morgan</h2>
      <h3>UI/UX Designer</h3>
      <p>Passionate about crafting intuitive user experiences and modern interfaces. Always exploring the latest in web design and animation.</p>
      <ul class="social-links">
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
      </ul>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

:root {
  --primary: #5a67d8;
  --background: #ffffff;
  --card-bg: #f8f9fa;
  --text-dark: #2d3748;
  --text-light: #4a5568;
  --shadow: rgba(0, 0, 0, 0.1);
  --radius: 1.5rem;
  --transition: 0.3s ease;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #e2e8f0, #edf2f7);
  font-family: "Inter", sans-serif;
}

.profile-card {
  background: var(--card-bg);
  width: 320px;
  border-radius: var(--radius);
  box-shadow: 0 10px 25px var(--shadow);
  overflow: hidden;
  transition: transform var(--transition);
}

.profile-card:hover {
  transform: translateY(-8px);
}

.card-header {
  position: relative;
  padding: 2rem;
  background: var(--primary);
  display: flex;
  justify-content: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid var(--background);
  overflow: hidden;
  transition: transform var(--transition);
}

.profile-card:hover .avatar {
  transform: scale(1.05);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-follow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #fff;
  color: var(--primary);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 5px 15px var(--shadow);
  transition: background var(--transition), color var(--transition);
}

.btn-follow.active {
  background: var(--primary);
  color: #fff;
}

.card-body {
  padding: 1.5rem;
  text-align: center;
}

.card-body h2 {
  color: var(--text-dark);
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.card-body h3 {
  color: var(--text-light);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.card-body p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-links li a {
  font-size: 1.25rem;
  color: var(--text-light);
  transition: transform var(--transition), color var(--transition);
}

.social-links li a:hover {
  transform: translateY(-4px);
  color: var(--primary);
}

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector(".btn-follow");
  btn.addEventListener("click", () => {
    btn.classList.toggle("active");
    btn.textContent = btn.classList.contains("active") ? "Following" : "Follow";
  });
});

Practical Applications

Use Case: Portfolio websites using the profile card for clean, accessible user profiles.
Pitfall: Overcomplicating with multiple icons may reduce responsiveness.

References:

https://dev.to/codlico/profile-card-2025-simple-responsive-profile-cards-built-with-html-and-css-41a5

On This Page