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. 

Preview

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

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="card-container">
        <div class="cart-top-navigation">
            <li>
                <i class="fa-solid fa-arrow-left"></i>
            </li>
            <ul>
                <i id="heart" class="fa-regular fa-heart"></i>
                <i class="fa-solid fa-bars"></i>
            </ul>
        </div>
        <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="">
        </div>
        <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>
                </li>
                <span class="followers">100k</span>
                <span class="followers">Followers</span>
            </div>
            <div class="social-item">
                <li class="youtube">
                    <i class="fa-brands fa-youtube"></i>
                </li>
                <span class="subscribers">100k</span>
                <span class="subscribers">Subscribers</span>
            </div>
            <div class="social-item">
                <li class="twitter">
                    <i class="fa-brands fa-twitter"></i>
                </li>
                <span class="followers">100k</span>
                <span class="followers">Followers</span>
            </div>
        </div>
    </div>
</body>
<script src="script.js"></script>
</html>



CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    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%;
}

.user-name,
.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;
}

JavaScript

script.js

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


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

4 Comments
* 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

    ReplyDelete
    Replies
    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

      Delete
  2. work nahi kar raha hai

    ReplyDelete

Top Post Ad

Below Post Ad