Making A Responsive Skill Bar For Website In HTML ans CSS.|||
Copy HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skills</title>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skill html">100%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skill css">90%</div>
</div>
<p>JS</p>
<div class="container">
<div class="skill js">80%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skill php">75%</div>
</div>
</body>
</html>
Copy CSS FIle:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 1000px;
background-color: #dddddd;
}
.skill{
position: relative;
height: 25px;
padding-bottom: 10px;
padding-bottom: 10px;
color: white;
text-align: center;
}
.html{
width: 100%;
background-color: yellow;
animation: 2s html;
}
.css{
width: 90%;
background-color: aqua;
animation: 2s css;
}
.js{
width: 80%;
background-color: tomato;
animation: 2s js;
}
.php{
width: 75%;
background-color: teal;
animation: 2s php;
}
@keyframes html{
0%{
max-width: 0%;
}
100%{
max-width: 100%;
}
}
@keyframes css{
0%{
max-width: 0%;
}
100%{
max-width: 90%;
}
}
@keyframes js{
0%{
max-width: 0%;
}
100%{
max-width: 80%;
}
}
@keyframes php{
0%{
max-width: 0%;
}
100%{
max-width: 75%;
}
}
Comments
Post a Comment