Blocks - About

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

Filter Blocks:

Who Are We?

We are a digital and branding company that believes in the power of creative strategy and along with great design.

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.

Our Mission

Dapibus eu leo quam ornare curabitur blandit tempus.

Our Values

Aenean lacinia bibendum nulla sed consectetur.

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-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
        <div class="shape bg-soft-primary rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></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-6">
        <h2 class="display-4 mb-3">Who Are We?</h2>
        <p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
        <p class="mb-6">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.</p>
        <div class="row gx-xl-10 gy-6">
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/target.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Our Mission</h4>
                <p class="mb-0">Dapibus eu leo quam ornare curabitur blandit tempus.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/award-2.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Our Values</h4>
                <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.</p>
              </div>
            </div>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

20+

Year Experience

We are a creative company that focuses on establishing long-term relationships with customers.

Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.

7518

Completed Projects

3472

Satisfied Customers

2184

Expert Employees

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-12 align-items-center">
      <div class="col-lg-6 position-relative">
        <div class="btn btn-circle btn-primary disabled position-absolute counter-wrapper flex-column d-none d-md-flex" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;">
          <h3 class="text-white mb-1 mt-n2"><span class="counter counter-lg">20+</span></h3>
          <p>Year Experience</p>
        </div>
        <div class="row gx-md-5 gy-5 align-items-center">
          <div class="col-md-6">
            <div class="row gx-md-5 gy-5">
              <div class="col-md-10 offset-md-2">
                <figure class="rounded"><img src="./assets/img/photos/ab1.jpg" srcset="./assets/img/photos/ab1@2x.jpg 2x" alt=""></figure>
              </div>
              <!--/column -->
              <div class="col-md-12">
                <figure class="rounded"><img src="./assets/img/photos/ab2.jpg" srcset="./assets/img/photos/ab2@2x.jpg 2x" alt=""></figure>
              </div>
              <!--/column -->
            </div>
            <!--/.row -->
          </div>
          <!--/column -->
          <div class="col-md-6">
            <figure class="rounded"><img src="./assets/img/photos/ab3.jpg" srcset="./assets/img/photos/ab3@2x.jpg 2x" alt=""></figure>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <img src="./assets/img/icons/handshake.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h3 class="display-5 mb-5">We are a creative company that focuses on establishing long-term relationships with customers.</h3>
        <p class="mb-7">Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.</p>
        <div class="row counter-wrapper gy-6">
          <div class="col-md-4">
            <h3 class="counter text-primary">7518</h3>
            <p>Completed Projects</p>
          </div>
          <!--/column -->
          <div class="col-md-4">
            <h3 class="counter text-primary">3472</h3>
            <p>Satisfied Customers</p>
          </div>
          <!--/column -->
          <div class="col-md-4">
            <h3 class="counter text-primary">2184</h3>
            <p>Expert Employees</p>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

7518

Completed Projects

3472

Satisfied Customers

2184

Expert Employees

4523

Awards Won

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 pt-md-16 pb-md-9">
    <figure class="rounded"><img src="./assets/img/photos/about5.jpg" srcset="./assets/img/photos/about5@2x.jpg 2x" alt="" /></figure>
    <div class="row">
      <div class="col-xl-10 mx-auto">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top" data-image-src="./assets/img/photos/bg3.jpg">
          <div class="card-body p-9 p-xl-10">
            <div class="row align-items-center counter-wrapper gy-4 text-center">
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">7518</h3>
                <p>Completed Projects</p>
              </div>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">3472</h3>
                <p>Satisfied Customers</p>
              </div>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">2184</h3>
                <p>Expert Employees</p>
              </div>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">4523</h3>
                <p>Awards Won</p>
              </div>
              <!--/column -->
            </div>
            <!--/.row -->
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Who Are We?

We are a digital and branding company that believes in the power of creative strategy and along with great design.

Aenean eu leo quam ornare curabitur blandit tempus.
Nullam quis risus eget urna mollis ornare donec elit.

Etiam porta sem malesuada magna mollis euismod.
Fermentum massa vivamus faucibus amet euismod.

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-6 position-relative order-lg-2">
        <div class="shape bg-dot primary rellax w-16 h-20" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
        <div class="overlap-grid overlap-grid-2">
          <div class="item">
            <figure class="rounded shadow"><img src="./assets/img/photos/about2.jpg" srcset="./assets/img/photos/about2@2x.jpg 2x" alt=""></figure>
          </div>
          <div class="item">
            <figure class="rounded shadow"><img src="./assets/img/photos/about3.jpg" srcset="./assets/img/photos/about3@2x.jpg 2x" alt=""></figure>
          </div>
        </div>
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <img src="./assets/img/icons/megaphone.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3">Who Are We?</h2>
        <p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
        <p class="mb-6">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.</p>
        <div class="row gy-3 gx-xl-8">
          <div class="col-xl-6">
            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
              <li><span><i class="uil uil-check"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
              <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
            </ul>
          </div>
          <!--/column -->
          <div class="col-xl-6">
            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
              <li><span><i class="uil uil-check"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
              <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
            </ul>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Why Choose Us?

A few reasons why our valued customers choose us.

Professional Design

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.

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 order-lg-2">
        <figure><img class="w-auto" src="./assets/img/concept/concept2.png" srcset="./assets/img/concept/concept2@2x.png 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h2 class="fs-15 text-uppercase text-line text-primary mb-3">Why Choose Us?</h2>
        <h3 class="display-5 mb-7">A few reasons why our valued customers choose us.</h3>
        <div class="accordion accordion-wrapper" id="accordionExample">
          <div class="card plain accordion-item">
            <div class="card-header" id="headingOne">
              <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
            </div>
            <!--/.card-header -->
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div class="card-body">
                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.accordion-collapse -->
          </div>
          <!--/.accordion-item -->
          <div class="card plain accordion-item">
            <div class="card-header" id="headingTwo">
              <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
            </div>
            <!--/.card-header -->
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="card-body">
                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.accordion-collapse -->
          </div>
          <!--/.accordion-item -->
          <div class="card plain accordion-item">
            <div class="card-header" id="headingThree">
              <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
            </div>
            <!--/.card-header -->
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div class="card-body">
                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.accordion-collapse -->
          </div>
          <!--/.accordion-item -->
        </div>
        <!--/.accordion -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

We bring rapid solutions to make the life of our customers easier.

Marketing
Strategy
Development
Data Analysis

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/concept/concept8.png" srcset="./assets/img/concept/concept8@2x.png 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h3 class="display-4 mb-6 pe-xxl-6">We bring rapid solutions to make the life of our customers easier.</h3>
        <ul class="progress-list mt-3">
          <li>
            <p>Marketing</p>
            <div class="progressbar line blue" data-value="100"></div>
          </li>
          <li>
            <p>Strategy</p>
            <div class="progressbar line yellow" data-value="80"></div>
          </li>
          <li>
            <p>Development</p>
            <div class="progressbar line orange" data-value="85"></div>
          </li>
          <li>
            <p>Data Analysis</p>
            <div class="progressbar line green" data-value="90"></div>
          </li>
        </ul>
        <!-- /.progress-list -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

STULO Brings Awesomeness

We have considered our solutions to support every stage of your growth.

Marketing
Strategy
Development

View example's code

<section class="wrapper bg-light">
  <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 light-gallery-wrapper">
        <a href="https://vimeo.com/374265101" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 lightbox position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;"><i class="icn-caret-right"></i></a>
        <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/about12.jpg" srcset="./assets/img/photos/about12@2x.jpg 2x" alt=""></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5 col-xl-4 offset-lg-1">
        <h3 class="display-4 mb-3">STULO Brings Awesomeness</h3>
        <p class="lead fs-lg mb-6">We have considered our solutions to <span class="underline">support every stage</span> of your growth.</p>
        <ul class="progress-list">
          <li>
            <p>Marketing</p>
            <div class="progressbar line primary" data-value="100"></div>
          </li>
          <li>
            <p>Strategy</p>
            <div class="progressbar line primary" data-value="80"></div>
          </li>
          <li>
            <p>Development</p>
            <div class="progressbar line primary" data-value="85"></div>
          </li>
          <li>
        </ul>
        <!-- /.progress-list -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Usage

Styleguide

Elements

Blocks - About

Filter Blocks:

Who Are We?

Our Mission

Our Values

20+

We are a creative company that focuses on establishing long-term relationships with customers.

7518

3472

2184

7518

3472

2184

4523

Who Are We?

Why Choose Us?

A few reasons why our valued customers choose us.

We bring rapid solutions to make the life of our customers easier.

STULO Brings Awesomeness

Think unique and be creative. Make a difference with STULO.