Create beautiful Profile Card with HTML & CSS

Profile card with HTML & CSS | Code Architects

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)

Profile Card with HTML & CSS | Code Architects

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); */
    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.

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

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

Happy Coding 🙂

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

nine + two =