title

Process Sections


Process Sections style 1
  1. 1

    Rational Brand

    Create attribute in a brand that serves to make a brand a consumer choice.

  2. 2

    Emotional Brand

    Create attributes in a brand that serve to create bonds emotions with customers.

  3. 3

    Visual Identity

    Create attributes that can be recognized and have a characteristic in the eyes of consumers.

  1. 4

    Rational Brand

    Create attribute in a brand that serves to make a brand a consumer choice.

  2. 5

    Emotional Brand

    Create attributes in a brand that serve to create bonds emotions with customers.

  3. 6

    Visual Identity

    Create attributes that can be recognized and have a characteristic in the eyes of consumers.

                  
                    <!-- Process start -->
                    <div id="process" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
                      <div id="progress-line" class="container xl:max-w-6xl mx-auto px-4">
                        <div class="flex flex-wrap flex-row -mx-4">
                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/2">
                            <!-- processs vertical -->
                            <ol>
                              <li class="flex wow fadeInUp" data-wow-duration="1s">
                                <div class="relative flex-shrink-0 w-16 text-center">
                                  <span class="absolute left-1/3 top-12 -bottom-8 border-l-2 border-dashed border-gray-200 dark:border-gray-700"></span>
                                  <div class="w-12 h-12 mr-auto rounded-full p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
                                    <span class="text-blue-700 text-xl">
                                      1
                                    </span>
                                  </div>
                                </div>

                                <div class="ltr:ml-4 mb-4 lg:ltr:ml-6 rtl:mr-4 lg:rtl:ml-4">
                                  <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Rational Brand</h3>
                                  <p class="text-gray-500">Create attribute in a brand that serves to make a brand a consumer choice.</p>
                                </div>
                              </li>

                              <li class="flex wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
                                <div class="relative flex-shrink-0 w-16 text-center">
                                  <span class="absolute left-1/3 top-12 -bottom-8 border-l-2 border-dashed border-gray-200 dark:border-gray-700"></span>
                                  <div class="w-12 h-12 mr-auto rounded-full p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
                                    <span class="text-blue-700 text-xl">
                                      2
                                    </span>
                                  </div>
                                </div>

                                <div class="ltr:ml-4 mb-4 lg:ltr:ml-6 rtl:mr-4 lg:rtl:ml-4">
                                  <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Emotional Brand</h3>
                                  <p class="text-gray-500">Create attributes in a brand that serve to create bonds emotions with customers.</p>
                                </div>
                              </li>

                              <li class="flex wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
                                <div class="relative flex-shrink-0 w-16 text-center">
                                  <span class="absolute left-1/3 top-12 -bottom-8 border-l-2 border-dashed border-gray-200 dark:border-gray-700"></span>
                                  <div class="w-12 h-12 mr-auto rounded-full p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
                                    <span class="text-blue-700 text-xl">
                                      3
                                    </span>
                                  </div>
                                </div>

                                <div class="ltr:ml-4 mb-4 lg:ltr:ml-6 rtl:mr-4 lg:rtl:ml-4">
                                  <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Visual Identity</h3>
                                  <p class="text-gray-500">Create attributes that can be recognized and have a characteristic in the eyes of consumers.</p>
                                </div>
                              </li>
                            </ol><!-- end processs vertical -->
                          </div>

                          <div class="flex-shrink max-w-full px-4 w-full lg:w-1/2">
                            <!-- processs vertical -->
                            <ol>
                              <li class="flex wow fadeInUp" data-wow-duration="1s">
                                <div class="relative flex-shrink-0 w-16 text-center">
                                  <span class="absolute left-1/3 top-12 -bottom-8 border-l-2 border-dashed border-gray-200 dark:border-gray-700"></span>
                                  <div class="w-12 h-12 mr-auto rounded-full p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
                                    <span class="text-blue-700 text-xl">
                                      4
                                    </span>
                                  </div>
                                </div>

                                <div class="ltr:ml-4 mb-4 lg:ltr:ml-6 rtl:mr-4 lg:rtl:ml-4">
                                  <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Rational Brand</h3>
                                  <p class="text-gray-500">Create attribute in a brand that serves to make a brand a consumer choice.</p>
                                </div>
                              </li>

                              <li class="flex wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
                                <div class="relative flex-shrink-0 w-16 text-center">
                                  <span class="absolute left-1/3 top-12 -bottom-8 border-l-2 border-dashed border-gray-200 dark:border-gray-700"></span>
                                  <div class="w-12 h-12 mr-auto rounded-full p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
                                    <span class="text-blue-700 text-xl">
                                      5
                                    </span>
                                  </div>
                                </div>

                                <div class="ltr:ml-4 mb-4 lg:ltr:ml-6 rtl:mr-4 lg:rtl:ml-4">
                                  <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Emotional Brand</h3>
                                  <p class="text-gray-500">Create attributes in a brand that serve to create bonds emotions with customers.</p>
                                </div>
                              </li>

                              <li class="flex wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
                                <div class="relative flex-shrink-0 w-16 text-center">
                                  <span class="absolute left-1/3 top-12 -bottom-8 border-l-2 border-dashed border-gray-200 dark:border-gray-700"></span>
                                  <div class="w-12 h-12 mr-auto rounded-full p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
                                    <span class="text-blue-700 text-xl">
                                      6
                                    </span>
                                  </div>
                                </div>

                                <div class="ltr:ml-4 mb-4 lg:ltr:ml-6 rtl:mr-4 lg:rtl:ml-4">
                                  <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Visual Identity</h3>
                                  <p class="text-gray-500">Create attributes that can be recognized and have a characteristic in the eyes of consumers.</p>
                                </div>
                              </li>
                            </ol><!-- end processs vertical -->
                          </div>
                        </div>
                      </div>
                    </div><!-- End process -->
                  
                
Process Sections style 2
                  
                    <!-- Process start -->
                      <div id="process" class="relative py-20 md:py-24 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
                        <div id="progress-line" class="container xl:max-w-6xl mx-auto px-4">
                          <div class="flex flex-wrap flex-row -mx-4 justify-center">
                            <div class="flex-shrink max-w-full px-4 w-full lg:w-2/3">
                              <div class="relative">
                                <!-- process horizontal -->
                                <ul class="pl-0">
                                  <li class="relative float-left text-center w-1/4 ">
                                    <svg class="inline-block rounded-full border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-blue-700 hover:text-gray-100 p-2 md:p-4" xmlns="http://www.w3.org/2000/svg" width="4rem" height="4rem" fill="currentColor" viewBox="0 0 512 512"><path d="M256,48c-79.5,0-144,61.39-144,137,0,87,96,224.87,131.25,272.49a15.77,15.77,0,0,0,25.5,0C304,409.89,400,272.07,400,185,400,109.39,335.5,48,256,48Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="192" r="48" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

                                    <p class="hidden md:block mt-4">Address</p>
                                  </li>
                                  <li class="relative float-left text-center w-1/4 ">
                                    <svg class="inline-block rounded-full border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-blue-700 hover:text-gray-100 p-2 md:p-4" xmlns="http://www.w3.org/2000/svg" width="4rem" height="4rem" fill="currentColor" viewBox="0 0 512 512"><path d="M80,224l37.78-88.15C123.93,121.5,139.6,112,157.11,112H354.89c17.51,0,33.18,9.5,39.33,23.85L432,224" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="80" y="224" width="352" height="144" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="112 368 112 400 80 400 80 368" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="432 368 432 400 400 400 400 368" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="144" cy="288" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="368" cy="288" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

                                      <p class="hidden md:block mt-4">Delivery</p>
                                  </li>
                                  <li class="relative float-left text-center w-1/4 ">
                                    <svg class="inline-block rounded-full border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-blue-700 hover:text-gray-100 p-2 md:p-4" xmlns="http://www.w3.org/2000/svg" width="4rem" height="4rem" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="56" ry="56" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="48" y1="192" x2="464" y2="192" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:60px"/><rect x="128" y="300" width="48" height="20" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:60px"/></svg>

                                    <p class="hidden md:block mt-4">Payment</p>
                                  </li>
                                  <li class="relative float-left text-center w-1/4 ">
                                    <svg class="inline-block rounded-full border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-blue-700 hover:text-gray-100 p-2 md:p-4" xmlns="http://www.w3.org/2000/svg" width="4rem" height="4rem" fill="currentColor" viewBox="0 0 512 512"><path d="M68.4,192A20.38,20.38,0,0,0,48,212.2a17.87,17.87,0,0,0,.8,5.5L100.5,400a40.46,40.46,0,0,0,39.1,29.5H372.4A40.88,40.88,0,0,0,411.7,400l51.7-182.3.6-5.5A20.38,20.38,0,0,0,443.6,192H68.4ZM261.72,352.07A42.07,42.07,0,1,1,304,310,42.27,42.27,0,0,1,261.72,352.07Z" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:32px"/><polyline points="160 192 256 64 352 192" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:32px"/></svg>

                                    <p class="hidden md:block mt-4">Review</p>
                                  </li>
                                </ul><!-- end processs horizontal -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div><!-- End process -->