About/Performance section - section

This section layout represents the "about section" of the index.html file.Use it to describe your business, or your main activity.

You can display also some key performances on this section.

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main. Replace texts and buttons by yours.

You can duplicate this section as much as you want. Just note that you can not use the data-section value twice for a different section within an HTML page, as it will be the id of the section later. You have to use different value for the duplicated section.

HTML Section - About
<!-- Begin of description with performance section -->
<div class="section section-description fp-auto-height-responsive " data-section="about">

  <!-- Begin of section wrapper -->
  <div class="section-wrapper fullwidth fullheight center-lg-v with-margin margin-topbottom">

    <!-- content -->
    <div class="section-content fullwidth anim">
      <div class="row">
        <div class="col-12 col-lg-8 text-left center-v">
          <div class="wrapper">
            <!-- title and description -->
            <div class="title-desc">
              <h2 class="display-4 display-title anim-1">We are
                <span class="stroke-off">strong</span>
              </h2>
              <p class="anim-2 desc-decor">This describes what we do and what is our mission. At bottom, you can see our awesome portfolio. Lorem ipsum
                magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit
                amet nulla.
              </p>
            </div>

            <!-- Action button -->
            <div class="btns-action anim-3">
              <a class="btn btn-arrow btn-primary" href="#services">
                <span class="icon">
                  <span class="arrow-right"></span>
                </span>
                <span class="text">Solutions</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- icons or analytics -->
      <div class="num-grid">
        <div class="row anim-list">
          <div class="col-6 col-lg-3 item">
            <div class="num-wrapper">
              <div class="num">1200</div>
              <div class="desc">Customers</div>
            </div>
          </div>
          <div class="col-6 col-lg-3 item">
            <div class="num-wrapper">
              <div class="num">100+</div>
              <div class="desc">Partners</div>
            </div>
          </div>
          <div class="col-6 col-lg-3 item">
            <div class="num-wrapper">
              <div class="num">20+</div>
              <div class="desc">Products</div>
            </div>
          </div>
          <div class="col-6 col-lg-3 item">
            <div class="num-wrapper">
              <div class="num">2400</div>
              <div class="desc">Working Hours</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Arrows scroll down/up -->
    <footer class="section-footer scrolldown">
      <a class="up">
        <span class="btn btn-arrow">
          <span class="icon">
            <span class="arrow-up"></span>
          </span>
        </span>
      </a>
      <a class="down">
        <span class="btn btn-arrow">
          <span class="icon">
            <span class="arrow-down"></span>
          </span>
        </span>
      </a>
    </footer>
  </div>
  <!-- End of section wrapper -->
</div>
<!-- End of description with performance section -->