Hey coders and welcome to another project blog post. Do watch the tutorial video below for better understandings and practice this project source code below. Basically, we have a box with 4 containers in it. Then we have coloured fluids/progress inside the containers. This is a simplified human friendly explanation. For a technical explanation, the source code below would assist you.



SOURCE CODE (Copy and pase these in an index.html file and run it)
 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html>
<head>
<title>Responsive Skills Bar using HTML & CSS | CodingPorium</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
box-sizing: border-box
}
::selection {
background:royalblue;
color:white;
}
body{
  background:royalblue;
  font-family:poppins;
}
/*The box where inside it we have all details*/
.box {
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
/*Container to store fluid/progress bar*/
.container {
  width: 100%;
  background-color: #ddd;
  border-radius:25px;
}
/*Customization of fluid/progress bar*/
.skills {
  text-align: right;
  padding-top: 10px;
  border-radius:25px;
  padding-bottom: 10px;
  color: white;
}
/*Style color of fluid/progress bar and it's width according to the percentage*/
.html {width: 90%; background-color: #04AA6D;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
</style>
</head>
<body>

<h1 style="color:white;text-align:center;">My Skills</h1>
<div class="box">
<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>
</div>
</body>
</html>

Thansk for reading and I hoped you enjoy this post. Do subscribe to out YouTube channel to support us and for more coding tutorials with free source code. Do comment down any doubts, suggestions or ideas you have. Till the next post,bye!
Tags

Post a Comment

Post a Comment

Previous Post Next Post