→ Anonymous
→ Personal Profile Card with Social Media ...

Personal Profile Card with Social Media Links

This Example is contributed by Anonymous, on 13-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards,User Avatars

Card Avatar Profile Social

Author Anonymous

Fork Fullscreen

<div class="profile-card">
  <div class="cover-photo"></div>
  <div class="profile-content">
    <div class="profile-image">
      <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Sarah Johnson">
    </div>
    <div class="profile-info">
      <h2 class="name">Sarah Johnson</h2>
      <h3 class="username">@sarahj_design</h3>
      <p class="bio">UI/UX Designer passionate about creating beautiful and functional user experiences.</p>
      <div class="stats">
        <div class="stat">
          <span class="stat-value">248</span>
          <span class="stat-label">Posts</span>
        </div>
        <div class="stat">
          <span class="stat-value">12.4k</span>
          <span class="stat-label">Followers</span>
        </div>
        <div class="stat">
          <span class="stat-value">284</span>
          <span class="stat-label">Following</span>
        </div>
      </div>
      <div class="social-links">
        <a href="#" class="social-icon twitter">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="social-icon linkedin">
          <i class="fab fa-linkedin-in"></i>
        </a>
        <a href="#" class="social-icon dribbble">
          <i class="fab fa-dribbble"></i>
        </a>
        <a href="#" class="social-icon instagram">
          <i class="fab fa-instagram"></i>
        </a>
      </div>
      <button class="profile-btn">Follow</button>
      <button class="profile-btn message">Message</button>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Related Examples

User Profile Card

Author:
Anonymous

9 months ago
Profile Information Card

Author:
Anonymous

8 months ago
User Info Card

Author:
Emma Thompson

10 months ago
Profile Card with Social Media Links

Author:
Anonymous

9 months ago
Elegant Profile Hover Card with Animation Effects
A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

Author:
Maya Johnson

8 months ago
Modern Flexible User Profile Card
A clean and flexible user profile card with avatar, user information, and social stats designed with a modern aesthetic and responsive layout.

Author:
Anonymous

9 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

10 months ago
Modern User Profile Card with Animated Stats

Author:
Emma Thompson

10 months ago
Vibrant Neon Gradient Profile Card
Stunning neon gradient card with glowing edges and a sleek information section, perfect for showcasing user profiles or product details with a futuristic cyberpunk aesthetic.

Author:
Alexis Rivera

9 months ago
User Profile Card
A sleek and modern profile card featuring glass morphism effects, subtle gradients, and smooth hover animations for enhanced user interaction.

Author:
Emma Thompson

10 months ago
Floating Social Media Profile Card
A beautifully designed profile card featuring smooth gradient backgrounds, hover animations, and social media integration

Author:
Emma Thompson

10 months ago
Profile Card
A beautifully designed profile card featuring smooth gradient animations and social media integration for modern web applications

Author:
Emma Thompson

10 months ago

Didn't find component you were looking for?

Search from 500+ components