<div class="code-wrapper">
                  <div class="code-wrapper-inner">
                    <pre class="language-html"><code>&lt;section class=&quot;wrapper bg-soft-primary&quot;&gt;
  &lt;div class=&quot;container pt-10 pb-15 pt-md-14 pb-md-20&quot;&gt;
    &lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 mb-5 align-items-center&quot;&gt;
      &lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
        &lt;h1 class=&quot;display-1 mb-5 mx-md-n5 mx-lg-0&quot;&gt;Creative. Smart. Awesome.&lt;/h1&gt;
        &lt;p class=&quot;lead fs-lg mb-7&quot;&gt;We specialize in web, mobile and identity design. We love to turn ideas into beautiful things.&lt;/p&gt;
        &lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
          &lt;span&gt;&lt;a class=&quot;btn btn-primary rounded me-2&quot;&gt;See Projects&lt;/a&gt;&lt;/span&gt;
          &lt;span&gt;&lt;a class=&quot;btn btn-yellow rounded&quot;&gt;Learn More&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-7&quot; data-cue=&quot;slideInDown&quot;&gt;
        &lt;figure&gt;&lt;img class=&quot;w-auto&quot; src=&quot;/assets/img/illustrations/i6.png&quot; srcset=&quot;/assets/img/illustrations/i6@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&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;
&lt;section class=&quot;wrapper bg-light&quot;&gt;
  &lt;div class=&quot;container pt-14 pt-md-16 pb-9 pb-md-11 pb-md-17&quot;&gt;
    &lt;div class=&quot;row gx-md-5 gy-5 mt-n18 mt-md-n21 mb-14 mb-md-17&quot;&gt;
      &lt;div class=&quot;col-md-6 col-xl-3&quot;&gt;
        &lt;div class=&quot;card shadow-lg&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;img src=&quot;/assets/img/icons/lineal/browser.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-yellow mb-3&quot; alt=&quot;&quot; /&gt;
            &lt;h4&gt;Content Marketing&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.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;more hover link-yellow&quot;&gt;Learn More&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-md-6 col-xl-3&quot;&gt;
        &lt;div class=&quot;card shadow-lg&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;img src=&quot;/assets/img/icons/lineal/chat-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-green mb-3&quot; alt=&quot;&quot; /&gt;
            &lt;h4&gt;Social Engagement&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.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;more hover link-green&quot;&gt;Learn More&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-md-6 col-xl-3&quot;&gt;
        &lt;div class=&quot;card shadow-lg&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;img src=&quot;/assets/img/icons/lineal/id-card.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-orange mb-3&quot; alt=&quot;&quot; /&gt;
            &lt;h4&gt;Identity &amp; Branding&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.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;more hover link-orange&quot;&gt;Learn More&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-md-6 col-xl-3&quot;&gt;
        &lt;div class=&quot;card shadow-lg&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;img src=&quot;/assets/img/icons/lineal/gift.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-blue mb-3&quot; alt=&quot;&quot; /&gt;
            &lt;h4&gt;Product 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.&lt;/p&gt;
            &lt;a href=&quot;#&quot; class=&quot;more hover link-blue&quot;&gt;Learn More&lt;/a&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>