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

CodLico.com — Fri, 28 Nov 2025 15:52:43 +0000

I built a lightweight profile card pattern that focuses on clarity, flexible layout, and a single social icon. It’s intended for portfolios, team pages, and small UI components where you want a clean, accessible card without a heavy framework. Created with HTML, CSS and JS and easy to edit or extend.

Preview and edit the example in the CodLico HTML Editor: https://codlico.com/tools/html-editor-online/

HTML:
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-VzP7U6Mb1wjV+R9voPZJql3V1d5qR9EgDk+X1w5aKJ3qEyN+OSF1uO5guv4l/qK6lJR+jRvI6vm7I9HdYwtK4g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <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>

CSS:
: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; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 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); }

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

Codlico Online HTML Editor — a no-BS, zero-setup HTML playground

CodLico.com — Fri, 22 Aug 2025 21:02:49 +0000

Want to prototype HTML/CSS/JS fast without installing anything or fighting toolchains? Codlico’s online HTML editor gives you an instant live preview, no signup, no clutter. Paste code, tweak, and see results in real time — perfect for demos, bug fixes, interviews, or teaching a friend.

What it does (quick)

Live preview as you type (HTML / CSS / JS).
No installs, no accounts, no ads getting in the way.
Lightweight and focused — built for speed and experiments.

Why I like it

Because for 90% of problems you don’t need a full IDE — you need results fast. Need to test a snippet, share a quick demo, or show a client a tiny prototype? This does that, and it does it without drama.

How to use (3 seconds)

Open the editor: Codlico Online HTML Editor
Paste or write your HTML/CSS/JS.

Try this — paste into the editor

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Quick Demo</title>
  <style>
    body { font-family: system-ui, sans-serif; display:flex;min-height:100vh;
           align-items:center;justify-content:center;background:#f6f8fa; }
    .btn { padding:10px 18px;border-radius:8px;border:0;cursor:pointer }
  </style>
</head>
<body>
  <button class="btn" id="btn">Click me</button>
  <script>
    document.getElementById('btn').onclick = () =>
      alert('Yep — this ran in the browser. No setup.');
  </script>
</body>
</html>

Tips (so you don’t waste time)