How To Create User Profile Card Using HTML And CSS?

In this beginner level HTML and CSS, we will create user profile card.

I think this is a good tutorial to practice CSS positioning and Flexbox.

Let’s look at the intended layout of profile card.

profile card mockup

Here we have circular image. It is horizontally centered and vertically positioned about 1/4 of the height of the card.

[ We will use CSS position property to position circular image. ]

Then we have main text underneath the image. And 3 more texts in 3 column layout below the main text.

[ We will use Flebox for 3 column layout ]

HTML

<div class="profile">
  <img src="simpson.jpg" alt="">
  <div class="profile-content">
    <h1>Homer Simpson</h1>
    <p class="content-p">Springfield</p>
    <div class="divider"></div>
    <div class="profile-stats">
      <div class="follower">
        <h3>890k</h3>
        <p>Followers</p>
      </div>
      <div class="likes">
        <h3>2.3m</h3>
        <p>Likes</p>
      </div>
      <div class="post">
        <h3>3k</h3>
        <p>Posts</p>
      </div>
    </div><!-- End of Profile Stats-->
  </div><!-- End of Profile Content-->
</div><!-- End of Profile DIV-->

CSS

html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
    background: rgb(238, 235, 235);
    font-family: Arial, Helvetica, sans-serif;
}

Now let’s give width and height to profile card and position it horizontally.

I got box-shadow property value from https://box-shadow.dev/

.profile{
    width: 400px;
    height: 400px;
    margin: 200px auto;
    border-radius: 15px;
    background: #F9C555;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    position: relative;
}

Now let’s style and position the image as discussed above.

.profile img{
    width: 125px;
    height: 125px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -25%);
    z-index: 1;
}

Next let’s position and style profile-content.

.profile-content{
    width: 100%;
    height: 65%;
    background: #fff;
    padding: 15px;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

Also let’s style profile-content text and divider.

.profile h1{
    text-align: center;
    margin-top: 60px;
    margin-bottom: 0;
}
.content-p{
    text-align: center;
    color: #ccc;
}
.divider{
    border:1px solid #ccc;
}

Finally let’s place bottom texts in 3 column layout with Flexbox. And also style those texts.

.profile-stats{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.profile-stats h3{
    margin-bottom: 0;
}
.profile-stats p{
    color: #ccc;
}

Complete CSS Code

html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
    background: rgb(238, 235, 235);
    font-family: Arial, Helvetica, sans-serif;
}
.profile{
    width: 400px;
    height: 400px;
    margin: 200px auto;
    border-radius: 15px;
    background: #F9C555;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    position: relative;
}

.profile img{
    width: 125px;
    height: 125px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -25%);
    z-index: 1;
}
.profile-content{
    width: 100%;
    height: 65%;
    background: #fff;
    padding: 15px;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.profile h1{
    text-align: center;
    margin-top: 60px;
    margin-bottom: 0;
}
.content-p{
    text-align: center;
    color: #ccc;
}
.divider{
    border:1px solid #ccc;
}
.profile-stats{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.profile-stats h3{
    margin-bottom: 0;
}
.profile-stats p{
    color: #ccc;
}

Complete CSS Code

Final Output