Published in
Codeing with design
•
7 minutes read
Modern Profile Card with Animated SVG Social Icons
Create a Stunning and Interactive Profile Card for Your Online Presence
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card with SVG Social Icons</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #eceff1;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.profile-card {
background-color: #fff;
width: 320px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
transform: scale(1);
transition: transform 0.3s ease;
animation: fadeInUp 0.5s ease-out forwards;
}
.profile-card:hover {
transform: scale(1.05);
}
.profile-header {
background-image: linear-gradient(135deg, #6a11cb, #2575fc);
padding: 40px;
text-align: center;
position: relative;
color: #fff;
}
.profile-header img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid #fff;
animation: bounceIn 0.5s ease forwards;
}
h2 {
font-size: 24px;
margin: 10px 0 5px;
}
.role {
font-size: 14px;
opacity: 0.9;
}
.profile-content {
padding: 20px;
text-align: center;
}
.profile-content p {
color: #666;
font-size: 15px;
margin: 10px 0;
line-height: 1.6;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
padding: 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
.social-links svg {
width: 24px;
height: 24px;
fill: #888;
transition: fill 0.3s;
}
.social-links svg:hover {
fill: #6a11cb;
}
/* Animation keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIn {
0% {
transform: scale(0.5);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="profile-card">
<div class="profile-header">
<img src="https://via.placeholder.com/100" alt="Profile Picture">
<h2>Chris Doe</h2>
<p class="role">UI/UX Designer</p>
</div>
<div class="profile-content">
<p>Passionate about creating seamless user experiences. Skilled in Figma, Sketch, and responsive web design.</p>
</div>
<div class="social-links">
<!-- Twitter SVG Icon -->
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.724 9.86 9.86 0 0 1-3.127 1.195 4.92 4.92 0 0 0-8.384 4.482A13.953 13.953 0 0 1 1.671 3.15a4.916 4.916 0 0 0 1.524 6.574 4.903 4.903 0 0 1-2.228-.616c-.053 2.281 1.581 4.415 3.949 4.89a4.936 4.936 0 0 1-2.224.085 4.928 4.928 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.102c-.395 0-.787-.023-1.175-.067A13.945 13.945 0 0 0 7.548 21c9.056 0 14.01-7.506 14.01-14.007 0-.213-.005-.425-.014-.637A9.936 9.936 0 0 0 24 4.557z"/>
</svg>
</a>
<!-- LinkedIn SVG Icon -->
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M22.23 0H1.77A1.77 1.77 0 0 0 0 1.77v20.46A1.77 1.77 0 0 0 1.77 24h20.46A1.77 1.77 0 0 0 24 22.23V1.77A1.77 1.77 0 0 0 22.23 0zM7.06 20.45H3.56V9h3.5v11.45zM5.31 7.7a2.03 2.03 0 1 1 0-4.06 2.03 2.03 0 0 1 0 4.06zm15.14 12.75h-3.5V14.8c0-1.34-.48-2.25-1.69-2.25-.92 0-1.47.62-1.71 1.23-.09.21-.11.5-.11.79v6.88h-3.5V9h3.36v1.56h.05a3.67 3.67 0 0 1 3.32-1.83c2.43 0 4.26 1.59 4.26 5.02v6.7z"/>
</svg>
</a>
<!-- GitHub SVG Icon -->
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 0 0-3.162 19.49c.5.09.68-.217.68-.482v-1.693c-2.781.605-3.369-1.34-3.369-1.34-.454-1.157-1.11-1.465-1.11-1.465-.91-.621.07-.608.07-.608 1.004.07 1.532 1.032 1.532 1.032.892 1.528 2.341 1.087 2.91.831.09-.647.349-1.087.636-1.338-2.219-.253-4.555-1.108-4.555-4.931 0-1.088.39-1.98 1.03-2.68-.103-.252-.446-1.268.097-2.646 0 0 .84-.27 2.75 1.026A9.54 9.54 0 0 1 12 6.857c.85.004 1.705.115 2.504.337 1.908-1.296 2.748-1.026 2.748-1.026.544 1.378.202 2.394.1 2.646.64.7 1.029 1.592 1.029 2.68 0 3.833-2.338 4.675-4.566 4.923.359.309.678.919.678 1.854v2.75c0 .27.18.578.687.481A10.002 10.002 0 0 0 0-3.162 19.49c.5.09.68-.217.68-.482v-1.693c-2.781.605-3.369-1.34-3.369-1.34-.454-1.157-1.11-1.465-1.11-1.465-.91-.621.07-.608.07-.608 1.004.07 1.532 1.032 1.532 1.032.892 1.528 2.341 1.087 2.91.831.09-.647.349-1.087.636-1.338-2.219-.253-4.555-1.108-4.555-4.931 0-1.088.39-1.98 1.03-2.68-.103-.252-.446-1.268.097-2.646 0 0 .84-.27 2.75 1.026A9.54 9.54 0 0 1 12 6.857c.85.004 1.705.115 2.504.337 1.908-1.296 2.748-1.026 2.748-1.026.544 1.378.202 2.394.1 2.646.64.7 1.029 1.592 1.029 2.68 0 3.833-2.338 4.675-4.566 4.923.359.309.678.919.678 1.854v2.75c0 .27.18.578.687.481A10.002 10.002 0 0 0 12 2z"/>
</svg>
</a>
</div>
</div>
</body>
</html>
This profile card showcases a clean and modern design, ideal for personal branding or portfolio websites. Here’s a breakdown of the key features and design elements:
- Responsive Design: The card is centered on the screen and adjusts well to different screen sizes, thanks to the use of Flexbox for alignment.
- Gradient Header: The header features a vibrant linear gradient that enhances the visual appeal and draws attention to the profile picture and name.
- Profile Picture: A circular avatar image is prominently displayed at the top of the card, creating a personal touch. Remember to replace the placeholder image URL with an actual profile picture.
- Typography: The use of the "Poppins" font gives the card a modern and clean look. Clear hierarchies in text size for the name and role improve readability.
- Engaging Description: A brief and engaging description below the name highlights the user's professional focus and skills, providing context for visitors.
- SVG Social Icons: The social media links are represented by inline SVG icons, offering a scalable and visually appealing alternative to traditional icon fonts. Each icon has a hover effect that changes its color, enhancing interactivity.
- Animations: The card features subtle animations, such as a scaling effect on hover and a fade-in effect on load, which make the user experience more dynamic and engaging.
- Flexible Layout: The layout allows for easy customization of content, making it simple to update the profile information and links.
This design can be easily integrated into any web project. To implement it, simply replace the placeholder elements (like the avatar image and social media links) with your actual content. This profile card not only looks great but also provides essential information in a user-friendly manner.