<div class="spd-row spd-padding-top-bottom-50">

  <h3 class="spd-text-center spd-padding-bottom-50">Rounded Skills Bar1</h3>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="86"> <span class="percent2">

      <h3>86%</h3>

      </span> </span>

      <h3> html5</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="75"> <span class="percent">75</span> </span>

      <h3> css3</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="55"> <span class="percent">55</span> </span>

      <h3> development</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart spd-n-chart-pie2" data-percent="80"> <span class="percent">80</span> </span>

      <h3> design</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae </p>

    </div>

  </div>

</div>		                                            
               

	
          <div class="spd-row spd-padding-top-bottom-50">

  <h3 class="spd-text-center spd-padding-bottom-50">Rounded Skills Bar2</h3>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart2" data-percent="86"> <span class="percent2"> <i class="fa fa-html5 fa-2x"></i></span> </span>

      <h3> html5</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart2" data-percent="75"> <span class="percent2"> <i class="fa fa-css3 fa-2x"></i></span> </span>

      <h3> css3</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart2" data-percent="55"> <span class="percent2"> <i class="fa fa-desktop fa-2x"></i></span> </span>

      <h3> development</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart2" data-percent="80"> <span class="percent2"> <i class="fa fa-leaf fa-2x"></i></span> </span>

      <h3> seo</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae </p>

    </div>

  </div>

</div>                                            
               

		             
          <div class="spd-row spd-padding-top-bottom-50">

  <h3 class="spd-text-center spd-padding-bottom-50">Rounded Skills Bar3</h3>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart" data-percent="86"> <span class="percent2">

      <h3>HTML</h3>

      </span> </span>

      <h3> html5</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart" data-percent="75"> <span class="percent2">

      <h3>CSS</h3>

      </span> </span>

      <h3> css3</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart" data-percent="55"> <span class="percent2">

      <h3>DNN</h3>

      </span> </span>

      <h3> development</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae. </p>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="spd-chart"> <span class="chart" data-percent="80"> <span class="percent2">

      <h3>SEO</h3>

      </span> </span>

      <h3> seo</h3>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae </p>

    </div>

  </div>

</div>
               

	
          
          <div class="spd-row spd-padding-top-bottom-50">

  <h3 class="spd-text-center spd-padding-bottom-50">Counter box1</h3>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <span class="spd-counter bigcount">4,567</span>

      <h3>Projects</h3>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <span class="spd-counter bigcount">567</span>

      <h3>Clients</h3>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <span class="spd-counter bigcount">67</span>

      <h3>Themes</h3>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <span class="spd-counter bigcount">50</span><span class="counter-ex">+</span>

      <h3>Pages</h3>

    </div>

  </div>

</div>		                                        
               

		      
          <div class="spd-row spd-padding-top-bottom-50">

  <h3 class="spd-text-center spd-padding-bottom-50">Counter box2</h3>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <i class="fa fa-briefcase fa-3x"></i> <span class="spd-counter mediumcount">3000</span>

      <h4>happy clients</h4>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <i class="fa fa-globe fa-3x"></i> <span class="spd-counter mediumcount">200</span>

      <h4>shortcode &amp; items</h4>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <i class="fa fa-download fa-3x"></i> <span class="spd-counter mediumcount">77</span><span class="counter-ex2">%</span>

      <h4>cups of coffee</h4>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box"> <i class="fa fa-send-o fa-3x"></i> <span class="spd-counter mediumcount">50</span><span class="counter-ex2">K</span>

      <h4>followers</h4>

    </div>

  </div>

</div>   
               

		            
          <div class="spd-row spd-padding-top-bottom-50">

  <h3 class="spd-text-center spd-padding-bottom-50">Counter box3</h3>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box2">

      <div class="count-inline">

        <div class="count-left"> <i class="fa fa-briefcase fa-4x"></i> </div>

        <div class="count-right"> <span class="spd-counter mediumcount">3000</span>

          <h4>happy clients</h4>

        </div>

      </div>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box2">

      <div class="count-inline">

        <div class="count-left"> <i class="fa fa-download fa-4x"></i> </div>

        <div class="count-right"> <span class="spd-counter mediumcount">200</span>

          <h4>shortcodes</h4>

        </div>

      </div>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box2">

      <div class="count-inline">

        <div class="count-left"> <i class="fa fa-globe fa-4x"></i> </div>

        <div class="count-right"> <span class="spd-counter mediumcount">77</span><span class="counter-ex2">%</span>

          <h4>cups of coffee</h4>

        </div>

      </div>

    </div>

  </div>

  <div class="spd-col-md-3 spd-col-sm-3 spd-xs-padding-bottom-50">

    <div class="counter-box2">

      <div class="count-inline">

        <div class="count-left"> <i class="fa fa-send-o fa-4x"></i> </div>

        <div class="count-right"> <span class="spd-counter mediumcount">50</span><span class="counter-ex2">K</span>

          <h4>followers</h4>

        </div>

      </div>

    </div>

  </div>

</div>