ADVERTISEMENT

Create User Profile Card Using HTML And CSS ( Source Code)

Telegram Group Join Now

ADVERTISEMENT

Create User Profile Card Using HTML And CSS ( Source Code)

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An User Profile Card Using HTML and CSS.

ADVERTISEMENT

ADVERTISEMENT

A Profile card is a good practice for web development, especially for beginners. Here we add a user image with a name and short intro and followers and followings and lastly the follow button. These are going to be done with the HTML and CSS.

Code by Nupur
Project Download Link Available Below
Language used HTML, and CSS
External link / Dependencies No
Responsive YES
User Profile Card Table

 

ADVERTISEMENT

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

ADVERTISEMENT

So,  Let’s Begin Our User Profile Card Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

HTML CODE For User Profile Card

<div class="card">
        <div class="card_background_img"></div>
        <div class="card_profile_img"></div>
        <div class="user_details">
            <h3>Gordon Ramsay</h3>
            <p>Master Chef</p>
        </div>
        <div class="card_count">
            <div class="count">
                <div class="fans">
                    <h3>2.4M</h3>
                    <p>Fans</p>
                </div>
                <div class="following">
                    <h3>202</h3>
                    <p>Followings</p>
                </div>
                <div class="post">
                    <h3>552</h3>
                    <p>Posts</p>
                </div>
            </div>
             <div class="btn">Follow</div>
        </div>
    </div>

Here We first create a four div class namely card , card_background_img , card_profile_img, user-details for making of card,  image for the background, profile picture, and lastly the user details. Then Inside of div class, we were adding the contents that needs to be done with the profile card.

5+ HTML CSS project With Source Code

ADVERTISEMENT

Each content has a specific div class with a separate name in order to make some changes on specific elements using the CSS. And lastly, we are adding a button property for the following section.

So we have added the HTML tags and Their contents, Now it’s time to make it attractive and user profile card by adding the CSS code.

CSS CODE For User Profile Card

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

body {
    background-color: #e1e7ed;
    text-align: center;
}

h3 {
    font-size: 18px;
    font-weight: 500;
    color: #33363b;
}

p{
    font-size: 14px;
    color: #868d9b;
}

.card {
    width: 360px;
    height: auto;
    background-color: #ffffff;
    margin: 0 auto;
    margin-top: 80px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
}

.card_profile_img {
    width: 120px;
    height: 120px;
    background-color: #868d9b;
    background: url("https://source.unsplash.com/7Sz71zuuW4k");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 2px solid #ffffff;
    border-radius: 120px;
    margin: 0 auto;
    margin-top: -60px;

}

.card_background_img {
    width: 100%;
    height: 180px;
    background-color: #e1e7ed;
    background: url("https://source.unsplash.com/9wg5jCEPBsw");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.user_details p {
    margin-bottom: 20px;
    margin-top: -5px;
}

.user_details h3 {
    margin-top: 10px;
}

.card_count {
    padding: 30px;
    border-top: 1px solid #dde1e7;
}

.count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.count p {
    margin-top: -10px;
}

.btn {
    padding: 16px;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #24c5a1;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

In the first step of CSS, We are setting the margin and padding values to zero with the box-sizing to border-box. and in the body section, we are fixing the alignment of text to center with a background color for the card.

ADVERTISEMENT

Now, We are adding color, font family, and size properties to the contents like heading, sub-heading, following, and followers of the user profile card. here the contents are in h3 and p.

ADVERTISEMENT

Chrome Dinosaur Game Using HTML, CSS &#038; JavaScript

The code for the above explanation is given down.

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

body {
    background-color: #e1e7ed;
    text-align: center;
}

h3 {
    font-size: 18px;
    font-weight: 500;
    color: #33363b;
}

p{
    font-size: 14px;
    color: #868d9b;
}

Now in the further upcoming steps, the code is for making the card and fixing the contents properly in it. The contents were called by specific div class name and inserting the common properties like , width, height , display , margin ,  padding , font-size , font-color,  weight etc… in it to make it attractive and fitted to the card sizes.

Additionally the background properties like BG repeat , BG size and BG position for make a good-looking attractive background image and also some box shadow properties were added.

For alignment of contents we just using flex box items , top and bottom and then margin and padding with top , right properties of it.

ADVERTISEMENT

.card {
    width: 360px;
    height: auto;
    background-color: #ffffff;
    margin: 0 auto;
    margin-top: 80px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
}

.card_profile_img {
    width: 120px;
    height: 120px;
    background-color: #868d9b;
    background: url("https://source.unsplash.com/7Sz71zuuW4k");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 2px solid #ffffff;
    border-radius: 120px;
    margin: 0 auto;
    margin-top: -60px;

}

.card_background_img {
    width: 100%;
    height: 180px;
    background-color: #e1e7ed;
    background: url("https://source.unsplash.com/9wg5jCEPBsw");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.user_details p {
    margin-bottom: 20px;
    margin-top: -5px;
}

.user_details h3 {
    margin-top: 10px;
}

.card_count {
    padding: 30px;
    border-top: 1px solid #dde1e7;
}

.count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.count p {
    margin-top: -10px;
}

Now the last step we do is adding a button to complete the user profile card, For that we calling out the button class and adding width and height for button size ,  background color , border with border radius , font-size , weight , padding , text align and cursor.

ADVERTISEMENT

After implementing this properties the button would be looks attractive and responsive. The code for the above ones is here.

ADVERTISEMENT

.btn {
    padding: 16px;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background-color: #24c5a1;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

Now We have completed adding the CSS code and Hence We came to end of this project but make sure that you view the project output in the below Output Section.

ADVERTISEMENT

Video Output:

FINAL OUTPUT Of User Profile Card

ADVERTISEMENT

Now We have Successfully created our User Profile Card Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Nupur

WRITTEN BY – Ragunathan S

Which code editor do you use for this User Profile Card project coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT