Header Ads Widget

html css profile card designs

My codding spot April 30, 2022

 A profile card represents personal key information about the person and provides a way to reach that person.

In this post, you will learn designing different types of profile cards using HTML and CSS. Here I will create different styles of profile cards from simple to animated.

Skills required:-

Basic HTML and CSS animation.

1) Simple profile card 

CSS properties required for design card:-

box-shadow, border-radius, pseudo-class:hover.

This is a simple design of a card with just a shadow and hover effect. When the button clicks it moves 5px to the bottom.

HTML code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title> simple profile card</title>
<link rel="stylesheet" href="profile_card.css">
</head>
<body>
<div class="main">
   <div class="profile">
     <img src="istockphoto-1257689100-612x612.jpg">
   </div>
   <div class="text">
   <h2>John Doe</h2>
   <h3>Frontend Developer</h3>
   <h4>Google</h4>
   <button type="button" name="contact">Contact Me</button>
   </div>
</div>
</body>
</html>

CSS code

/*css file*/
*{
font-family:"Times New Roman", Times, serif;
}
.main
{
position:relative;
background-color:#034c5f;
height:400px;
width:300px;
border-radius:10px;
}
.profpic
{
position:absolute;
top:10px;
left:50px;
background-color:#97bec6;
height:200px;
width:200px;
border-radius:100px;
}
img
{
height:150px;
width:150px;
border-radius:75px;
background-color:#ffffff;
margin-top:25px;
margin-left:25px;
box-shadow:1px 3px 15px #000000;
}
.text
{
position:absolute;
top:200px;
left:55px;
text-align:center;
}
h2,h3,h4
{
color:#ffffff;
}
button
{
font-size:20px;
font-weight:bold;
height:40px;
width:100%;
border-bottom:5px solid #000000;
}
button:hover
{
margin-top:5px;
border-bottom:3px solid #333333;
}

Output:-
Simple profile card (html,css)
Simple profile card



2) Animated Profile card 

CSS properties required for adding animation to a card:-

Animation effect applies on profile image (<img>) using animation properties, box-shadow property,  border-radius property, and :hover pseudo-class.

In this card design, only the profile image will be visible with changing border color.

When you mouse over on the profile image its size will decreases and the shape will be changed from square to circle. The initially hidden information is displayed after the mouse over the profile image.

HTML code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>profile card</title>
<link rel="stylesheet" href="animatedpfcrd.css">
</head>
<body>
<div class="card">
<div class="info">
<p>Hii, I am John Fernandes</p><p> from New york,U.S.A.</p>
<p> Software Engineer at Google.</p>
<p>reach me on john_fernandes123@gmail.com</p>
</div>
<img src="avatar-gc41c20c31_1280.png">
</div>
</body>
</html>

CSS code

/*CSS file*/
.card
{
position:relative;
height:300px;
width:300px;
background-color:#000000;
border-radius:20px;
box-shadow:5px 5px 10px #000333;
}
img
{
position:absolute;
top:22px;
left:22px;
height:250px;
width:250px;
border:3px inset #ccff33;
background-color:#ffffff;
animation-name:border;
animation-duration:3s;
animation-timing-function:ease-in-out;

}
@keyframes border
{
0%{border-top-color:#ffcccc;border-right-color:#00ffff;border-bottom-color:#ff0000;border-left-color:#000fff;}
30%{border-top-color:#000ff;border-right-color:#ff0000;border-bottom-color:#00ffff;border-left-color:#ffcccc;}
60%{border-top-color:#ff0000;border-right-color:#ffcccc;border-bottom-color:#000fff;border-left-color:#ff0000;}
}
.info
{
position:absolute;
top:22px;
left:22px;
height:250px;
width:250px;
background-color:#333333;
border:3px groove #ffffff;
}
p
{
color:#00ffff;
text-align:center;
}
img:hover
{
animation-name:hide;
animation-duration:3s;
animation-timing-function:linear;
animation-fill-mode:forwards;
}
@keyframes hide
{
0%{height:200px;width:200px;top:50px;left:30px;border-radius:30px;}
30%{height:150px;width:150px;top:100px;left:60px;border-radius:50px;}
60%{height:100px;width:100px;top:150px;left:100px;border-radius:70px;}
100%{height:80px;width:80px;top:185px;left:105px;border-radius:100px;}
}

Output:-


3) Animated profile card with social media icon images.

CSS properties required for card design:-

box-shadow, border-radius, animation properties pseudo-class :hover

This card has linear gradient background which continuously changes. When you mouse over the profile image its size will increases.

You can view the image of the profile in a little bigger size when you mouse over the profile picture.

Social media icons images have blurred white shadows and it will display when the mouse over on it.

The button has a transparent background. When you click on it its color changes.

When you mouse over any area of the profile card shadow will appear at the right and bottom side of the card.

HTML code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<title>profile card with social media images</title>
<link rel="stylesheet" href="profile_socialimg.css">
</head>
<body>
<div class="main">
<div class="pic">
<img class="profile" src="3d-rendering-male-avatar-businessman-with-suit-tie-good-business-finance-theme-design_477250-14.jpg">
<h2>John Doe</h2>
<p>Blogger</p>
<h3>About:-</h3>
<p id="c1">An educational blogger with 5 years of experience in content writing.</p>
<p id="c2">Skills:</p>
<span id="skil1">HTML</span>
<span id="skil2">CSS</span>
<span id="skil3">JavaScript</span>
<span id="skil4">Bootstrap</span>
<span id="skil5">Angular</span>
<span id="skil6">React</span>
</div>
<div class="socialicon">
<a href="#"  >
<img id="icon1" src="blogger-logo-g9bde0ea54_1280.png"">
</a>
<a href="#" >
<img id="icon2" src="instagram-gc9d974c8a_1280.png">
</a>
<a href="#" >
<img id="icon3" src="twitter-g812ae35f1_1920.png">
</a>
<a href="#" >
<img id="icon4" src="facebook-g1399e5516_1280.png">
</a>
<a href="#" >
<img id="icon5" src="linked-in-gb153d6580_1280~2.png">
</a>
</div>
<button type="button" name="contact">Contact Me</button>
</div>
</body>
</html>

CSS code

/*css file*/
*
{
font-family:arial,helvetica,sans-serif;
}
.main
{
position:relative;
height:500px;
width:300px;
background:linear-gradient(#001949,#5567c9,#8d9ac5);
animation-name:backgroundcolor;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
.main:hover
{
box-shadow:3px 3px 5px #000333;
}
@keyframes backgroundcolor
{
from{background:linear-gradient(#8d9ac5,#001949,#5567c9);}
to{background:linear-gradient(#001949,#5567c9,#8d9ac5);}
}
.profile
{
position:absolute;
top:30px;
left:100px;
height:100px;
width:100px;
border-radius:20px;
box-shadow:5px 5px 15px #000000;
}
.profile:hover
{
height:200px;
width:200px;
left:50px;
}
h2
{
position:absolute;
top:115px;
left:100px;
color:#000000;
}
p
{
position:absolute;
top:150px;
left:125px;
color:#cccccc;
}
h3
{
position:absolute;
top:250px;
left:20px;
}
#c1
{
position:absolute;
top:280px;
left:30px;
}
#c2
{
position:absolute;
top:330px;
left:20px;
font-weight:bold;
color:#000333;
}
#skil1,#skil2,#skil3,#skil4,#skil5,#skil6
{
position:absolute;
background-color:#333333;
opacity:0.7;
color:#f3f3fe;
padding:3px;
margin:20px;
border-radius:5px;;
}
#skil1
{
top:350px;
left:30px;
}
#skil2
{
top:350px;
left:90px;
}
#skil3
{
top:350px;
left:138px;
}
#skil4
{
top:380px;
left:30px;
}
#skil5
{
top:380px;
left:110px;
}
#skil6
{
top:380px;
left:175px;
}
.socialicon
{
position:absolute;
top:200px;
left:20px;
display:inline;
}
a
{
text-decoration:none;
}
#icon1,#icon2,#icon3,#icon4,#icon5
{
margin-top:20px;
margin-left:15px;;
height:30px;
width:30px;
}
#icon1:hover,#icon2:hover,#icon3:hover,#icon4:hover,#icon5:hover
{
box-shadow:1px 7px 15px #ffffff;
}
button
{
position:absolute;
top:450px;
left:75px;
height:30px;
width:50%;
font-size:12pt;
color:#ffc2b8;
border-radius:50px;
background-color:transparent;
}
button:hover
{
background-color:#ffc2b8;
color:#e17a8d;
}

Output:-


>> All images are used from free images websites: pixabay, freeimages, istockphoto etc..
You can download images without any cost.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments