If you are looking for CSS Profile Card Designs, you are in the right post. In this blog, you will learn how to create a user profile card in HTML & CSS. Earlier, I shared with you tutorials on many other types of Web elements such as Simple Website, Card Slider, etc.
Profile cards provide quick access to key Personal Profile information. It could contain detail like a person’s name, email, social media link for that person, and other important details. Simply we can understand profile means the flat, thick piece of paper, used to prove the identification of a particular person.
I used HTML & CSS for this Profile Card. If you are familiar with the basics of HTML & CSS you can easily create this Profile Card. This type of design is far more attractive and beautiful than the regular design.
Below I have given a demo to know what this Profile Card looks like and all the code that I have used to create this Profile Card. you can watch the video tutorial. After watching the given video tutorial you will also know how HTML and CSS codes are working behind this profile card.
Video Tutorial of User Profile Card UI Design in HTML & CSS
Hopefully, from this simple tutorial above you learned how to create this Profile Card. You would be wondering to get all the HTML & CSS code that I have used to create this profile card. Don’t worry I have provided all the source code files below.
Before getting into the source code file. I would like to explain given video tutorial of our project. As you have seen in the video tutorial on Profile Cards in HTML & CSS. There was an image with beautiful background color, some information about the user, and two buttons. To create this profile card I used only HTML and CSS.
I suggest you watch the full video and try to understand the codes, methods, and logic of it properly. If you are a beginner and have some basic knowledge of HTML & CSS then you can also create this type of Profile Card easily.
And that’s how I designed and built a profile card, without having to hire a designer.I hope you found this post helpful!
You Might Like This :
Profile Card UI Design [Source Code]
To create a Profile Card Design, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Profile Card by clicking on the given download button
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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> Profle Card UI Design | CoderGirl </title>
<!---Custom Css File!--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<div class="profile-card">
<div class="image">
<!--<img src="images/profile.jpg" alt="" class="profile-pic">-->
</div>
<div class="data">
<h2>Olivia Gomez</h2>
<span>Developer & Designer</span>
</div>
<div class="row">
<div class="info">
<h3>Following</h3>
<span>120</span>
</div>
<div class="info">
<h3>Followers</h3>
<span>5000</span>
</div>
<div class="info">
<h3>Posts</h3>
<span>209</span>
</div>
</div>
<div class="buttons">
<a href="#" class="btn">Message</a>
<a href="#" class="btn">Follow Me</a>
</div>
</div>
</section>
</body>
</html>
.
Second, paste the following codes into your style.css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.main{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url(images/back.jpg);
background-position: center;
background-size: cover;
}
.profile-card{
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
width: 100%;
border-radius: 25px;
padding: 30px;
border: 1px solid #ffffff40;
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.image{
position: relative;
height: 150px;
width: 150px;
}
.image .profile-pic{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.data{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
}
.data h2{
font-size: 33px;
font-weight: 600;
}
span{
font-size: 18px;
}
.row{
display: flex;
align-items: center;
margin-top: 30px;
}
.row .info{
text-align: center;
padding: 0 20px;
}
.buttons{
display: flex;
align-items: center;
margin-top: 30px;
}
.buttons .btn{
color: #fff;
text-decoration: none;
margin: 0 20px;
padding: 8px 25px;
border-radius: 25px;
font-size: 18px;
white-space: nowrap;
background: linear-gradient(to left, #33ccff 0%, #ff99cc 100%);
}
.buttons .btn:hover{
box-shadow: inset 0 5px 20px rgba(0,0,0,0.4);
}
That’s all, now you’ve successfully created a project on Profile Card . If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
