<div class="tools">
               <h4>Tools Expertness</h4>
               
               <div class="tools-progres">
                  
                  <div class="progres">
                   <p>HTML 95%</p>
                   <div class="prog">
                       <span class="bg-lnir" style="width: 95%;"></span>
                   </div>
                   </div>
                  
                   <div class="progres">
                   <p>CSS 85%</p>
                   <div class="prog">
                       <span class="bg-lnir" style="width: 85%;"></span>
                   </div>
                   </div>
                   
                   <div class="progres">
                   <p>Javascript 70%</p>
                   <div class="prog">
                       <span class="bg-lnir" style="width: 70%;"></span>
                   </div>
                   </div>
                   
                   <div class="progres">
                   <p>PHP  60%</p>
                   <div class="prog">
                       <span class="bg-lnir" style="width: 60%;"></span>
                   </div>
                   </div>
                   
                   <div class="progres">
                   <p>Bootstrap 50%</p>
                   <div class="prog">
                       <span class="bg-lnir" style="width: 50%;"></span>
                   </div>
                   </div>
               </div>
           </div>
*{box-sizing: border-box; }
body{
  margin: 0; padding: 0px; font-family: 'Poppins', sans-serif;}




.bg-lnir{background-image: linear-gradient(to right, #8490ff , #a3eeff);}

::selection{
    color: aliceblue;
    background: #7c9cfe;
}



/****************** start tools section *********************/

.tools{
    padding: 40px 50px;
}

.tools .tools-progres{}
.tools .tools-progres .progres{
    width: 50%;
    float: left;
    position: relative;
    padding-bottom: 60px;
}
.tools .tools-progres .progres:nth-child(odd){
    padding-right: 20px;
}
.tools .tools-progres .progres:nth-child(odd) p{right: 20px;}
.tools .tools-progres .progres:nth-child(even){
    padding-left: 20px;
}
.tools .tools-progres .progres p{
    float: left;
    font-size: 13px;
    color: #777;
    margin: 0;
    position: absolute;
    top: -20px;
    right: 0;
}
.tools .tools-progres .progres .prog{
    width: 100%;
    background-color: #dddddd;
    border: 3px solid #eee;
    border-radius: 15px;
    height: 14px;
    position: relative;
}
.tools .tools-progres .progres .prog span{
    
    position: absolute;
    height: 100%;
    border-radius: 15px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.