Hello developers, today in this blog you'll learn to create a Responsive Animated Employee’s Profile with Skill Bar using HTML & CSS with modern UI.
The Employee’s Profile with Skill Bar is a bar that shows the skill of the employee. When the higher authority in a company analyzing the employee’s skill, instead of writing in a paragraph it is better to use the skill bar.
In this program [Animated Employee’s Profile with Skill Bar], for example, it shows four employee’s Profile cards, each of them with the Profile photo, name of the employee, and the skill bar with the title called skill. These bars have an animation effect that is when you open or reload the web page, this skill bar displays horizontally with the animation. On reloading the web page, the color of each skill bar moves from left to the right which is made by using the @keyframe property. This Animated Employee’s Profile with Skill Bar is fully responsive for any device.
The source code of this Employee’s Profile with Skill Bar using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Employee’s Profile with Skill Bar code on your projects.
Employee’s Profile with Skill Bar using HTML & CSS with modern UI [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
<!DOCTYPE html>
<html>
<head>
<title>Employee Profile with progress|| Learning robo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="achievement-box">
<div class="achievement-box-icon">
<img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png">
</div>
<div class="achievement-box-namebar-area">
<span>Name : </span>
<span>Skill : </span>
<div class="achievement-box-bar">
<div class="achievement-box-status-25">
</div>
</div>
</div>
</div>
<div class="achievement-box">
<div class="achievement-box-icon">
<img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png">
</div>
<div class="achievement-box-namebar-area">
<span>Name : </span>
<span>Skill : </span>
<div class="achievement-box-bar">
<div class="achievement-box-status-50">
</div>
</div>
</div>
</div>
<div class="achievement-box">
<div class="achievement-box-icon">
<img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png">
</div>
<div class="achievement-box-namebar-area">
<span>Name : </span>
<span>Skill : </span>
<div class="achievement-box-bar">
<div class="achievement-box-status-75">
</div>
</div>
</div>
</div>
<div class="achievement-box">
<div class="achievement-box-icon">
<img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png">
</div>
<div class="achievement-box-namebar-area">
<span>Name : </span>
<span>Skill : </span>
<div class="achievement-box-bar">
<div class="achievement-box-status-100">
</div>
</div>
</div>
</div>
<div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div>
</body>
</html>
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.
Thank you for reading our blog. If you face any problem in creating this Employee’s Profile with Skill Bar using HTML & CSS with modern UI, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
In this program [Animated Employee’s Profile with Skill Bar], for example, it shows four employee’s Profile cards, each of them with the Profile photo, name of the employee, and the skill bar with the title called skill. These bars have an animation effect that is when you open or reload the web page, this skill bar displays horizontally with the animation. On reloading the web page, the color of each skill bar moves from left to the right which is made by using the @keyframe property. This Animated Employee’s Profile with Skill Bar is fully responsive for any device.
The source code of this Employee’s Profile with Skill Bar using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Employee’s Profile with Skill Bar code on your projects.
Employee’s Profile with Skill Bar using HTML & CSS with modern UI [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
background-color: #12192c;
}
.achievement-box {
background-color: #FAD961;
background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
display: flex;
height: 120px;
width: 540px;
margin:25px auto;
border-radius: 30px;
}
.achievement-box-icon {
height: 110px;
width: 110px;
}
.achievement-box-icon > img{
width:100px;
height: 100px;
margin: 10px;
border-radius: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.achievement-box-namebar-area {
color: #121;
display: inline-flex;
flex-direction: column;
flex:1;
justify-content: space-around;
margin: 20px;
height: 80px;
font-weight: bold;
}
.achievement-box-bar {
background-color: #202124;
border: 1px solid #202124;
height: 14px;
width: 380px;
border-radius: 12px;
}
@keyframes skill-25 {
from { width: 0px; }
to { width: 95px; }
}
@keyframes skill-50 {
from {
border-radius: 12px;
width: 0px;
}
to {
width: 190px;
}
}
@keyframes skill-75 {
from {
border-radius: 12px;
width: 0px;
}
to { width: 285px; }
}
@keyframes skill-100 {
from {
border-radius: 12px;
width: 0px;
}
to { width: 340px; }
}
.achievement-box-status-25 {
background-color: rgb(100,255,120);
border-radius: 12px;
margin: 2px;
margin-left: 3px;
height: 9px;
width: 95px;
animation: skill-25 3s;
}
.achievement-box-status-50 {
background-color: rgb(100,255,120);
border-radius: 12px;
margin: 2px;
height: 10px;
width: 190px;
animation: skill-50 3s;
}
.achievement-box-status-75 {
background-color: rgb(100,255,120);
border-radius: 12px;
margin: 2px;
height: 9px;
width: 285px;
animation: skill-75 3s;
}
.achievement-box-status-100 {
background-color: rgb(100,255,120);
border-radius: 12px;
margin: 2px;
height: 9px;
width: 340px;
animation: skill-100 3s;
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:orange;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Employee’s Profile with Skill Bar using HTML & CSS with modern UI, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team