Create beautiful Profile Card with HTML & CSS

In this tutorial, we will learn how to create a simple profile card with HTML & CSS. A profile card is a great way to showcase information about a person, such as their name, profile picture, and social media links. We will start by creating the HTML structure for the card and then use CSS to style it.

Preview (Profile Card with HTML & CSS)

HTML

We will start by creating the HTML structure for our profile card. The code below shows the basic structure for our profile card. It includes a container div, an image element for the profile picture, headings for the name and username, and a paragraph element for the description.

<div class="container">
    <img src="./elonmusk.jpg" class="profilepic" alt="Profile Card with HTML & CSS" />
    <h2 class="title">Elon Musk</h2>
    <p class="tag">@elonmusk</p>
    <p class="desc">
        Elon Musk, the entrepreneur and innovator behind SpaceX, Tesla, and SolarCity, sold one of his internet companies, Paypal.
    </p>

    <div class="social">
        <a href="https://instagram.com/elonmusk"><i class="fa fa-instagram fa-fw"></i></a>
        <a href="https://twitter.com/elonmusk"><i class="fa fa-twitter fa-fw"></i></a>
    </div>
</div>

We will also need to import the FontAwesome CDN link to activate the icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Next, we will add some styling to our profile card using CSS. We will be using CSS selectors to target specific elements within our HTML structure and apply styles to them.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::selection {
    background: rgb(255,18,109);
    color: #fff;
}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(45, 51, 56);
    font-family: 'Open Sans', sans-serif;
}
.container {
    width: 320px;
    height: 350px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.2);
    position: relative;
}
.profilepic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s;
}
.profilepic:hover {
    border: 5px solid rgb(255,18,109);
}
.title {
    margin-top: 70px;
    font-size: 32px;
    text-align: center;
}
.tag {
    text-align: center;
    font-size: 14px;
}
.desc {
    padding: 20px;
    padding-top: 24px;
    font-size: 18px;
}

.social {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    width: 100%;
    border-radius: 0 0 8px 8px;
    background: rgb(255,18,109);
}
.social a {
    color: #fff;
    font-size: 24px;
    width: 32px;
    height: 32px;
    margin: 4px;
    transition: 0.1s;
}
.social a:hover{
    border-radius: 50%;
    background: #FFf;
    color: rgb(255,18,109);
}

And that’s it! With just a few lines of HTML and CSS, we were able to create a simple but stylish profile card. You can also add some additional features like social links and more information to make it more engaging.

You can update the style of the card as you wish to be shown. A Few good examples for profile card css can be using Glassmorphism, Neumorphism etc.

Here the the GitHub repository link: https://github.com/code-architects/profile-card

Read our other blog from the 15 Days – 15 Projects Series.

• Star Rating with HTML and CSS
• Social Media Buttons HTML & CSS
• Create Rock Paper Scissors with JavaScript

Happy Coding 🙂