Design a Social Media Profile Card using HTML CSS & JavaScript

Last Updated : 19 Feb, 2024

To implement and Design a Social Media Profile Card using HTML CSS, and JavaScript language.

In this application, we have created an attractive card component that represents the Social Media Profile information of the user. This information includes Profile Image, Name, Designation, Location, Followers, Following, and Social Media Handlers with their redirection links. We have applied an attractive color scheme to the application to make the appearance beautiful.

Preview:

Preview

Prerequisites:

Approach:

Create an HTML file with the necessary structure. Include links to external CSS stylesheets, JavaScript files, and external libraries (like Font Awesome and Animate.css).
Use a <div> with the class profile card to encapsulate the entire profile card. Set a background gradient using CSS for a visually appealing look.
Inside the card, create a profile header section for the user’s basic information. Include a profile picture (profile-picture class), user’s name, designation, and location.
Add a profile-details section to display follower, following, and article count. Use interactive-counter for each count with a <span> for the count and a button to increment the count.
Implement JavaScript functions (followersFn, followingFn, articlesFn) to handle count increments and update the corresponding HTML elements.
Include a social-links section to display social media icons. Use Font Awesome icons for various social media platforms.
Style the profile card and its components using CSS. Apply gradients, box shadows, and border radius for a visually appealing card. Use transitions for interactive elements like buttons and icons.
Use Animate.css for animation effects (e.g., fadeIn) to make the application interactive.

Example: In this example, we will see the implementation of the Social Media Profile Card using HTML CSS, and JavaScript.

Javascript

let cnt1 = 1000;
let cnt2 = 100;
let cnt3 = 111;
function followersFn() {
    cnt1 += 1;
    document.getElementById('followersCount').innerText = cnt1;
}
function followingFn() {
    cnt2 += 1;
    document.getElementById('followingCount').innerText = cnt2;
}
function articlesFn() {
    cnt3 += 1;
    document.getElementById('articlesCount').innerText = cnt3;
}

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="styles.css">
    <script defer src="app.js"></script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
          rel="stylesheet">
    <title>GFG</title>
</head>
<body>
    <div class="profile-card animate__animated animate__fadeIn"
         id="profileCard">
        <div class="profile-header">
            <div class="profile-picture">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
                         alt="User Image">
            </div>
            <h2 class="profile-name" style="color: green;">
                  GeeksforGeeks
              </h2>
            <p class="profile-designation">Web Developer</p>
            <p class="profile-location">Noida, India</p>
        </div>
        <div class="profile-details">
            <div class="interactive-counter">
                <p><strong>Followers:</strong> 
                      <span id="followersCount">
                          1000
                      </span>
                  </p>
                <button onclick="followersFn()">Follow +</button>
            </div>
            <div class="interactive-counter">
                <p><strong>Following:</strong> 
                      <span id="followingCount">
                          100
                      </span>
                  </p>
                <button onclick="followingFn()">Follow +</button>
            </div>
            <div class="interactive-counter">
                <p><strong>Articles:</strong> 
                      <span id="articlesCount">
                          111
                      </span>
                  </p>
                <button onclick="articlesFn()">Read +</button>
            </div>
        </div>
        <div class="social-links">
            <a href=
"https://www.facebook.com/geeksforgeeks.org/" target="_blank"
               class="social-icon">
                  <i class="fab fa-facebook" style="color: #1877f2;"></i></a>
            <a href=
"https://twitter.com/geeksforgeeks?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
               target="_blank" class="social-icon">
                  <i class="fab fa-twitter" style="color: #1da1f2;"></i></a>
            <a href=
                   "https://www.instagram.com/geeks_for_geeks/?hl=en" target=
                   "_blank" class="social-icon"><i class="fab fa-instagram"
                                                style="color: #e1306c;"></i>
              </a>
            <a href="#" target="_blank" class="social-icon">
                  <i class="fab fa-linkedin" style="color: #0077b5;"></i>
              </a>
            <a href="#" target="_blank" class="social-icon">
                  <i class="fab fa-youtube" style="color: #c4302b;"></i>
              </a>
        </div>
    </div>
</body>
 
</html>

CSS

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(to right, #ebe37d, #2F80ED);
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
}
.profile-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.profile-header {
    padding: 20px;
    text-align: center;
    background: linear-gradient(to bottom, #c8714e, #8f94fb);
    color: rgb(255, 255, 255);
}
.profile-picture img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 10px;
}
.profile-name,
.profile-designation,
.profile-location {
    margin: 0;
}
.profile-details {
    padding: 20px;
}
.profile-details p {
    margin: 10px 0;
}
.interactive-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.interactive-counter button {
    background-color: #4e54c8;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.interactive-counter button:hover {
    background-color: #8f94fb;
}
.social-links {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.social-links a {
    margin: 0 5px;
    font-size: 1.5em;
    text-decoration: none;
}
.social-links i {
    transition: color 0.3s ease;
}
.social-links a:hover i {
    color: #8f94fb;
}
.social-icon {
    font-size: 3em;
    transition: transform 0.3s ease;
}
.social-icon:hover {
    transform: scale(1.2);
}