How to create a Profile Card Design

Last week I found something that amazed me. A designer that took the 100 UI Design Challenge to a whole new level! She’s been creating a new design every workday for the past 3+ years (800+ designs)! Amazing! 😮 You can find her on dribbble as Ildiesign and also on twitter @Ildiesign.

It’s amazing to see such a perseverance!

I’ve been talking with her and the cool part is that we grow up in the same city, heh! This is neat! 😄

She is also very kind and she allowed me to use her amazing designs in my coding journey, so today we’re going to code this cool Profile Card Design that she made a few days ago.

You can see the result live on Codepen:

https://codepen.io/FlorinPop17/pen/EJKgKB

Note that I used a different image and I haven’t copied exactly all the spacing, etc… I wanted to give it my own ‘touch’ a little bit, although the final result is pretty similar. 😛

The HTML

As you can see above, the markup is quite simple. We have an image, some text, two buttons and a list of skills.

<div class="card-container">
    <span class="pro">PRO</span>
    <img
        class="round"
        src="https://randomuser.me/api/portraits/women/79.jpg"
        alt="user"
    />
    <h3>Ricky Park</h3>
    <h6>New York</h6>
    <p>
        User interface designer and <br />
        front-end developer
    </p>
    <div class="buttons">
        <button class="primary">
            Message
        </button>
        <button class="primary ghost">
            Following
        </button>
    </div>
    <div class="skills">
        <h6>Skills</h6>
        <ul>
            <li>UI / UX</li>
            <li>Front End Development</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>React</li>
            <li>Node</li>
        </ul>
    </div>
</div>

I took the profile image from randomuser.me. Check it out, they have a ton of profile images.

I also grouped the buttons in a div because we need to have them next to each other. The second button has an extra class - ghost - because we want to invert its background-color and color properties (hence the ghost class name 👻).

And last, we have the list of skills that is within it’s own container because it will have a different background-color.

The CSS

There are some base styles that we want to apply first to the body and to the text components:

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
    box-sizing: border-box;
}

body {
    background-color: #28223f;
    font-family: Montserrat, sans-serif;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    margin: 0;
}

h3 {
    margin: 10px 0;
}

h6 {
    margin: 5px 0;
    text-transform: uppercase;
}

p {
    font-size: 14px;
    line-height: 21px;
}

The body is a flex container with align-items and justify-content set to center because we want to keep the card in the middle of the screen, hence the height: 100vh on it. Other than that the text styling it’s pretty clear; we are overwriting the default properties for h3, h6 and p tags.

Next up, let’s style the .card-container:

.card-container {
    background-color: #231e39;
    border-radius: 5px;
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75);
    color: #b3b8cd;
    padding-top: 30px;
    position: relative;
    width: 350px;
    max-width: 100%;
    text-align: center;
}

As you can see it has a relative position. This is because we want to put that .pro tag in the top-left corner (see below) and we don’t want to let it interfere with the rest of the tags (by default it would push the image to the right).

Also, note that we only set a top padding but not a bottom padding to the container. This is because we have the skills section below and we don’t want to have extra padding underneath it. Later (see below) we’ll add a margin-top of 30px to the .skills section in order to keep the space symmetrical.

The text-align property set to center will make sure that all the elements will stay aligned to the center, even the .buttons container.

Next up, the .pro tag styling:

.card-container .pro {
    color: #231e39;
    background-color: #febb0b;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 7px;
    position: absolute;
    top: 30px;
    left: 30px;
}

Next, let’s round the image and give it some padding and a border to have that nice effect:

.card-container .round {
    border: 1px solid #03bfcb;
    border-radius: 50%;
    padding: 7px;
}

The buttons, as simple as:

button.primary {
    background-color: #03bfcb;
    border: 1px solid #03bfcb;
    border-radius: 3px;
    color: #231e39;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    padding: 10px 25px;
}

button.primary.ghost {
    background-color: transparent;
    color: #02899c;
}

Note that we have to overwrite the font-family again on the buttons because it will not inherit this property from the body by default.

And lastly, the .skills section:

.skills {
    background-color: #1f1a36;
    text-align: left;
    padding: 15px;
    margin-top: 30px;
}

.skills ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.skills ul li {
    border: 1px solid #2d2747;
    border-radius: 2px;
    display: inline-block;
    font-size: 12px;
    margin: 0 7px 7px 0;
    padding: 7px;
}

We revert the text-align: center from the parent on the .skills div as we want the text to be on the left, we remove the default styling of the ul and we change the lis to be inline-block elements in order to have them sit next to each other.

And… voila! We’re done!

Conclusion

As you could see it was a pretty straightforward component to create, but nevertheless it looks very good!

Thanks again to ildiesign for letting me use her design! I will definitely do this in the future as it is a lot of fun! 😄

Make sure you check out the other designs that she created!

Did you enjoy this type of article? Let me know on twitter @florinpop1705 or by email.

Happy Coding! 😇