→ Anonymous
→ Profile Card

Profile Card

A sleek and professional profile card for Farooq, featuring contact information, social media links, and a modern design that highlights professional accomplishments.

This Example is contributed by Anonymous, on 24-Mar-2025. It is responsive. similar terms for this example are Profile Cards,User Profile,Profile,Author box,User information

Profile Card Personal Branding Developer Bio

Author Anonymous

Fork Fullscreen

<div class="profile-card">
  <div class="profile-header">
    <div class="avatar">
      <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Farooq Ahmed">
    </div>
    <div class="profile-info">
      <h2>Farooq Ahmed</h2>
      <p class="title">Senior Frontend Developer</p>
      <p class="location"><i class="fas fa-map-marker-alt"></i> San Francisco, CA</p>
    </div>
  </div>
  <div class="profile-body">
    <div class="bio">
      <p>Passionate frontend developer with 7+ years of experience building responsive and accessible web applications.</p>
    </div>
    <div class="skills">
      <span class="skill-tag">HTML5</span>
      <span class="skill-tag">CSS3</span>
      <span class="skill-tag">JavaScript</span>
      <span class="skill-tag">React</span>
      <span class="skill-tag">Vue.js</span>
    </div>
  </div>
  <div class="profile-footer">
    <div class="contact-info">
      <p><i class="fas fa-envelope"></i> farooq@example.com</p>
      <p><i class="fas fa-phone"></i> (555) 123-4567</p>
    </div>
    <div class="social-links">
      <a href="#" class="social-link"><i class="fab fa-github"></i></a>
      <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
      <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
      <a href="#" class="social-link"><i class="fab fa-codepen"></i></a>
    </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