Card Design

Profile card HTML CSS template with source code

Hello everyone, in this post, we will learn how to build the profile card for any person, company, or employee in HTML and CSS. In the last lesson, we discussed how to create a Testimonial HTML template. But at this point, our focus is to build a profile card in HTML and CSS.

A profile card is very necessary for all those who are working in a company as an employee. It is also helpful for the company to show their basic information on this profile card.

It has a lot of different texts for information and images. First, it has a beautiful background image and you can use a solid color according to your requirements. Then it has a box at the center which is created with the help of div. This round box is producing waves as a ripple effect and it is also made in CSS.

Below this, it has the name of the company or person, and this card belongs to that person or company and it is written in the heading. Then it has a username and it is written in normal text. This upper part of the box has a different color and the below part has a different color. Below this, it has different text which is also normal text. You can change its font family or font size using CSS properties.

Html source code:

Therefore, the code Html is given below and you can copy and paste this code into your HTML file.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  </head>
  <body>
    <div class="profile-card">
      <div class="top-section">
        <i class="message fas fa-envelope"></i>
        <i class="notif fas fa-bell"></i>
        <div class="pic">
          <img src="pic.jpg" alt="">
        </div>
        <div class="name">FantacyDesigns</div>
        <div class="tag">@fantacydesigns</div>
      </div>

      <div class="bottom-section">
        <div class="social-media">
          <a href="#"><i class="fab fa-facebook"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fas fa-link"></i></a>
        </div>

        <div class="videos">60+ <span>Posts</span></div>
        <div class="border"></div>
        <div class="subscribers">200+ <span>Web Subscribers</span></div>
        <div class="border"></div>
        <div class="views">500k <span>Views</span></div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<div class="name">FantacyDesigns</div>

<div class="tag">@fantacydesigns</div>

</div>

</div>

<div class="videos">60+ <span>Posts</span></div>

<div class="subscribers">200+ <span>Web Subscribers</span></div>

<div class="views">500k <span>Views</span></div>

</div>

</body>

</html>

Source code of CSS:

CSS is used to design this profile card. So, we have made it responsive with the help of CSS. Its code is ready to copy and given below so that you can copy it for using it.

*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body{
  background: url(bg.jpg) no-repeat center;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card{
  width: 420px;
  overflow: hidden;
  text-align: center;
  position: relative;
  box-shadow: 0 0 10px #00000070;
}

.top-section{
  padding: 60px 40px;
  background: #FF8066;
}

.message,.notif{
  position: absolute;
  top: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff50;
}

.message{
  right: 40px;
}

.notif{
  left: 40px;
}

.pic{
  width: 150px;
  height: 150px;
  margin: auto;
  margin-bottom: 20px;
  border: 2px solid #FF6D51;
  border-radius: 50%;
  padding: 8px;
  position: relative;
}

.pic:after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #FF6D51;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  animation: wave 1.5s infinite linear;
}

@keyframes wave {
  to{
    transform: scale(1.5);
    opacity: 0;
  }
}

.pic img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.name{
  color: #f1f1f1;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tag{
  font-size: 18px;
  color: #222;
}

.bottom-section{
  background: #f1f1f1;
  padding: 60px 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-transform: uppercase;
}

.border{
  width: 1px;
  height: 20px;
  background: #bbb;
  margin: 0 30px;
}

.bottom-section span{
  font-size: 14px;
  display: block;
}

.social-media{
  position: absolute;
  width: 100%;
  top: -30px;
  left: 0;
  z-index: 1;
}

.social-media i{
  width: 60px;
  height: 60px;
  background: #FF6D51;
  border-radius: 50%;
  color: #f1f1f1;
  font-size: 20px;
  line-height: 60px !important;
  margin: 0 10px;
  position: relative;
}

.social-media i:after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #FF6D51;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: -1;
  transition: 0.4s linear;
}

.social-media i:hover:after{
  transform: scale(1.4);
  opacity: 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

margin: 0;

padding: 0;

font-family: "Open Sans",sans-serif;

box-sizing: border-box;

text-decoration: none;

}

body{

background: url(bg.jpg) no-repeat center;

background-size: cover;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.profile-card{

width: 420px;

overflow: hidden;

text-align: center;

position: relative;

box-shadow: 0 0 10px #00000070;

}

.top-section{

padding: 60px 40px;

background: #FF8066;

}

.message,.notif{

position: absolute;

top: 40px;

font-size: 20px;

cursor: pointer;

color: #ffffff50;

}

.message{

right: 40px;

}

.notif{

left: 40px;

}

.pic{

width: 150px;

height: 150px;

margin: auto;

margin-bottom: 20px;

border: 2px solid #FF6D51;

border-radius: 50%;

padding: 8px;

position: relative;

}

.pic:after{

content: "";

width: 100%;

height: 100%;

position: absolute;

border: 1px solid #FF6D51;

left: 0;

top: 0;

box-sizing: border-box;

border-radius: 50%;

animation: wave 1.5s infinite linear;

}

@keyframes wave {

to{

transform: scale(1.5);

opacity: 0;

}

.pic img{

width: 100%;

height: 100%;

border-radius: 50%;

}

.name{

color: #f1f1f1;

font-size: 28px;

letter-spacing: 2px;

text-transform: uppercase;

}

.tag{

font-size: 18px;

color: #222;

}

.bottom-section{

background: #f1f1f1;

padding: 60px 40px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

font-size: 28px;

text-transform: uppercase;

}

.border{

width: 1px;

height: 20px;

background: #bbb;

margin: 0 30px;

}

.bottom-section span{

font-size: 14px;

display: block;

}

.social-media{

position: absolute;

width: 100%;

top: -30px;

left: 0;

z-index: 1;

}

.social-media i{

width: 60px;

height: 60px;

background: #FF6D51;

border-radius: 50%;

color: #f1f1f1;

font-size: 20px;

line-height: 60px !important;

margin: 0 10px;

position: relative;

}

.social-media i:after{

content: "";

width: 100%;

height: 100%;

position: absolute;

background: #FF6D51;

left: 0;

top: 0;

box-sizing: border-box;

border-radius: 50%;

z-index: -1;

transition: 0.4s linear;

}

.social-media i:hover:after{

transform: scale(1.4);

opacity: 0;

}

Download source code:

Sometimes people don’t know how to create files of Html and CSS and how to connect them. Download the source code. It is given below.

Task:

Now you understand how to create a profile card for a person. This profile card has information related to the person. It has name, skill, and contact details in the form of social media icons. These icons are linked with original accounts. After clicking they will redirect you to the person’s profile or account. Now add the progress bar of skills. The progress bar will show the skill level of the user. Add this progress bar below the profile.

I hope this profile card is very helpful for you. If you like this post then must follow us because we share premium templates with our followers only.

Thanks for reading it.

Go to top

Download Source CodeClick to Download