Project Gallery
Explore Interactive Profile Card | Personal Branding UI in detail
1
/1
100%
Project Overview
Interactive Profile Card | Personal Branding UI
Project Description
This is a modern and responsive profile card UI designed using HTML, CSS, and JavaScript. It features a clean user interface, social media integration, interactive buttons, and smooth animations to create a strong personal branding experience.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card | Social Connect</title>
<!-- Font Awesome 6 (free & updated icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Profile image / avatar with icon backup -->
<div class="img-logo">
<!-- Use a high-quality avatar image (placeholder but modern) -->
<img src="https://ui-avatars.com/api/?background=c084fc&color=fff&rounded=true&size=100&bold=true&name=Alex+Morgan" alt="profile avatar" onerror="this.onerror=null; this.src='https://randomuser.me/api/portraits/women/68.jpg';">
</div>
<!-- Updated Name & Role -->
<h3>Alex Morgan</h3>
<div class="bio-text">
✨ Creative Developer & UI Designer | <b>Content Creator</b>
<br> Sharing design & dev tips daily
</div>
<!-- Stats - fresh numbers, interactive modern look -->
<div class="media-info">
<ul>
<li><span>28.5k+</span> Followers</li>
<li><span>1.2k</span> Following</li>
<li><span>346</span> Posts</li>
<li><span>3.2M</span> Likes</li>
</ul>
</div>
<!-- Social Icons - all visible with brand colors and larger tap area -->
<div class="icons">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
<a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="#" aria-label="Twitter / X"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Action Buttons with icons inside -->
<div class="btn">
<button id="messageBtn"><i class="far fa-envelope"></i> Message</button>
<button id="followBtn"><i class="fas fa-user-plus"></i> Follow</button>
</div>
</div>
<!-- Simple interactive JS for better UX (toast / alert) -->
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
font-family: 'Inter', sans-serif;
padding: 20px;
}
.wrapper {
width: 100%;
max-width: 580px;
text-align: center;
background: rgba(255, 255, 255, 0.98);
border-radius: 48px;
padding: 30px 30px 40px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(2px);
transition: transform 0.2s ease;
}
.wrapper:hover {
transform: scale(1.01);
}
/* Avatar / Logo area */
.img-logo {
width: 130px;
height: 130px;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
border-radius: 50%;
margin: -65px auto 15px auto;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.25);
border: 4px solid white;
transition: 0.3s;
}
img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
background: white;
padding: 6px;
}
/* fallback if image missing */
.img-logo i {
font-size: 60px;
color: #4a2f6d;
}
h3 {
margin-top: 12px;
font-size: 28px;
font-weight: 700;
background: linear-gradient(120deg, #6b21a5, #c084fc);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
}
.bio-text {
margin-top: 8px;
color: #4b5563;
font-weight: 500;
font-size: 0.95rem;
}
.bio-text b {
background: #f3e8ff;
padding: 2px 8px;
border-radius: 30px;
font-size: 0.85rem;
color: #7e22ce;
}
/* Stats row - modern flex */
.media-info {
margin-top: 24px;
background: #f9fafb;
border-radius: 60px;
padding: 12px 8px;
}
ul {
list-style: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 12px;
}
ul li {
font-size: 14px;
font-weight: 500;
color: #4b5563;
text-align: center;
background: white;
padding: 8px 16px;
border-radius: 60px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
min-width: 85px;
}
span {
font-weight: 800;
color: #1f2937;
display: block;
font-size: 20px;
margin-bottom: 4px;
letter-spacing: -0.2px;
}
/* social icons - full color & hover */
.icons {
margin-top: 32px;
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.icons a {
color: white;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 28px;
background: #8b5cf6;
transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.icons i {
font-size: 26px;
transition: transform 0.2s;
}
/* brand colors */
.icons a:first-child { background: #1877f2; } /* facebook */
.icons a:nth-child(2) { background: #e4405f; } /* instagram */
.icons a:nth-child(3) { background: #ff0000; } /* youtube */
.icons a:nth-child(4) { background: #181717; } /* github */
.icons a:nth-child(5) { background: #1da1f2; } /* twitter (replaced telegram with X vibes) */
.icons a:nth-child(6) { background: #0a66c2; } /* linkedin extra */
.icons a:hover {
transform: translateY(-6px);
filter: brightness(1.05);
box-shadow: 0 14px 22px rgba(0, 0, 0, 0.2);
}
.icons a:hover i {
transform: scale(1.1);
}
/* button group */
.btn {
margin-top: 38px;
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
button {
width: 170px;
height: 52px;
border: none;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
border-radius: 60px;
background: #f3f4f6;
color: #1f2937;
transition: all 0.25s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Inter', sans-serif;
}
.btn button:first-child {
background: #4f46e5;
color: white;
box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3);
}
.btn button:last-child {
background: #ec489a;
color: white;
box-shadow: 0 8px 18px rgba(236, 72, 153, 0.25);
}
.btn button:first-child:hover {
background: #4338ca;
transform: scale(0.97);
}
.btn button:last-child:hover {
background: #db2777;
transform: scale(0.97);
}
/* responsive */
@media (max-width: 500px) {
.wrapper {
padding: 20px 18px 30px;
}
.icons a {
width: 46px;
height: 46px;
}
.icons i {
font-size: 22px;
}
button {
width: 140px;
height: 46px;
font-size: 0.9rem;
}
ul li {
padding: 6px 12px;
font-size: 12px;
}
span {
font-size: 18px;
}
}
</style>JavaScript
<script>
(function() {
// Create a temporary toast container if not exists
function showToast(message, type = 'info') {
let toastContainer = document.querySelector('.toast-notification');
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.className = 'toast-notification';
toastContainer.style.position = 'fixed';
toastContainer.style.bottom = '24px';
toastContainer.style.left = '50%';
toastContainer.style.transform = 'translateX(-50%)';
toastContainer.style.backgroundColor = '#1f2937';
toastContainer.style.color = '#fff';
toastContainer.style.padding = '12px 24px';
toastContainer.style.borderRadius = '60px';
toastContainer.style.fontWeight = '500';
toastContainer.style.fontSize = '0.9rem';
toastContainer.style.zIndex = '9999';
toastContainer.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)';
toastContainer.style.backdropFilter = 'blur(8px)';
toastContainer.style.background = 'rgba(0,0,0,0.8)';
toastContainer.style.fontFamily = "'Inter', sans-serif";
toastContainer.style.pointerEvents = 'none';
document.body.appendChild(toastContainer);
}
toastContainer.innerHTML = `<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-info-circle'}" style="margin-right: 8px;"></i> ${message}`;
toastContainer.style.opacity = '1';
toastContainer.style.transition = 'opacity 0.2s';
setTimeout(() => {
toastContainer.style.opacity = '0';
setTimeout(() => {
if(toastContainer) toastContainer.innerHTML = '';
}, 300);
}, 2200);
}
// Message button action
const msgBtn = document.getElementById('messageBtn');
if (msgBtn) {
msgBtn.addEventListener('click', () => {
showToast('💬 Message sent! Alex will reply soon.', 'success');
});
}
// Follow button action with interactive text change
const followBtn = document.getElementById('followBtn');
let isFollowing = false;
if (followBtn) {
followBtn.addEventListener('click', () => {
if (!isFollowing) {
showToast('🎉 You are now following Alex! Stay tuned for amazing content.', 'success');
followBtn.innerHTML = '<i class="fas fa-check"></i> Following';
followBtn.style.background = '#10b981';
followBtn.style.boxShadow = '0 8px 18px rgba(16,185,129,0.3)';
isFollowing = true;
} else {
showToast('👋 Unfollowed. Hope to see you again!', 'info');
followBtn.innerHTML = '<i class="fas fa-user-plus"></i> Follow';
followBtn.style.background = '#ec489a';
followBtn.style.boxShadow = '0 8px 18px rgba(236, 72, 153, 0.25)';
isFollowing = false;
}
});
}
// Add subtle click effect on social icons (optional)
const socialLinks = document.querySelectorAll('.icons a');
socialLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const platform = link.querySelector('i')?.classList[1]?.replace('fa-', '') || 'social';
showToast(`🔗 Opening ${platform.replace(/-/g, ' ')} profile (demo)`, 'info');
});
});
})();
</script>