Blocks - Process

Copy any custom block snippet below and paste it on your page to build your website easily.

Filter Blocks:

How It Works?

So here are three working steps why our valued customers choose us.

Collect Ideas

Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.

Data Analysis

Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.

Finalize Product

Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.

View example's code

<section class="wrapper bg-light wrapper-border">
  <div class="container py-14 py-md-16">
    <div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
      <div class="col-md-8 col-lg-6 position-relative">
        <div class="shape bg-dot primary rellax w-17 h-21" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
        <div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
        <figure class="rounded"><img src="./assets/img/photos/about7.jpg" srcset="./assets/img/photos/about7@2x.jpg 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5 col-xl-4 offset-lg-1">
        <h2 class="h1 mb-3">How It Works?</h2>
        <p class="lead fs-lg mb-6">So here are three working steps why our valued customers choose us.</p>
        <div class="d-flex flex-row mb-6">
          <div>
            <span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">1</span></span>
          </div>
          <div>
            <h4 class="mb-1">Collect Ideas</h4>
            <p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
          </div>
        </div>
        <div class="d-flex flex-row mb-6">
          <div>
            <span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">2</span></span>
          </div>
          <div>
            <h4 class="mb-1">Data Analysis</h4>
            <p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
          </div>
        </div>
        <div class="d-flex flex-row">
          <div>
            <span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">3</span></span>
          </div>
          <div>
            <h4 class="mb-1">Finalize Product</h4>
            <p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
          </div>
        </div>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

How We Do It?

We make your spending stress-free for you to have the perfect control.

Concept

Nulla vitae elit libero elit non porta gravida eget metus cras. Aenean eu leo quam. Pellentesque ornare.

Prepare

Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.

Retouch

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.

Finalize

Integer posuere erat, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo.

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="display-4 mb-3">How We Do It?</h2>
    <p class="lead fs-lg mb-8">We make your spending <span class="underline">stress-free</span> for you to have the perfect control.</p>
    <div class="row gx-lg-8 gx-xl-12 gy-6 process-wrapper line">
      <div class="col-md-6 col-lg-3"> <span class="icon btn btn-circle btn-lg btn-soft-primary disabled mb-4"><span class="number">01</span></span>
        <h4 class="mb-1">Concept</h4>
        <p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras. Aenean eu leo quam. Pellentesque ornare.</p>
      </div>
      <!--/column -->
      <div class="col-md-6 col-lg-3"> <span class="icon btn btn-circle btn-lg btn-primary disabled mb-4"><span class="number">02</span></span>
        <h4 class="mb-1">Prepare</h4>
        <p class="mb-0">Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.</p>
      </div>
      <!--/column -->
      <div class="col-md-6 col-lg-3"> <span class="icon btn btn-circle btn-lg btn-soft-primary disabled mb-4"><span class="number">03</span></span>
        <h4 class="mb-1">Retouch</h4>
        <p class="mb-0">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.</p>
      </div>
      <!--/column -->
      <div class="col-md-6 col-lg-3"> <span class="icon btn btn-circle btn-lg btn-soft-primary disabled mb-4"><span class="number">04</span></span>
        <h4 class="mb-1">Finalize</h4>
        <p class="mb-0">Integer posuere erat, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

How It Works

Download the app, create your profile and voilà, you're all set!

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo.

1. Download

Nulla vitae elit libero elit non porta eget.

2. Set Profile

Nulla vitae elit libero elit non porta eget.

3. Start

Nulla vitae elit libero elit non porta eget.

View example's code

<section class="wrapper bg-light">
  <div class="container pt-9 pt-lg-11 pb-14 pb-lg-6">
    <div class="row gx-lg-8 gx-xl-10 align-items-center">
      <div class="col-lg-6">
        <figure><img src="./assets/img/photos/device.png" srcset="./assets/img/photos/device@2x.png 2x" alt="" /></figure>
      </div>
      <!-- /column -->
      <div class="col-lg-6">
        <h2 class="fs-15 text-uppercase text-muted mb-3">How It Works</h2>
        <h3 class="display-4 mb-5">Download the app, create your profile and voilà, you're all set!</h3>
        <p class="mb-8">Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo.</p>
        <div class="row gy-6 gx-xxl-8 process-wrapper">
          <div class="col-md-4"> <img src="./assets/img/icons/lineal/cloud-computing.svg" class="svg-inject icon-svg icon-svg-sm text-green mb-3" alt="" />
            <h4 class="mb-1">1. Download</h4>
            <p class="mb-0">Nulla vitae elit libero elit non porta eget.</p>
          </div>
          <!--/column -->
          <div class="col-md-4"> <img src="./assets/img/icons/lineal/smartphone-2.svg" class="svg-inject icon-svg icon-svg-sm text-red mb-3" alt="" />
            <h4 class="mb-1">2. Set Profile</h4>
            <p class="mb-0">Nulla vitae elit libero elit non porta eget.</p>
          </div>
          <!--/column -->
          <div class="col-md-4"> <img src="./assets/img/icons/lineal/rocket.svg" class="svg-inject icon-svg icon-svg-sm text-aqua mb-3" alt="" />
            <h4 class="mb-1">3. Start</h4>
            <p class="mb-0">Nulla vitae elit libero elit non porta eget.</p>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Our Process

Find out everything you need to know about creating a business process model

1. Concept

Nulla vitae elit libero elit non porta gravida eget metus cras.

2. Prepare

Nulla vitae elit libero elit non porta gravida eget metus cras.

3. Retouch

Nulla vitae elit libero elit non porta gravida eget metus cras.

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row text-center">
      <div class="col-lg-10 mx-auto">
        <div class="position-relative">
          <div class="shape bg-dot red rellax w-16 h-18" data-rellax-speed="1" style="top: 1rem; left: -3.9rem;"></div>
          <div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"></div>
          <video poster="./assets/img/photos/movie.jpg" class="player" playsinline controls preload="none">
            <source src="./assets/media/movie.mp4" type="video/mp4">
            <source src="./assets/media/movie.webm" type="video/webm">
          </video>
        </div>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="row text-center">
      <div class="col-lg-9 mx-auto">
        <h2 class="fs-15 text-uppercase text-muted mb-3 mt-12">Our Process</h2>
        <h3 class="display-4 mb-0 text-center px-xl-10 px-xxl-15">Find out everything you need to know about creating a business process model</h3>
        <div class="row gx-lg-8 gx-xl-12 process-wrapper text-center mt-10">
          <div class="col-md-4"> <img src="./assets/img/icons/lineal/light-bulb.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" />
            <h4 class="mb-1">1. Concept</h4>
            <p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras.</p>
          </div>
          <!--/column -->
          <div class="col-md-4"> <img src="./assets/img/icons/lineal/settings-3.svg" class="svg-inject icon-svg icon-svg-md text-red mb-3" alt="" />
            <h4 class="mb-1">2. Prepare</h4>
            <p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras.</p>
          </div>
          <!--/column -->
          <div class="col-md-4"> <img src="./assets/img/icons/lineal/design.svg" class="svg-inject icon-svg icon-svg-md text-leaf mb-3" alt="" />
            <h4 class="mb-1">3. Retouch</h4>
            <p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras.</p>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Here are 3 working steps to organize our business projects.

Collect Ideas

Nulla vitae elit libero pharetra augue dapibus.

Data Analysis

Vivamus sagittis lacus vel augue laoreet.

Finalize Product

Cras mattis consectetur purus sit amet.

How It Works?

Find out everything you need to know and more about how we create our business process models.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis.

Learn More

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row mb-5">
      <div class="col-md-10 col-xl-8 col-xxl-7 mx-auto text-center">
        <img src="./assets/img/icons/lineal/list.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-4 px-lg-14">Here are 3 working steps to organize our business projects.</h2>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="row gx-md-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-6 order-lg-2">
        <div class="card me-lg-6">
          <div class="card-body p-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-lg btn-soft-primary disabled me-4"><span class="number">01</span></span>
              </div>
              <div>
                <h4 class="mb-1">Collect Ideas</h4>
                <p class="mb-0">Nulla vitae elit libero pharetra augue dapibus.</p>
              </div>
            </div>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
        <div class="card ms-lg-13 mt-6">
          <div class="card-body p-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-lg btn-soft-primary disabled me-4"><span class="number">02</span></span>
              </div>
              <div>
                <h4 class="mb-1">Data Analysis</h4>
                <p class="mb-0">Vivamus sagittis lacus vel augue laoreet.</p>
              </div>
            </div>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
        <div class="card mx-lg-6 mt-6">
          <div class="card-body p-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-lg btn-soft-primary disabled me-4"><span class="number">03</span></span>
              </div>
              <div>
                <h4 class="mb-1">Finalize Product</h4>
                <p class="mb-0">Cras mattis consectetur purus sit amet.</p>
              </div>
            </div>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <h2 class="display-6 mb-3">How It Works?</h2>
        <p class="lead fs-lg pe-lg-5">Find out everything you need to know and more about how we create our business process models.</p>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare.</p>
        <p class="mb-6">Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis.</p>
        <a href="#" class="btn btn-primary rounded-pill mb-0">Learn More</a>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

How It Works?

Everything you need on creating a business process.

Collect Ideas

Nulla vitae elit libero pharetra augue dapibus.

Data Analysis

Vivamus sagittis lacus augue laoreet vel.

Magic Touch

Cras mattis consectetur purus sit amet.

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-7">
        <figure><img class="w-auto" src="./assets/img/illustrations/i3.png" srcset="./assets/img/illustrations/i3@2x.png 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h2 class="fs-15 text-uppercase text-line text-primary mb-3">How It Works?</h2>
        <h3 class="display-5 mb-7 pe-xxl-5">Everything you need on creating a business process.</h3>
        <div class="d-flex flex-row mb-4">
          <div>
            <img src="./assets/img/icons/lineal/light-bulb.svg" class="svg-inject icon-svg icon-svg-sm text-primary me-4" alt="" />
          </div>
          <div>
            <h4 class="mb-1">Collect Ideas</h4>
            <p class="mb-1">Nulla vitae elit libero pharetra augue dapibus.</p>
          </div>
        </div>
        <div class="d-flex flex-row mb-4">
          <div>
            <img src="./assets/img/icons/lineal/pie-chart-2.svg" class="svg-inject icon-svg icon-svg-sm text-green me-4" alt="" />
          </div>
          <div>
            <h4 class="mb-1">Data Analysis</h4>
            <p class="mb-1">Vivamus sagittis lacus augue laoreet vel.</p>
          </div>
        </div>
        <div class="d-flex flex-row">
          <div>
            <img src="./assets/img/icons/lineal/design.svg" class="svg-inject icon-svg icon-svg-sm text-yellow me-4" alt="" />
          </div>
          <div>
            <h4 class="mb-1">Magic Touch</h4>
            <p class="mb-0">Cras mattis consectetur purus sit amet.</p>
          </div>
        </div>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Usage

Styleguide

Elements

Blocks - Process

Filter Blocks:

How It Works?

Collect Ideas

Data Analysis

Finalize Product

How We Do It?

Concept

Prepare

Retouch

Finalize

How It Works

Download the app, create your profile and voilà, you're all set!

1. Download

2. Set Profile

3. Start

Our Process

Find out everything you need to know about creating a business process model

1. Concept

2. Prepare

3. Retouch

Here are 3 working steps to organize our business projects.

Collect Ideas

Data Analysis

Finalize Product

How It Works?

How It Works?

Everything you need on creating a business process.

Collect Ideas

Data Analysis

Magic Touch

Think unique and be creative. Make a difference with Fhenix Africa.