How to create a User Profile Card using HTML CSS and JavaScript with Source Code

Hey, developers welcome to Day 3 of our 90Days 90Projects challenge. And in Day 3 we are going to create a user profile card using HTML, CSS, and JavaScript.

In this user profile card, we have a user image, user name, user short description, and three social media of the user(Instagram, YouTube, Twitter).

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 


User Profile Card using HTML CSS, user profile card using html css and javascript, simple html html code for personal profile, simple profile card html css, profile card design html css



<!DOCTYPE html>
<html lang="en">
    <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> User Profile Card </title>
    <link rel="stylesheet" href=""
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">

    <div class="card-container">
        <div class="cart-top-navigation">
                <i class="fa-solid fa-arrow-left"></i>
                <i id="heart" class="fa-regular fa-heart"></i>
                <i class="fa-solid fa-bars"></i>
        <div class="user-image">
            <!-- Replace "/user.png" with the image of your which you want to show on your profile card-->
            <img src="/user.png" alt="">
        <h2 class="user-name">Raju Sheoran</h2>
        <p class="about-user">My name is Raju Sheoran and I'm a frontend web developer</p>
        <button class="hire-me">Hire Me</button>

        <div class="social-container">
            <div class="social-item">
                <li class="instagram">
                    <i class="fa-brands fa-instagram"></i>
                <span class="followers">100k</span>
                <span class="followers">Followers</span>
            <div class="social-item">
                <li class="youtube">
                    <i class="fa-brands fa-youtube"></i>
                <span class="subscribers">100k</span>
                <span class="subscribers">Subscribers</span>
            <div class="social-item">
                <li class="twitter">
                    <i class="fa-brands fa-twitter"></i>
                <span class="followers">100k</span>
                <span class="followers">Followers</span>
<script src="script.js"></script>

CSS Code


@import url('');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

body {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1rem;
    align-items: center;
    background-color: rgb(237, 233, 224);

.card-container {
    background-color: rgb(31, 31, 32);
    color: white;
    padding: 2rem;
    width: 20rem;
    margin: .5rem;
    border-radius: .4rem;

.cart-top-navigation {
    display: flex;
    justify-content: space-between;

.cart-top-navigation li,
.cart-top-navigation ul {
    list-style: none;
    font-size: 1.2rem;

.cart-top-navigation ul i {
    margin-left: 10px;

.user-image {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;

.user-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

.about-user {
    text-align: center;
    margin-top: 1.5rem;

.user-name {
    font-size: 1.4rem;

.hire-me {
    /* width: 8rem; */
    margin: 1.5rem auto;
    display: block;
    border: none;
    padding: .8rem 1.6rem;
    border-radius: 2rem;
    font-size: 1rem;
    cursor: pointer;

.hire-me:hover {
    background: radial-gradient(circle at 100% 107%, #fdf497 0%, #fdf497 5%#fd5949 45%, #d6249f 60%, #285aeb 90%);


.social-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

.social-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 1rem;

.social-item li {
    list-style: none;
    padding: 0.8rem;
    border-radius: 15%;

.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);

.youtube {
    background-color: #ff0000;

.twitter {
    background-color: #1D9BF0;

.social-item i {
    font-size: 1.5rem;

.social-item span {
    margin-top: .5rem;



const toggleHeart = document.getElementById('heart');
    toggleHeart.addEventListener('click', () => {
        if (toggleHeart.classList == 'fa-regular fa-heart fa-solid') {
   = 'red'
        else {
   = 'white'

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Super bro.But I have one doubt. Again I click not changing to white. How To I fix it

    1. It's working buddy or if you are facing any issue then share your code on github and send me the GitHub Repository link

  2. work nahi kar raha hai


Top Post Ad

Below Post Ad

Ads Section