<div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
  &lt;div class=&quot;container py-14 py-md-16&quot;&gt;
    &lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-6 mb-10&quot;&gt;
      &lt;div class=&quot;col-lg-6 order-lg-2&quot;&gt;
        &lt;ul class=&quot;progress-list&quot;&gt;
          &lt;li&gt;
            &lt;p&gt;Web Design&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-violet&quot; data-value=&quot;100&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;Mobile Design&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-blue&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;Development&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-leaf&quot; data-value=&quot;85&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;SEO&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-pink&quot; data-value=&quot;90&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- /.progress-list --&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
        &lt;h2 class=&quot;display-4 mb-3&quot;&gt;What I Do?&lt;/h2&gt;
        &lt;p class=&quot;lead fs-20 mb-5&quot;&gt;Duis mollis est commodo luctus nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
    &lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-6 text-center&quot;&gt;
      &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
        &lt;img src=&quot;/assets/img/icons/lineal/browser.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-violet mb-3&quot; alt=&quot;&quot; /&gt;
        &lt;h4&gt;Web Design&lt;/h4&gt;
        &lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
        &lt;img src=&quot;/assets/img/icons/lineal/smartphone.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-blue mb-3&quot; alt=&quot;&quot; /&gt;
        &lt;h4&gt;Mobile Design&lt;/h4&gt;
        &lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
        &lt;img src=&quot;/assets/img/icons/lineal/settings-3.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-leaf mb-3&quot; alt=&quot;&quot; /&gt;
        &lt;h4&gt;Development&lt;/h4&gt;
        &lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-md-6 col-lg-3&quot;&gt;
        &lt;img src=&quot;/assets/img/icons/lineal/search-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-pink mb-3&quot; alt=&quot;&quot; /&gt;
        &lt;h4&gt;SEO&lt;/h4&gt;
        &lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>