Building a Clean Profile Card UI with HTML and CSS

Clean Profile Card UI with HTML and CSS

If you’ve ever wanted to create one of those clean, modern profile cards you see on tech blogs or UI showcases, this guide walks you through exactly how to build one from scratch. We’ll go through the entire HTML structure, then dive deep into the CSS to understand why every rule exists and what it does. Think of this as a friendly walk-through rather than a dry technical manual.

Let’s jump straight in.

The Full HTML Code

Here’s the HTML that forms the skeleton of the profile card:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card UI Design</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>

  <div class="profile-card">
        <div class="image">
            <img src="profile.jpeg" alt="" class="profile-img" />
        </div>
        <div class="text-data">
            <span class="name">CodingLab</span>
            <span class="job">Youtuber & Blogger</span>
        </div>
        <div class="media-buttons">
            <a href="#" style="background: #4267b2;" class="link">
                <i class="bx bxl-facebook"></i>
            </a>
            <a href="#" style="background: #1da1f2;" class="link">
                <i class="bx bxl-twitter"></i>
            </a>
            <a href="#" style="background: #e1306c;" class="link">
                <i class="bx bxl-instagram"></i>
            </a>
            <a href="#" style="background: #ff0000;" class="link">
                <i class="bx bxl-youtube"></i>
            </a>
        </div>
        <div class="buttons">
            <button class="button">Subscribe</button>
            <button class="button">Message</button>
        </div>
        <div class="analytics">
            <div class="data">
                <i class="bx bx-heart"></i>
                <span class="number">60k</span>
            </div>
            <div class="data">
                <i class="bx bx-message-rounded"></i>
                <span class="number">20k</span>
            </div>
            <div class="data">
                <i class="bx bx-share"></i>
                <span class="number">12k</span>
            </div>
        </div>
    </div>
    
</body>
</html>

This HTML is simple, semantic, and organized. Now let’s talk about the real magic: the CSS styling that turns this structure into a polished UI.

The Full CSS Code Explained Line by Line

Here is the CSS, followed by a deep explanation of every rule:

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}
.profile-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 370px;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}
.profile-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 30%;
    width: 100%;
    border-radius: 24px 24px 0 0;
    background-color: #4070f4;
}
.image{
    position: relative;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color:#4070f4;
    padding: 3px;
    margin-bottom: 10px;
}
.image .profile-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}
.profile-card .text-data{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}
.text-data .name{
    font-size: 22px;
    font-weight: 500;
}
.text-data .job{
    font-size: 15px;
    font-weight: 400;
}
.profile-card .media-buttons {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.media-buttons .link{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0 8px;
    background-color: #4070f4;
    text-decoration: none;
}
.profile-card .buttons{
    display: flex;
    align-items: center;
    margin-top: 25px;
}
.buttons .button{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border: none;
    border-radius: 24px;
    margin: 0 10px;
    padding: 8px 24px;
    background-color: #4070f4;
    cursor: pointer;
    transition: all 0.3 ease;
}
.buttons .button:hover{
    background-color: #0e4bf1;
}
.profile-card .analytics {
    display: flex;
    align-items: center;
    margin-top: 25px;
}
.analytics .data {
    display: flex;
    align-items: center;
    color: #333;
    padding: 0 20px;
    border-right: 2px solid #e7e7e7;
}
.data i{
    font-size: 18px;
    margin-right: 6px;
}
.data:last-child{
    border-right: none;
}

Now let’s break it down.

Importing the Font

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

We import the Poppins font family. This gives the UI a modern feel. Using 300–600 weights allows flexibility for light, regular, medium, and semi-bold text.

Resetting Everything

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

Why do we do this

  • Browsers add default margin and padding. We remove them.
  • box-sizing: border-box makes width calculation sane.
  • Setting the global font ensures consistent typography.

Centering the Whole Card

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}

This makes the card sit in the middle of the screen both vertically and horizontally.

100vh means 100 percent of the viewport height.

The Card Container

.profile-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 370px;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

This is the heart of the UI.

  • Flexbox organizes elements vertically.
  • align-items: center centers everything horizontally.
  • max-width: 370px keeps the card at a good size.
  • White background makes the card stand out.
  • Rounded corners create soft edges.
  • Box shadow gives a modern floating effect.
  • position: relative is required for the pseudo-element top bar.

Decorative Blue Top Bar

.profile-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 30%;
    width: 100%;
    border-radius: 24px 24px 0 0;
    background-color: #4070f4;
}

This creates a blue header background without adding extra HTML. It sits behind the profile picture.

Profile Image Wrapper

.image{
    position: relative;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color:#4070f4;
    padding: 3px;
    margin-bottom: 10px;
}

This div:

  • Creates a circular frame
  • Adds a blue ring around the profile image using padding
  • Keeps it centered

The actual image:

.image .profile-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}

object-fit: cover prevents image distortion.
The white border separates the image from the blue frame.

Text Section

.profile-card .text-data{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

Name and job title are centered and stacked.

.text-data .name{
    font-size: 22px;
    font-weight: 500;
}

.text-data .job{
    font-size: 15px;
    font-weight: 400;
}

The name is larger and bolder. The job is smaller and lighter.

Social Media Buttons

.profile-card .media-buttons {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

This makes all icons appear in a row.

Each icon link:

.media-buttons .link{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0 8px;
    background-color: #4070f4;
    text-decoration: none;
}

Each one is a perfect circle with centered icons.

Colors are overridden inline for Facebook, Twitter, Instagram, YouTube.

Action Buttons

.profile-card .buttons{
    display: flex;
    align-items: center;
    margin-top: 25px;
}

Two buttons displayed in a row.

Each button:

.buttons .button{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border: none;
    border-radius: 24px;
    margin: 0 10px;
    padding: 8px 24px;
    background-color: #4070f4;
    cursor: pointer;
    transition: all 0.3 ease;
}

The pill-shaped buttons get a smooth hover effect:

.buttons .button:hover{
    background-color: #0e4bf1;
}

Analytics Section

.profile-card .analytics {
    display: flex;
    align-items: center;
    margin-top: 25px;
}

A row of analytics blocks.

Each block:

.analytics .data {
    display: flex;
    align-items: center;
    color: #333;
    padding: 0 20px;
    border-right: 2px solid #e7e7e7;
}

The right border visually separates the items.

To avoid a right border on the last item:

.data:last-child{
    border-right: none;
}

Icons inside:

.data i{
    font-size: 18px;
    margin-right: 6px;
}

Spacing makes the numbers readable.

Conclusion

This entire UI is built with clean HTML structure and smart use of CSS fundamentals. There’s no JavaScript, no framework, no complicated layout system. Just flexbox, pseudo-elements, border-radius, shadows, and well-structured styling.

This is a great example of how far you can go with just CSS if you understand spacing, alignment, and layering. If you want, I can write a second part: how to make this profile card fully responsive or how to add animations.

To experiment with a full code, clone this repo

Building a Clean Profile Card UI with HTML and CSS was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More

Related Posts