Process Sections
Process Sections style 1
-
1
Rational Brand
Create attribute in a brand that serves to make a brand a consumer choice.
-
2
Emotional Brand
Create attributes in a brand that serve to create bonds emotions with customers.
-
3
Visual Identity
Create attributes that can be recognized and have a characteristic in the eyes of consumers.
-
4
Rational Brand
Create attribute in a brand that serves to make a brand a consumer choice.
-
5
Emotional Brand
Create attributes in a brand that serve to create bonds emotions with customers.
-
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 pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj 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 start-1/3 top-12 -bottom-8 border-s-2 border-dashed border-gray-200 dark:border-gray-700"></span>
<div class="w-12 h-12 me-auto ropjaksldnk p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<span class="text-primary-700 text-xl">
1
</span>
</div>
</div>
<div class="ms-4 mb-4 lg:ms-6">
<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 start-1/3 top-12 -bottom-8 border-s-2 border-dashed border-gray-200 dark:border-gray-700"></span>
<div class="w-12 h-12 me-auto ropjaksldnk p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<span class="text-primary-700 text-xl">
2
</span>
</div>
</div>
<div class="ms-4 mb-4 lg:ms-6">
<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 start-1/3 top-12 -bottom-8 border-s-2 border-dashed border-gray-200 dark:border-gray-700"></span>
<div class="w-12 h-12 me-auto ropjaksldnk p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<span class="text-primary-700 text-xl">
3
</span>
</div>
</div>
<div class="ms-4 mb-4 lg:ms-6">
<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 pyaieolaksj 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 start-1/3 top-12 -bottom-8 border-s-2 border-dashed border-gray-200 dark:border-gray-700"></span>
<div class="w-12 h-12 me-auto ropjaksldnk p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<span class="text-primary-700 text-xl">
4
</span>
</div>
</div>
<div class="ms-4 mb-4 lg:ms-6">
<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 start-1/3 top-12 -bottom-8 border-s-2 border-dashed border-gray-200 dark:border-gray-700"></span>
<div class="w-12 h-12 me-auto ropjaksldnk p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<span class="text-primary-700 text-xl">
5
</span>
</div>
</div>
<div class="ms-4 mb-4 lg:ms-6">
<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 start-1/3 top-12 -bottom-8 border-s-2 border-dashed border-gray-200 dark:border-gray-700"></span>
<div class="w-12 h-12 me-auto ropjaksldnk p-2 bg-gray-100 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<span class="text-primary-700 text-xl">
6
</span>
</div>
</div>
<div class="ms-4 mb-4 lg:ms-6">
<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
-
Address
-
Delivery
-
Payment
-
Review
<!-- 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 pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4 jkuthslatgh">
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-2/3">
<div class="relative">
<!-- process horizontal -->
<ul class="ps-0">
<li class="relative float-left text-center w-1/4 ">
<svg class="inline-block ropjaksldnk border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-primary-700 hover:text-gray-100 p-2 md:olhksnamska" 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 ropjaksldnk border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-primary-700 hover:text-gray-100 p-2 md:olhksnamska" 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 ropjaksldnk border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-primary-700 hover:text-gray-100 p-2 md:olhksnamska" 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 ropjaksldnk border bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-primary-700 hover:text-gray-100 p-2 md:olhksnamska" 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 -->