<div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;section class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;container py-14 py-md-16&quot;&gt;
    &lt;div class=&quot;row d-flex align-items-start gy-10&quot;&gt;
      &lt;div class=&quot;col-lg-5 position-lg-sticky&quot; style=&quot;top: 8rem;&quot;&gt;
        &lt;h3 class=&quot;display-2 mb-5&quot;&gt;The service I offer is specifically designed to meet your needs.&lt;/h3&gt;
        &lt;p class=&quot;mb-7&quot;&gt;Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.&lt;/p&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary btn-icon btn-icon-end&quot;&gt;More Details &lt;i class=&quot;uil uil-arrow-up-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-6 ms-auto&quot;&gt;
        &lt;div class=&quot;card bg-soft-fuchsia mb-6&quot;&gt;
          &lt;div class=&quot;card-body d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;img src=&quot;/assets/img/icons/lineal/search-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-fuchsia me-5&quot; alt=&quot;&quot; /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-21 mb-2&quot;&gt;User Research&lt;/h3&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.card-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.card --&gt;
        &lt;div class=&quot;card bg-soft-aqua mb-6&quot;&gt;
          &lt;div class=&quot;card-body d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;img src=&quot;/assets/img/icons/lineal/puzzle-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-aqua me-5&quot; alt=&quot;&quot; /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-21 mb-2&quot;&gt;Strategy &amp; Planning&lt;/h3&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.card-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.card --&gt;
        &lt;div class=&quot;card bg-soft-yellow mb-6&quot;&gt;
          &lt;div class=&quot;card-body d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;img src=&quot;/assets/img/icons/lineal/smartphone.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-yellow me-5&quot; alt=&quot;&quot; /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-21 mb-2&quot;&gt;App Design&lt;/h3&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.card-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.card --&gt;
        &lt;div class=&quot;card bg-soft-leaf mb-6&quot;&gt;
          &lt;div class=&quot;card-body d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;img src=&quot;/assets/img/icons/lineal/design.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-leaf me-5&quot; alt=&quot;&quot; /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-21 mb-2&quot;&gt;Brand Design&lt;/h3&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.card-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.card --&gt;
        &lt;div class=&quot;card bg-soft-orange mb-6&quot;&gt;
          &lt;div class=&quot;card-body d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;img src=&quot;/assets/img/icons/lineal/video-editing.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-orange me-5&quot; alt=&quot;&quot; /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-21 mb-2&quot;&gt;Motion Graphic&lt;/h3&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.card-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.card --&gt;
        &lt;div class=&quot;card bg-soft-grape&quot;&gt;
          &lt;div class=&quot;card-body d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;img src=&quot;/assets/img/icons/lineal/browser.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-grape me-5&quot; alt=&quot;&quot; /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3 class=&quot;fs-21 mb-2&quot;&gt;Web Design&lt;/h3&gt;
              &lt;p class=&quot;mb-0&quot;&gt;Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.card-body --&gt;
        &lt;/div&gt;
        &lt;!-- /.card --&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>