<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 pt-12 pt-md-14 pb-14 pb-md-16&quot;&gt;
    &lt;div class=&quot;row gx-md-8 gx-xl-12 gy-6 align-items-center&quot;&gt;
      &lt;div class=&quot;col-md-8 col-lg-6 mx-auto&quot;&gt;
        &lt;div class=&quot;img-mask mask-1&quot;&gt;&lt;img src=&quot;/assets/img/photos/about29.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
        &lt;h2 class=&quot;display-5 mb-5&quot;&gt;Hi, I&apos;m Julia, a documentary wedding and couples photographer currently working from and based in London.&lt;/h2&gt;
        &lt;p class=&quot;mb-6&quot;&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio. Sed posuere consectetur est at lobortis facilisis in.&lt;/p&gt;
        &lt;div class=&quot;row counter-wrapper gy-6&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
            &lt;h3 class=&quot;counter&quot;&gt;500K+&lt;/h3&gt;
            &lt;p&gt;Shots Taken&lt;/p&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
            &lt;h3 class=&quot;counter&quot;&gt;500+&lt;/h3&gt;
            &lt;p&gt;Happy Clients&lt;/p&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
            &lt;h3 class=&quot;counter&quot;&gt;25&lt;/h3&gt;
            &lt;p&gt;Awards Won&lt;/p&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
        &lt;/div&gt;
        &lt;!--/.row --&gt;
      &lt;/div&gt;
      &lt;!--/column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
    &lt;div class=&quot;row gx-md-8 gx-xl-12 gy-6 mt-8&quot;&gt;
      &lt;div class=&quot;col-lg-4&quot;&gt;
        &lt;h3&gt;My Skills&lt;/h3&gt;
        &lt;p&gt;Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna vel consectetur purus sit amet fermentum.&lt;/p&gt;
        &lt;ul class=&quot;progress-list&quot;&gt;
          &lt;li&gt;
            &lt;p&gt;Photoshop&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-primary&quot; data-value=&quot;100&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;Final Cut&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-primary&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;Motion Video&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-primary&quot; data-value=&quot;85&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;Manupilation&lt;/p&gt;
            &lt;div class=&quot;progressbar line soft-primary&quot; data-value=&quot;75&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-4&quot;&gt;
        &lt;h3&gt;Why Choose Me?&lt;/h3&gt;
        &lt;p&gt;Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies. Cras mattis consectetur purus amet fermentum.&lt;/p&gt;
        &lt;ul class=&quot;icon-list bullet-bg bullet-soft-primary&quot;&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Aenean eu leo quam pellentesque.&lt;/li&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Nullam quis risus eget urna mollis.&lt;/li&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Donec id elit non mi porta gravida.&lt;/li&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Fusce dapibus tellus ac commodo.&lt;/li&gt;
          &lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Cras justo odio dapibus ac facilisis in.&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-4&quot;&gt;
        &lt;h3&gt;My Process&lt;/h3&gt;
        &lt;div class=&quot;d-flex flex-row mb-5&quot;&gt;
          &lt;div&gt;
            &lt;span class=&quot;icon btn btn-circle btn-soft-primary pe-none mt-1 me-5&quot;&gt;&lt;span class=&quot;number fs-18&quot;&gt;1&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h5 class=&quot;mb-1&quot;&gt;Collect Ideas&lt;/h5&gt;
            &lt;p class=&quot;mb-0&quot;&gt;Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;d-flex flex-row mb-5&quot;&gt;
          &lt;div&gt;
            &lt;span class=&quot;icon btn btn-circle btn-soft-primary pe-none mt-1 me-5&quot;&gt;&lt;span class=&quot;number fs-18&quot;&gt;2&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h5 class=&quot;mb-1&quot;&gt;Data Analysis&lt;/h5&gt;
            &lt;p class=&quot;mb-0&quot;&gt;Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;d-flex flex-row&quot;&gt;
          &lt;div&gt;
            &lt;span class=&quot;icon btn btn-circle btn-soft-primary pe-none mt-1 me-5&quot;&gt;&lt;span class=&quot;number fs-18&quot;&gt;3&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h5 class=&quot;mb-1&quot;&gt;Finalize Product&lt;/h5&gt;
            &lt;p class=&quot;mb-0&quot;&gt;Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&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>