Profile Card Design Using HTML and CSS

Hello readers, today we are gonna to learn how to make a personal profile card using html and css like the image i hava showed you above.

The profile card is a card that showing you Information to another people. You can use profile cards to identify and segment contacts, and implement personalization rules. A profile card is a card that contains saved profile keys and profile values. They allow you to assign profile values consistently across all items on your website.

I have shared about the profile card before,here is the image about the profile card i have shared before.

If you are interesting about the another profile card design you can click here to visit that. Neumorphism Profile Card, Profile Card Design

As you can see in the image, I have put a avatar at the top of the card. It can let the visitor know who you are.Besides that, There are some icons at the bottom of the card. You can add some link to the icons so that the visitor can be link to your website, Facebook, Youtube, Instagram and etc. You can change the icon yourself if you want the visitor link to another social media platform.

All the design is fully based on the HTML and CSS. So It is very easy to make if you have a basic skill about html and css. So let's start the tutorial today.

Tutorial

Here is the source code for this profile card design. You can copy-paste the codes given to your file. But i recommend you to download the zip for the source code for this design because it will be easier.

As the usually, create a html file and named it index.html. After that, here is the html code.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Personal Profile Card</title>
   <link rel="stylesheet" href="style.css" type="text/css" media="all" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tool-online/icons@v1.7.2/font/bootstrap-icons.css" type="text/css" media="all" />
</head>
<body>
   <div class="container">
      <div class="card-wrapper">
         <div class="img">
            <img src="avatar.png" alt="avatar" />
         </div>
         <div class="card">
            <p class="name">John Doe</p>
            <span>Website Developer & UI Designer</span>
            <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi numquam, iste est ab rem officiis natus perspiciatis laboriosam.</p>
            <button class="btn">View More</button>
            <div class="icons">
               <i class="bi-facebook fb"></i>
               <i class="bi-youtube yt"></i>
               <i class="bi-instagram ig"></i>
            </div>
         </div>
      </div>
   </div>
</body>
  </html>

After completed the html part, we are going to create the css file and named it style.css. Make sure in the html file you have write the code to link to the css file. Here is the CSS code.

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Nunito', sans-serif;
}
a{
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-decoration: none;
}
body{
   background: rgba(107,167,230,0.4);
}
.container{
   min-height: 100vh;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
div.card-wrapper{
   margin-top: 40px;
   width: 280px;
   height: 400px;
   position: relative;
   background: #FFF;
   border-radius: 10px;
   box-shadow: 0 10px 15px 1px rgba(0,0,0,0.25);
   display: flex;
   justify-content: center;
}
div.img{
   width: 150px;
   height: 150px;
   border-radius: 50%;
   border: 8px solid rgba(107,167,230,0.4);
   background: #FFF;
   position: absolute;
   left: 65px;
   top: -85px;
   overflow: hidden;
}
.img img{
   width: 100%;
   position: absolute;
   bottom: 0;
}
div.card{
   text-align: center;
   padding-top: 75px;
}
.card p.name{
   font-size: 24px;
   font-weight: bold;
}
.card span{
   font-size: 14px;
   color: #585858;
}
.card p.desc{
   padding: 25px 15px 10px 15px;
}
div.icons{
   height: 30px;
}
.icons i{
   font-size: 22px;
   margin: 10px;
   transition: 0.8s;
}
i.fb:hover{
   color: #1877F2;
}
i.yt:hover{
   color: #FF0000;
}
i.ig:hover{
   color: #D13E84;
}
.btn{
   width: 120px;
   height: 35px;
   margin: 20px;
   background: #0085FF;
   border: none;
   color: #FFF;
   border-radius: 5px;
   position: relative;
   overflow: hidden;
}
.btn::before{
   content: "";
   width: 100%;
   height: 100%;
   background: rgba(255,255,255,0.3);
   position: absolute;
   top: 0;
   left: 0;
   transform: translateX(-100%);
   transition: 0.8s;
}
.btn:hover::before{
   transform: translateX(0%);
}

Now, all the code is already done. We are successfully built a own profile card. You can change the information inside the profile card to your information if you want to use the card.

DOWNLOAD ZIP

If you code didn't work well or facing any problem, you can download the zip here. It’s free and a .zip file will be downloaded then you’ve to extract it.

Download Files

Please wait..

If the download didn't start automatically, click here.

Coding World

Profile Card Design Using HTML and CSS

Tutorial

HTML

CSS

DOWNLOAD ZIP

Post a Comment