Timeline UI design
Explore timeline UI design ideas to create visually engaging and interactive timelines for your website or app. Enhance user experience with modern layouts and seamless navigation.
Preview
Work experience
2023 – Present
Web Designer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ea consectetur.
- Timeline section design.
- Converted UIs into responsive HTML and CSS with a mobile-first approach.
- Created custom illustrations and item description banners.
2021 – 2023
Senior Software Engineer at Fullview
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur possimus sed porro eveniet placeat, necessitatibus accusantium, quidem, doloremque iusto rem dolorum voluptate ex tempore quia expedita laborum suscipit quisquam sint.
2011 – 2021
Junior Software Engineer at LinkedIn
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio architecto non quae vitae unde explicabo aliquid sequi dolores cupiditate iusto blanditiis labore sed, doloribus delectus fuga asperiores laudantium ducimus mollitia.
2010 – 2011
Freelance Graphic Designer
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis impedit commodi ad unde blanditiis eum minima qui
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ullam
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque voluptatibus dicta veniam. Molestias minus fugit laboriosam quod ipsum excepturi est ex delectus, fugiat, laborum a! Deleniti debitis quis veniam alias!
Show Code
<div class="max-w-7xl mx-auto px-4 py-10">
<h2 class="mb-5 font-medium uppercase text-3xl">
Work experience
</h2>
<div>
<div class="group relative flex gap-x-5">
<div class="relative group-last:after:hidden after:absolute after:top-12 after:bottom-2 after:start-6 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
<div class="relative z-10 size-12 flex justify-center items-center">
<svg class="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-gray-500" viewBox="0 0 512 149" xmlns="http://www.w3.org/2000/svg">
<path
d="M.06 27.679h17.852v39.662h37.651V27.679h17.875v97.358H55.563V84.542H17.912v40.495H.06V27.679zM129.993 93.326c0 8.15-6.64 14.782-14.788 14.782-8.151 0-14.787-6.632-14.787-14.782V51.41h-16.93v41.916c0 17.487 14.229 31.711 31.717 31.711 17.484 0 31.712-14.224 31.712-31.711V51.41h-16.924v41.916M194.179 51.901c-8.398 0-14.26 2.437-19.921 7.994V27.679h-16.985v59.705c0 22.348 16.158 37.653 34.311 37.653 20.181 0 37.863-15.578 37.863-36.567 0-20.723-16.305-36.569-35.268-36.569zm.422 57.423c-11.509 0-20.31-9.612-20.31-20.854 0-11.244 8.801-20.859 20.31-20.859 9.752 0 18.558 9.615 18.558 20.859 0 11.242-8.806 20.854-18.558 20.854zM257.974 56.18c0-8.538 5.689-11.245 11.917-11.245 5.014 0 11.649 3.792 15.979 8.398l11.103-13.001c-5.549-7.448-16.788-12.596-25.998-12.596-18.421 0-31.694 10.7-31.694 28.444 0 32.91 40.497 22.478 40.497 40.902 0 5.682-5.551 10.698-11.913 10.698-10.026 0-13.278-4.876-17.881-10.024l-12.327 12.729c7.86 9.617 17.608 14.495 29.257 14.495 17.47 0 31.556-10.835 31.556-27.767 0-36.566-40.496-25.188-40.496-41.033M343.184 50.947c-18.151 0-34.311 15.296-34.311 37.649v59.859h16.984v-32.369c5.662 5.553 11.521 7.994 19.922 7.994 18.962 0 35.269-15.844 35.269-36.567 0-20.992-17.687-36.566-37.864-36.566zm3.018 57.425c-11.508 0-20.31-9.625-20.31-20.859 0-11.244 8.802-20.859 20.31-20.859 9.75 0 18.557 9.615 18.557 20.859 0 11.234-8.807 20.859-18.557 20.859zM506.069 109.324c-10.018 0-12.862-4.332-12.862-10.971V68.965h15.572V54.069h-15.572v-19.64l-17.195 7.718v59.863c0 15.306 10.56 23.027 25.045 23.027 2.167 0 5.15-.14 6.777-.541l4.199-15.438c-1.896.131-4.062.266-5.964.266"
fill="currentColor"
></path>
<path
d="M461.278 69.831c-3.256-5.602-7.836-10.093-13.562-13.474-4.279-2.491-8.716-4.072-13.716-4.751v-17.8c5-2.123 8.103-6.822 8.103-12.304 0-7.472-5.992-13.527-13.458-13.527-7.472 0-13.569 6.055-13.569 13.527 0 5.482 2.924 10.181 7.924 12.304v17.808c-4 .578-8.148 1.825-11.936 3.741-7.737-5.876-33.107-25.153-47.948-36.412.352-1.269.623-2.577.623-3.957 0-8.276-6.702-14.984-14.981-14.984S333.78 6.71 333.78 14.986c0 8.275 6.706 14.985 14.985 14.985 2.824 0 5.436-.826 7.69-2.184l3.132 2.376 43.036 31.008c-2.275 2.089-4.394 4.465-6.089 7.131C393.099 73.737 391 79.717 391 86.24v1.361c0 4.579.87 8.902 2.352 12.963 1.305 3.546 3.213 6.77 5.576 9.685l-14.283 14.318a11.501 11.501 0 0 0-12.166 2.668 11.499 11.499 0 0 0-3.388 8.19c.001 3.093 1.206 6 3.394 8.187a11.5 11.5 0 0 0 8.188 3.394 11.51 11.51 0 0 0 8.191-3.394 11.514 11.514 0 0 0 3.39-8.187c0-1.197-.185-2.365-.533-3.475l14.763-14.765c2.024 1.398 4.21 2.575 6.56 3.59 4.635 2.004 9.751 3.225 15.35 3.225h1.026c6.19 0 12.029-1.454 17.518-4.428 5.784-3.143 10.311-7.441 13.731-12.928 3.438-5.502 5.331-11.581 5.331-18.269v-.334c0-6.579-1.523-12.649-4.722-18.21zm-18.038 30.973c-4.007 4.453-8.613 7.196-13.82 7.196h-.858c-2.974 0-5.883-.822-8.731-2.317-3.21-1.646-5.65-3.994-7.647-6.967-2.064-2.918-3.184-6.104-3.184-9.482v-1.026c0-3.321.637-6.47 2.243-9.444 1.717-3.251 4.036-5.779 7.12-7.789 3.028-1.996 6.262-2.975 9.864-2.975h.335c3.266 0 6.358.644 9.276 2.137 2.973 1.592 5.402 3.767 7.285 6.628 1.829 2.862 2.917 5.949 3.267 9.312.055.699.083 1.415.083 2.099 0 4.564-1.744 8.791-5.233 12.628z"
fill="currentColor"
></path>
</svg>
</div>
</div>
<div class="grow pb-8 group-last:pb-0">
<h3 class="mb-1 text-xs text-gray-700">
2023 - Present
</h3>
<p class="font-semibold text-sm text-gray-800">
Web Designer
</p>
<p class="mt-1 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ea consectetur.
</p>
<ul class="list-disc ms-6 mt-3 space-y-1.5">
<li class="ps-1 text-sm text-gray-700">
Timeline section design.
</li>
<li class="ps-1 text-sm text-gray-700">
Converted UIs into responsive HTML and CSS with a mobile-first approach.
</li>
<li class="ps-1 text-sm text-gray-700">
Created custom illustrations and item description banners.
</li>
</ul>
</div>
</div>
<div class="group relative flex gap-x-5">
<div class="relative group-last:after:hidden after:absolute after:top-12 after:bottom-2 after:start-6 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
<div class="relative z-10 size-12 flex justify-center items-center">
<svg class="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-gray-500" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 33">
<path d="M9.3 16.5C9.3 9 14.3 2.7 21.2.7a16.5 16.5 0 1 0 0 31.6c-6.9-2-11.9-8.3-11.9-15.8Z" fill="currentColor"></path>
<path d="M21.7 10c4 0 7.4 2.8 8.5 6.4a8.9 8.9 0 1 0-17 0c1-3.6 4.4-6.3 8.5-6.3Z" fill="currentColor"></path>
<path d="M24.8 19.4c0 3-2 5.5-4.8 6.3A6.6 6.6 0 1 0 20 13c2.8.8 4.8 3.4 4.8 6.4Z" fill="currentColor"></path>
<path
d="M39.6 13.5A4.4 4.4 0 0 1 44 9.1h1.3v2.7l-1 .2-1 .6-.2.4-.1.5h2.3v3H43v9.2h-3.4v-9.3h-1.3v-2.9h1.3ZM55.7 13.5h3.4v6.1a6.9 6.9 0 0 1-1.7 4.6 6 6 0 0 1-4.5 1.8c-1 0-1.8-.1-2.5-.5a6 6 0 0 1-3.2-3.4c-.3-.8-.4-1.6-.4-2.5v-6H50v6c0 .5 0 1 .2 1.3l.5 1c.2.4.5.6.9.8.3.2.8.3 1.2.3a2.6 2.6 0 0 0 2.1-1c.3-.3.4-.7.5-1l.2-1.4v-6ZM61.2 25.7V9.5h3.4v16.2h-3.4ZM66.9 25.7V9.5h3.3v16.2H67ZM78.5 21.2l3.3-7.7h3.7l-5.7 12.2h-2.7l-5.6-12.2H75l3.4 7.7ZM87 13.5h3.3v12.2H87V13.5Zm1.6-5 .8.1.6.4.4.7.2.7a1.9 1.9 0 0 1-.6 1.4l-.6.4a2 2 0 0 1-.8.1c-.5 0-1-.2-1.3-.5a2 2 0 0 1-.4-2.1c0-.3.2-.5.4-.7l.6-.4.7-.1ZM98.8 13.2a6.7 6.7 0 0 1 4.8 1.9 6.3 6.3 0 0 1 1.9 5.7h-9.8a3.3 3.3 0 0 0 3.2 2.2c.5 0 1-.1 1.4-.4.5-.2.9-.5 1.2-1h3.7c-.2.7-.5 1.3-1 1.8a6.1 6.1 0 0 1-3.3 2.3 7 7 0 0 1-6.9-1.6 6.1 6.1 0 0 1-2-4.5 6.1 6.1 0 0 1 2-4.5c.7-.6 1.4-1 2.2-1.4.8-.3 1.7-.5 2.6-.5Zm3.2 5.2c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.3-.7-2-.7s-1.4.3-2 .7c-.5.4-.9.9-1.1 1.5h6.3ZM123 13.5h3.6l-5 12.2H119l-2.5-6.5-2.5 6.5h-2.7l-5-12.2h3.6l2.7 7 2.8-7h2.2l2.8 7 2.7-7Z"
fill="currentColor"
></path>
</svg>
</div>
</div>
<div class="grow pb-8 group-last:pb-0">
<h3 class="mb-1 text-xs text-gray-700">
2021 - 2023
</h3>
<p class="font-semibold text-sm text-gray-800">
Senior Software Engineer at Fullview
</p>
<p class="mt-1 font-normal text-sm text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur possimus sed porro eveniet placeat, necessitatibus accusantium, quidem, doloremque iusto rem dolorum voluptate ex tempore quia expedita laborum suscipit
quisquam sint.
</p>
</div>
</div>
<div class="group relative flex gap-x-5">
<div class="relative group-last:after:hidden after:absolute after:top-12 after:bottom-2 after:start-6 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
<div class="relative z-10 size-12 flex justify-center items-center">
<svg class="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-gray-500" viewBox="0 -8.881784197001252e-16 267.51517722360785 65.24679557585003" xmlns="http://www.w3.org/2000/svg" width="2500" height="610">
<path
d="M263.043 56.411a4.418 4.418 0 1 0 .085 0zm0 8.33a3.874 3.874 0 1 1 3.809-3.938v.065a3.791 3.791 0 0 1-3.708 3.871h-.1m-16.96-9.535h-9.6V40.17c0-3.585-.064-8.2-4.993-8.2-5 0-5.765 3.906-5.765 7.939v15.294h-9.6V24.287h9.216v4.225h.129a10.1 10.1 0 0 1 9.093-4.994c9.73 0 11.524 6.4 11.524 14.726zm-40.79-35.143a5.571 5.571 0 1 1 5.57-5.572 5.571 5.571 0 0 1-5.57 5.572m4.8 35.143h-9.61V24.287h9.61zM250.87.004h-55.21a4.728 4.728 0 0 0-4.781 4.67v55.439a4.731 4.731 0 0 0 4.781 4.675h55.21a4.741 4.741 0 0 0 4.8-4.675V4.67a4.738 4.738 0 0 0-4.8-4.67m-86.12 31.749c-4.8 0-7.68 3.205-7.68 7.875s2.879 7.878 7.68 7.878 7.687-3.2 7.687-7.878-2.881-7.875-7.687-7.875m16.525 23.437h-8.838v-4.1h-.131a12.071 12.071 0 0 1-9.544 4.868c-9.224 0-15.3-6.657-15.3-16.071 0-8.646 5.377-16.585 14.216-16.585 3.973 0 7.684 1.087 9.861 4.1h.126V9.577h9.609zm-46.139-19.048a5.756 5.756 0 0 0-5.894-5.89 6.406 6.406 0 0 0-6.784 5.89zm8.132 13.7a16.909 16.909 0 0 1-13.128 6.151c-9.6 0-17.286-6.408-17.286-16.331s7.685-16.328 17.286-16.328c8.973 0 14.6 6.4 14.6 16.328v3.01h-22.282a7.171 7.171 0 0 0 7.235 6.019 8.193 8.193 0 0 0 6.851-3.778zM47.834 24.279h9.219v4.225h.131a10.085 10.085 0 0 1 9.09-4.994c9.735 0 11.527 6.405 11.527 14.726V55.19h-9.6V40.159c0-3.588-.066-8.2-5-8.2-4.99 0-5.76 3.907-5.76 7.939v15.288h-9.6zM82.669 9.58h9.6v27.265l10.88-12.583h11.77l-12.6 14.313 12.335 16.63h-12.066L92.397 39.923h-.126v15.28h-9.6zM32.911 24.276h9.6v30.916h-9.6zm4.8-15.37a5.569 5.569 0 1 1-5.57 5.569 5.569 5.569 0 0 1 5.57-5.569M0 9.587h9.993v36.4h18.5v9.222H0zm263.744 51.522a1.2 1.2 0 0 0 1.21-1.269c0-.9-.543-1.33-1.657-1.33h-1.8v4.712h.677v-2.054h.832l.019.025 1.291 2.029h.724l-1.389-2.1zm-.783-.472h-.785v-1.593h.995c.514 0 1.1.084 1.1.757 0 .774-.593.836-1.314.836"
fill="currentColor"
></path>
</svg>
</div>
</div>
<div class="grow pb-8 group-last:pb-0">
<h3 class="mb-1 text-xs text-gray-700">
2011 - 2021
</h3>
<p class="font-semibold text-sm text-gray-800">
Junior Software Engineer at LinkedIn
</p>
<p class="mt-1 font-normal text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio architecto non quae vitae unde explicabo aliquid sequi dolores cupiditate iusto blanditiis labore sed, doloribus delectus fuga asperiores laudantium ducimus
mollitia.
</p>
</div>
</div>
<div class="group relative flex gap-x-5">
<div class="relative group-last:after:hidden after:absolute after:top-12 after:bottom-2 after:start-6 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
<div class="relative z-10 size-12 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M152,112a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,112Zm80-40V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56H80V48a24,24,0,0,1,24-24h48a24,24,0,0,1,24,24v8h40A16,16,0,0,1,232,72ZM96,56h64V48a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8Zm120,57.61V72H40v41.61A184,184,0,0,0,128,136,184,184,0,0,0,216,113.61Z"
></path>
</svg>
</div>
</div>
<div class="grow pb-8 group-last:pb-0">
<h3 class="mb-1 text-xs text-gray-700">
2010 - 2011
</h3>
<p class="font-semibold text-sm text-gray-800">
Freelance Graphic Designer
</p>
<ul class="list-disc ms-6 mt-3 space-y-1.5">
<li class="ps-1 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis impedit commodi ad unde blanditiis eum minima qui
</li>
<li class="ps-1 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ullam
</li>
<li class="ps-1 text-sm text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque voluptatibus dicta veniam. Molestias minus fugit laboriosam quod ipsum excepturi est ex delectus, fugiat, laborum a! Deleniti debitis quis veniam
alias!
</li>
</ul>
</div>
</div>
</div>
</div>Preview
Our work process
Launch your campaign and benefit from our expertise on designing and managing conversion centered Tailwind CSS html page.
Strategy
The generated injected humour, or non-characteristic words etc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Development
The generated injected humour, or non-characteristic words etc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Launch
The generated injected humour, or non-characteristic words etc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Show Code
<div class="mx-auto max-w-7xl px-4 sm:px-12 mb-24 lg:px-8 xl:px-16 py-12">
<div class="grid grid-cols-1 mb-24 text-center">
<h6 class="text-4xl font-medium mb-4">Our work process</h6>
<p class="text-gray-700 max-w-xl text-base mx-auto">Launch your campaign and benefit from our expertise on designing and managing conversion centered Tailwind CSS html page.</p>
</div>
<div class="grid grid-cols-1 mt-8">
<div class="timeline after:left-1 relative after:absolute after:top-0 after:border-dashed after:h-full after:w-[1px] after:border-l-2 after:m-auto sm:after:left-2/4 after:-translate-x-2/4">
<div class="timeline-item px-8 sm:px-0">
<div class="grid sm:grid-cols-2">
<div class="">
<div
class="flex justify-start md:justify-end before:absolute before:top-0 before:border-dashed before:border-2 before:rounded-full before:left-[-41.5px] sm:before:left-auto sm:before:right-[-41.5px] before:z-10 before:bg-white before:h-[1.75rem] before:w-[1.75rem] after:absolute after:top-[9px] after:h-[0.625rem] after:w-[0.625rem] after:bg-black after:left-[-33px] sm:after:left-auto sm:after:right-[-33px] after:z-20 after:rounded-full ltr:float-right rtl:float-left md:me-7 relative"
>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 808 419.92999">
<path
d="M631.15382,651.0314l-10.65869-82.60547-.0083-.12793a9.01032,9.01032,0,0,1,9-9h104a9.01031,9.01031,0,0,1,9,9L734.732,628.42545l-2.91211,22.606a9.01027,9.01027,0,0,1-8.99976,8.9336h-82.6665A9.01027,9.01027,0,0,1,631.15382,651.0314Zm102.333-89.7334h-104a7.008,7.008,0,0,0-6.99975,6.938l7.73852,59.93457,2.91968,22.66553.0083.12891a7.00787,7.00787,0,0,0,7,7h82.6665a7.00786,7.00786,0,0,0,7-7l10.66651-82.729A7.008,7.008,0,0,0,733.48683,561.298Z"
transform="translate(-196 -240.035)"
fill="#3f3d56"
/>
<ellipse cx="485.48683" cy="334.92983" rx="56" ry="9.33333" fill="#f2f2f2" />
<path
d="M676.639,570.76462a156.83421,156.83421,0,0,0,11.60918-59.77821,163.20966,163.20966,0,0,0-11.43838-59.87922,152.82531,152.82531,0,0,0-16.20866-30.32733c-.91229-1.32313,1.246-2.57025,2.15117-1.2574a158.73468,158.73468,0,0,1,24.3118,56.90072,165.82968,165.82968,0,0,1,1.45669,61.61466,154.19514,154.19514,0,0,1-9.4795,33.38907c-.60158,1.46228-3.01284.82178-2.4023-.66229Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M686.98054,479.76232c3.39736-3.68116,4.32373-8.80586,4.297-13.66126-.03176-5.76556-1.44909-11.41143-1.72047-17.16065-.24284-5.14466.5367-10.34793,3.54266-14.64836,2.58762-3.70194,6.66768-6.5514,11.35049-6.28895,9.98764.55976,14.63754,12.04739,16.079,20.43478a47.33923,47.33923,0,0,1-30.01452,52.65783c-1.49942.57177-2.148-1.83578-.66229-2.40231a44.89413,44.89413,0,0,0,28.72885-46.03766,36.4188,36.4188,0,0,0-3.70277-13.82555c-1.91689-3.62359-4.89717-7.22161-9.08293-8.14915-4.12262-.91355-7.98967,1.37334-10.37321,4.6279-3.005,4.10307-3.63144,9.06316-3.35354,14.02547.594,10.606,4.88766,23.289-3.32666,32.18952-1.08973,1.18076-2.8481-.58437-1.76162-1.76161Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M685.03864,525.3815c-8.44633-5.51148-9.28936-16.29209-10.35462-25.37127-.60315-5.14055-1.47664-10.604-4.63143-14.86685-2.59487-3.50629-6.9914-6.51856-11.547-5.70311-4.01557.71879-6.73052,4.035-8.20774,7.64a29.91172,29.91172,0,0,0-1.75068,13.09147A45.77712,45.77712,0,0,0,659.79628,527.527a48.84252,48.84252,0,0,0,11.43013,9.90762,36.22973,36.22973,0,0,0,14.44885,4.92456c1.57285.18606,1.59161,2.67957,0,2.4913a39.34687,39.34687,0,0,1-13.8805-4.23207,46.32543,46.32543,0,0,1-11.36156-8.72478,49.58052,49.58052,0,0,1-14.01175-27.983,38.16776,38.16776,0,0,1,.50206-14.51476c1.0644-4.14772,3.19068-8.30742,6.85983-10.71229a12.18329,12.18329,0,0,1,13.05915.179c4.47358,2.7232,7.293,7.25182,8.72179,12.19859,1.75352,6.07119,1.63057,12.46156,2.92443,18.61683,1.08628,5.1678,3.20956,10.55228,7.80734,13.55247,1.3376.87283.09057,3.03076-1.25741,2.15116Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M605.50394,381.33623a42,42,0,1,1,42,42A42.04764,42.04764,0,0,1,605.50394,381.33623Zm2,0a40,40,0,1,0,40-40A40.04528,40.04528,0,0,0,607.50394,381.33623Z"
transform="translate(-196 -240.035)"
fill="#3f3d56"
/>
<path
d="M623.50394,369.834l-5-1s4.2,4.7,5,5h0a20.12445,20.12445,0,0,1,0,3c9.6,41.2,45,23,45,23-12.9.3-14-5-14-5,7.5-1.1,9-6,9-6a3.09,3.09,0,0,1-4-1c8.1-2.1,7-10,7-10a10.40012,10.40012,0,0,1-4.9,1.9c.9-1.1,8.5-10.2,3.9-14.9,0,0-5.6,10-20.3,10.9l-1-.2a7.85037,7.85037,0,0,0,.2-2.2,10.5,10.5,0,0,0-10.5-10.5c-7,0-8.5,4-8.5,4l-5-3C620.50394,363.834,621.00394,368.834,623.50394,369.834Z"
transform="translate(-196 -240.035)"
fill="#85A98F"
/>
<path
d="M892.48683,659.965h-62a7.00785,7.00785,0,0,1-6.99975-6.93262L815.48683,590.965a7.00786,7.00786,0,0,1,7-7h78a7.00785,7.00785,0,0,1,7,7l-.0083.12793-7.99194,61.93945A7.00787,7.00787,0,0,1,892.48683,659.965Zm-74.99951-69.06153,7.99951,62.06153a5.00573,5.00573,0,0,0,5,5h62a5.00573,5.00573,0,0,0,5-5l.0083-.12891,7.99121-61.93262a5.00572,5.00572,0,0,0-4.99951-4.93847h-78A5.00572,5.00572,0,0,0,817.48732,590.90347Z"
transform="translate(-196 -240.035)"
fill="#3f3d56"
/>
<ellipse cx="665.48683" cy="355.92999" rx="42" ry="7" fill="#f2f2f2" />
<path
d="M862.62589,588.79419a123.71656,123.71656,0,0,1-9.15712-47.08956,128.5999,128.5999,0,0,1,9.00732-47.17228,120.51866,120.51866,0,0,1,12.77361-23.88387c1.09766-1.594-1.50122-3.09583-2.59041-1.51416a125.98315,125.98315,0,0,0-19.24982,45.015,131.77789,131.77789,0,0,0-1.20756,48.81643,122.193,122.193,0,0,0,7.53114,26.626c.72345,1.76147,3.627.99009,2.89284-.79752Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M854.31968,516.64156c-6.12533-6.716-1.96329-17.141-1.85246-25.04269a17.94061,17.94061,0,0,0-3.24393-11.25425c-2.15773-2.86221-5.43978-4.99012-9.1424-4.757-8.09693.50974-11.93879,9.61327-13.131,16.48027a37.92388,37.92388,0,0,0,24.075,42.29645c1.80409.69187,2.58478-2.20742.79752-2.89284a34.97153,34.97153,0,0,1-22.335-35.7974,28.03437,28.03437,0,0,1,2.93349-10.8889c1.48381-2.75312,3.79432-5.54414,7.04025-6.12215,3.21958-.57332,6.09817,1.46705,7.78189,4.06067,2.14465,3.30363,2.41377,7.15963,2.12366,10.998-.633,8.37456-3.55764,18.03572,2.8317,25.04122,1.30383,1.42957,3.42061-.69673,2.12132-2.12132Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M855.75016,553.507c6.41953-4.239,7.50885-12.17137,8.29316-19.21059.458-4.1108.94792-8.53864,3.2577-12.08685,1.83476-2.8185,5.09144-5.36306,8.63181-5.01142,7.07453.70266,8.17736,10.34228,7.89066,15.79364a35.57625,35.57625,0,0,1-8.71109,21.35928c-5.29871,6.08255-11.97019,10.6321-20.12557,11.61391-1.89291.22788-1.91584,3.23064,0,3,16.28589-1.96063,29.2463-16.57094,31.49-32.49981.97852-6.94673.53983-16.30256-5.90653-20.67877a10.03631,10.03631,0,0,0-10.41844-.24632,16.22223,16.22223,0,0,0-7.39358,9.3679c-1.62061,4.87652-1.51312,10.07464-2.48268,15.07816-.80051,4.13108-2.375,8.51061-6.03963,10.93046-1.60416,1.05927-.10319,3.65839,1.51415,2.59041Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M882.46973,470.66972a42,42,0,1,1,42-42A42.04765,42.04765,0,0,1,882.46973,470.66972Zm0-82a40,40,0,1,0,40,40A40.04528,40.04528,0,0,0,882.46973,388.66972Z"
transform="translate(-196 -240.035)"
fill="#3f3d56"
/>
<path
d="M909.92593,428.83458a27.4562,27.4562,0,1,0-31.74623,27.124v-19.185h-6.97314v-7.939h6.97314v-6.05017c0-6.88,4.1-10.6834,10.37084-10.6834a42.19154,42.19154,0,0,1,6.147.53687v6.75741h-3.4639c-3.40873,0-4.47511,2.1156-4.47511,4.29v5.15049h7.61419l-1.21592,7.939h-6.39828v19.18625a27.46358,27.46358,0,0,0,23.16741-27.12648Z"
transform="translate(-196 -240.035)"
fill="#85A98F"
fill-rule="evenodd"
/>
<path d="M1004,658.965a1.00308,1.00308,0,0,1-1,1H197a1,1,0,0,1,0-2h806A1.00308,1.00308,0,0,1,1004,658.965Z" transform="translate(-196 -240.035)" fill="#3f3d56" />
<path
d="M387.48683,659.965h-62a7.00785,7.00785,0,0,1-6.99975-6.93262L310.48683,590.965a7.00786,7.00786,0,0,1,7-7h78a7.00785,7.00785,0,0,1,7,7l-.0083.12793-7.99194,61.93945A7.00787,7.00787,0,0,1,387.48683,659.965Zm-74.99951-69.06153,7.99951,62.06153a5.00573,5.00573,0,0,0,5,5h62a5.00573,5.00573,0,0,0,5-5l.0083-.12891,7.99121-61.93262a5.00572,5.00572,0,0,0-4.99951-4.93847h-78A5.00572,5.00572,0,0,0,312.48732,590.90347Z"
transform="translate(-196 -240.035)"
fill="#3f3d56"
/>
<ellipse cx="160.48683" cy="355.92999" rx="42" ry="7" fill="#f2f2f2" />
<path
d="M355.24061,592.59171a125.98409,125.98409,0,0,0,9.26377-48.08675,130.89993,130.89993,0,0,0-9.18779-47.9554,123.80842,123.80842,0,0,0-13.00222-24.41524c-1.088-1.58-3.68917-.08142-2.59041,1.51416a123.71634,123.71634,0,0,1,18.90563,44.10306,127.74986,127.74986,0,0,1,1.15118,48.00686,122.12,122.12,0,0,1-7.433,26.03579c-.73293,1.78453,2.1682,2.56186,2.89283.79752Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M362.77531,521.76288c5.4153-5.93754,4.17426-14.22023,3.21626-21.49509-.52839-4.01251-.99721-8.34869.51926-12.21035,1.143-2.91064,3.51517-5.79366,6.73151-6.38873,3.24262-.59993,6.12247,1.46619,7.95776,3.95736a23.74428,23.74428,0,0,1,3.89285,10.02709,34.97493,34.97493,0,0,1-21.94166,38.81832c-1.78437.68431-1.00968,3.5859.79752,2.89284a38.86166,38.86166,0,0,0,18.32972-14.545,37.98173,37.98173,0,0,0,6.16956-24.57484c-.67858-7.15376-3.40264-16.54388-11.00129-19.17229-7.78512-2.69291-13.871,5.12733-14.7487,12.03812-.68257,5.37433.74775,10.645,1.11909,15.98047.3027,4.34932-.08978,9.181-3.1632,12.55078-1.29874,1.424.81692,3.5515,2.12132,2.12132Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M360.73766,553.91662c-7.24923-4.78686-6.18637-15.36066-7.68188-22.788-.82829-4.11367-2.51742-8.10859-5.78112-10.87792-2.88559-2.44851-6.7976-3.86722-10.52642-2.60624-7.39746,2.50162-8.9788,11.786-8.58725,18.553a38.91171,38.91171,0,0,0,9.57895,23.27492c5.87095,6.73943,13.27612,11.41261,22.24689,12.49259,1.91265.23026,1.896-2.77174,0-3-14.87289-1.79052-26.558-15.71747-28.56811-30.09826a27.42794,27.42794,0,0,1,.37934-10.75266c.76823-2.877,2.2694-5.93048,5.07184-7.29493,3.21735-1.56646,6.76113-.04016,9.1198,2.3248,2.87591,2.88355,3.92342,6.84428,4.51792,10.76165,1.21677,8.01774,1.13188,17.59351,8.71588,22.60143,1.61572,1.06691,3.12-1.53,1.51416-2.59041Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path
d="M337.25849,472.91775a42,42,0,1,1,42-42A42.04765,42.04765,0,0,1,337.25849,472.91775Zm0-82a40,40,0,1,0,40,40A40.0452,40.0452,0,0,0,337.25849,390.91775Z"
transform="translate(-196 -240.035)"
fill="#3f3d56"
/>
<path
d="M348.69774,410.14047a10.59019,10.59019,0,0,1,10.5585,10.5585V441.8137a10.59019,10.59019,0,0,1-10.5585,10.5585H327.583a10.59018,10.59018,0,0,1-10.5585-10.5585V420.699a10.59018,10.59018,0,0,1,10.5585-10.5585h21.11473m0-4.22272H327.583A14.82446,14.82446,0,0,0,312.80179,420.699V441.8137A14.82446,14.82446,0,0,0,327.583,456.59492h21.11473A14.82446,14.82446,0,0,0,363.479,441.8137V420.699A14.82446,14.82446,0,0,0,348.69774,405.91775Z"
transform="translate(-196 -240.035)"
fill="#85A98F"
/>
<path d="M351.86506,420.699a3.16053,3.16053,0,1,1,.01359,0Q351.87186,420.699,351.86506,420.699Z" transform="translate(-196 -240.035)" fill="#85A98F" />
<path
d="M338.14038,422.80976a8.44657,8.44657,0,1,1-8.44658,8.44658,8.44657,8.44657,0,0,1,8.44658-8.44658m0-4.22272a12.6693,12.6693,0,1,0,12.66929,12.6693A12.6693,12.6693,0,0,0,338.14038,418.587Z"
transform="translate(-196 -240.035)"
fill="#85A98F"
/>
<polygon points="381.243 406.999 392.963 403.402 384.667 356.484 367.369 361.792 381.243 406.999" fill="#ffb8b8" />
<path
d="M575.0397,638.47643h38.53072a0,0,0,0,1,0,0V653.3633a0,0,0,0,1,0,0H589.92657a14.88686,14.88686,0,0,1-14.88686-14.88686v0A0,0,0,0,1,575.0397,638.47643Z"
transform="translate(1155.96178 849.01834) rotate(162.93912)"
fill="#2f2e41"
/>
<polygon points="281.245 407.269 293.504 407.268 299.337 359.98 281.242 359.981 281.245 407.269" fill="#ffb8b8" />
<path
d="M474.61773,643.80021h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H489.50459a14.88686,14.88686,0,0,1-14.88686-14.88686v0A0,0,0,0,1,474.61773,643.80021Z"
transform="translate(791.79591 1062.42974) rotate(179.99738)"
fill="#2f2e41"
/>
<path
d="M476.36513,510.22642a9.16224,9.16224,0,0,1,.318-14.04558l9.50536-119.69459,19.33086,4.8297L490.04177,498.07448a9.21188,9.21188,0,0,1-13.67664,12.15194Z"
transform="translate(-196 -240.035)"
fill="#ffb8b8"
/>
<circle cx="319.07601" cy="65.4662" r="24.56103" fill="#ffb8b8" />
<path
d="M493.71936,372.80459c-5.54194-7.60815-5.71269-18.08683.25708-25.36412,3.89587-4.74914,10.41248-8.54951,21.29248-8.54951,29,0,40,23,40,23s12,22,5,42-7,22-7,22l-46-4S515.02912,402.05933,493.71936,372.80459Z"
transform="translate(-196 -240.035)"
fill="#ccc"
/>
<path d="M479.5343,392.71323l9.90967-32.4209a15.50188,15.50188,0,0,1,21.93017-9.24512h0A15.53,15.53,0,0,1,518.462,371.057l-12.59838,28.6914Z" transform="translate(-196 -240.035)" fill="#ccc" />
<path d="M552.26892,420.891l39,202-21,6-51-133-23,136-22,3s-9.65032-179.945,33-213Z" transform="translate(-196 -240.035)" fill="#2f2e41" />
<path
d="M557.365,435.55a15.822,15.822,0,0,1-14.92481-10.54688l-11.26172-31.334,17.48389-8.30957,9.59643,29.29687,48.89307-2.3706a10.60031,10.60031,0,0,1,.86768-1.18653h0a11.00074,11.00074,0,0,1,15.741-1.03369,11.13227,11.13227,0,0,1,1.20362,15.06153,11,11,0,0,1-15.70606,1.479,10.2122,10.2122,0,0,1-.78222-.74512l-47.99219,9.38526A16.25015,16.25015,0,0,1,557.365,435.55Z"
transform="translate(-196 -240.035)"
fill="#ffb8b8"
/>
<path d="M524.872,364.79526a15.50083,15.50083,0,0,1,16.3623-17.28223h0a15.52954,15.52954,0,0,1,14.53467,15.47168v31.335l-26.936,4.14453Z" transform="translate(-196 -240.035)" fill="#ccc" />
<path
d="M520.47745,330.285c-3.68637-.01605-6.53018-3.89721-6.36494-7.57991s2.63867-6.92285,5.61866-9.09293,6.47478-3.49191,9.798-5.08739,6.61743-3.58561,8.66925-6.64822a14.7156,14.7156,0,0,0,1.02332-13.50438,21.66865,21.66865,0,0,0-9.3332-10.22418,28.37777,28.37777,0,0,0-37.60707,8.25038l-4.20808,11.45787c-4.28786,5.15613-4.968,12.81333-2.33217,18.97968s8.24814,10.80579,14.58112,13.0114a35.79392,35.79392,0,0,0,19.8411.59488"
transform="translate(-196 -240.035)"
fill="#2f2e41"
/>
<path
d="M498.03087,292.12467c-1.80895-2.89931-4.94439-4.74325-8.18587-5.82543a25.72433,25.72433,0,0,0-33.83245,23.00283c-.34357,6.31437,1.63365,12.48912,2.79546,18.70519s1.39291,13.0816-2.03446,18.396c-2.61054,4.0478-6.96387,6.59634-11.26083,8.77251-3.58128,1.81371-7.45507,3.51578-11.45314,3.1544s-8.01642-3.52811-7.91033-7.54108a32.0544,32.0544,0,0,0-2.68163,9.08033c-.28127,3.15593.49658,6.56125,2.77606,8.76193,3.3131,3.19859,8.56254,2.9646,13.1157,2.27441,9.85694-1.49417,19.83818-4.29542,27.62551-10.52031s12.95466-16.47494,10.90389-26.23127c-.85666-4.07547-2.86994-7.796-4.49677-11.62968s-2.89693-8.027-2.1496-12.124a14.73514,14.73514,0,0,1,7.49256-9.98176,19.60141,19.60141,0,0,1,12.52266-1.899c2.79906.45932,6.294,1.17251,7.95419-1.12742a4.50754,4.50754,0,0,0-.09367-4.80858,13.24782,13.24782,0,0,0-3.59259-3.5596"
transform="translate(-196 -240.035)"
fill="#2f2e41"
/>
<circle cx="541.38841" cy="6.46689" r="6.46689" fill="#f2f2f2" />
<circle cx="541.38841" cy="32.24019" r="6.46689" fill="#f2f2f2" />
<circle cx="541.38841" cy="58.01349" r="6.46689" fill="#f2f2f2" />
<circle cx="541.38841" cy="83.7868" r="6.46689" fill="#f2f2f2" />
<circle cx="568.38841" cy="6.46689" r="6.46689" fill="#f2f2f2" />
<circle cx="568.38841" cy="32.24019" r="6.46689" fill="#f2f2f2" />
<circle cx="568.38841" cy="58.01349" r="6.46689" fill="#f2f2f2" />
<circle cx="568.38841" cy="83.7868" r="6.46689" fill="#f2f2f2" />
<circle cx="595.38841" cy="6.46689" r="6.46689" fill="#f2f2f2" />
<circle cx="595.38841" cy="32.24019" r="6.46689" fill="#f2f2f2" />
<circle cx="595.38841" cy="58.01349" r="6.46689" fill="#f2f2f2" />
<circle cx="595.38841" cy="83.7868" r="6.46689" fill="#f2f2f2" />
<circle cx="622.38841" cy="6.46689" r="6.46689" fill="#f2f2f2" />
<circle cx="622.38841" cy="32.24019" r="6.46689" fill="#f2f2f2" />
<circle cx="622.38841" cy="58.01349" r="6.46689" fill="#f2f2f2" />
<circle cx="622.38841" cy="83.7868" r="6.46689" fill="#f2f2f2" />
<circle cx="649.38841" cy="6.46689" r="6.46689" fill="#f2f2f2" />
<circle cx="649.38841" cy="32.24019" r="6.46689" fill="#f2f2f2" />
<circle cx="649.38841" cy="58.01349" r="6.46689" fill="#f2f2f2" />
<circle cx="649.38841" cy="83.7868" r="6.46689" fill="#f2f2f2" />
<circle cx="676.38841" cy="6.46689" r="6.46689" fill="#f2f2f2" />
<circle cx="676.38841" cy="32.24019" r="6.46689" fill="#f2f2f2" />
<circle cx="676.38841" cy="58.01349" r="6.46689" fill="#f2f2f2" />
<circle cx="676.38841" cy="83.7868" r="6.46689" fill="#f2f2f2" />
</svg>
</div>
</div>
<div class="mt-12 sm:mt-4">
<div class="px-0 md:px-10">
<h5 class="text-2xl mb-1 font-medium">Strategy</h5>
<p class="mt-3 mb-0 text-gray-700 text-lg">
The generated injected humour, or non-characteristic words etc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
</div>
</div>
</div>
<div class="timeline-item mt-5 pt-4 px-8 sm:px-0">
<div class="grid sm:grid-cols-2">
<div class="md:order-1 order-2">
<div class="px-0 md:px-10">
<h5 class="text-2xl mt-12 sm:mt-4 font-medium">Development</h5>
<p class="mt-3 mb-0 text-gray-700 text-lg">
The generated injected humour, or non-characteristic words etc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
</div>
<div class="md:order-2 order-1">
<div
class="md:ms-7 relative before:absolute before:top-0 before:border-dashed before:border-2 before:rounded-full before:left-[-41.5px] before:z-10 before:bg-white before:h-[1.75rem] before:w-[1.75rem] after:absolute after:top-[9px] after:h-[0.625rem] after:w-[0.625rem] after:bg-black after:left-[-33px] after:z-20 after:rounded-full"
>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 1058 434.74542">
<polygon points="643.457 221.721 705.39 159.977 643.457 98.233 662.339 79.414 743.154 159.977 662.339 240.54 643.457 221.721 643.457 221.721" fill="#e6e6e6" />
<rect x="466.59505" y="135.20679" width="25.176" height="25.17601" fill="#e6e6e6" />
<rect x="567.80264" y="135.20679" width="25.17601" height="25.17601" fill="#e6e6e6" />
<rect x="517.19884" y="135.20679" width="25.17601" height="25.17601" fill="#e6e6e6" />
<polygon points="432.482 221.092 370.486 159.348 432.419 97.604 413.537 78.785 332.785 159.348 413.6 239.911 432.482 221.092" fill="#e6e6e6" />
<polygon points="643.457 209.763 705.39 148.019 643.457 86.274 662.339 67.455 743.154 148.019 662.339 228.582 643.457 209.763 643.457 209.763" fill="#85A98F" />
<path d="M537.59506,385.05149h25.176v-25.176H537.595Zm126.38359-25.176h-25.176v25.176h25.176Zm-75.77981,25.176h25.176v-25.176h-25.176Z" transform="translate(-71 -232.62729)" fill="#85A98F" />
<polygon points="432.482 209.133 370.486 147.389 432.419 85.645 413.537 66.826 332.785 147.389 413.6 227.952 432.482 209.133" fill="#85A98F" />
<polygon points="129.305 410.449 143.399 413.856 163.248 361.117 142.447 356.088 129.305 410.449" fill="#a0616a" />
<path d="M193.63206,655.732l4.3279-17.902,27.57443,6.66619a18.03222,18.03222,0,0,1,13.27516,21.74027l-.09544.394Z" transform="translate(-71 -232.62729)" fill="#2f2e41" />
<polygon points="191.696 420.05 206.196 420.049 213.093 364.122 191.694 364.123 191.696 420.05" fill="#a0616a" />
<path d="M259.18336,648.12878l28.36885-.00118h.00079A18.01192,18.01192,0,0,1,305.565,666.139v.40553l-46.3808.002Z" transform="translate(-71 -232.62729)" fill="#2f2e41" />
<path
d="M259.29356,633.32467l2.38386-87.00733-3.21111-35.28086-6.26571,27.151-27.37942,89.28493L201.21793,621.261l27.33582-96.27019-5.93712-61.74814,17.05775-10.96528.23013.04158,58.27861,10.74237L284.10491,630.8438Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M282.35859,475.17467c-4.69322,0-10.18192-1.51185-16.29171-5.82451-19.551-13.79842-42.86266,1.04525-43.09625,1.19539l-.9465.6156.03321-1.1284c.02367-.80386,2.36509-80.71159,2.36509-106.42468,0-26.56546,17.33205-45.962,22.64433-51.27373,5.21382-5.21468,9.601-5.09919,15.15465-4.95482.95689.02426,1.95449.05082,3.00378.05082,7.25755,0,14.31354,6.97255,14.61037,7.26938l.14177.14206.02628.19866,20.13863,151.63135-.15419.19519C299.89479,466.98594,293.28172,475.17467,282.35859,475.17467Z"
transform="translate(-71 -232.62729)"
fill="#ccc"
/>
<circle cx="268.30764" cy="269.43064" r="29.04805" transform="translate(-167.80192 142.99595) rotate(-61.3368)" fill="#a0616a" />
<path
d="M312.77524,499.45367a11.89282,11.89282,0,0,1-.69-18.22321L295.589,442.31962l21.5994,3.97529,12.35367,36.34094a11.95731,11.95731,0,0,1-16.76682,16.81782Z"
transform="translate(-71 -232.62729)"
fill="#a0616a"
/>
<path
d="M308.10258,477.30444l-29.80746-60.80685-13.06993-45.76567.0104-39.75752c.02945-.15708,3.102-15.62212,14.49025-14.55262,10.32658,1.0002,15.88834,6.04973,18.597,16.8845,2.301,9.204-.846,36.50975-1.15064,39.08649,1.9981,4.73768,31.97592,76.16447,27.013,84.76553a2.18414,2.18414,0,0,1-.78451.8131l5.312,11.21476Z"
transform="translate(-71 -232.62729)"
fill="#ccc"
/>
<path
d="M264.59343,280.3744c3.48214.45308,6.10882-3.10969,7.32709-6.40307s2.14653-7.12755,5.174-8.90657c4.13617-2.43049,9.42822.49275,14.15814-.30915,5.34156-.90559,8.81456-6.56659,9.08675-11.97752s-1.8811-10.61511-3.99389-15.60394l-.7376,6.2a12.295,12.295,0,0,0-5.37281-10.74684l.9507,9.09752a9.65567,9.65567,0,0,0-11.10838-7.9897l.14973,5.42064c-6.1695-.73362-12.39291-1.46827-18.58067-.90936s-12.41874,2.51667-17.10855,6.59179c-7.01521,6.09574-9.57732,16.1331-8.71716,25.38683s4.68008,17.94693,8.6613,26.34462c1.00168,2.11288,2.38715,4.49712,4.7099,4.76627,2.087.24183,3.99666-1.50276,4.64544-3.50106a12.69016,12.69016,0,0,0-.05633-6.234c-.587-3.1191-1.32688-6.30722-.775-9.43271s2.80033-6.21408,5.951-6.59711,6.37453,3.21831,4.85976,6.00735Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M983.59122,495.58011a10.05576,10.05576,0,0,1,2.3586-15.23787l-7.4341-34.953,17.28994,6.77433,4.40882,32.1534a10.11027,10.11027,0,0,1-16.62326,11.26316Z"
transform="translate(-71 -232.62729)"
fill="#ffb8b8"
/>
<path
d="M981.62765,468.308l-.09277-.34339c-9.34669-34.5709-19.00838-70.30806-30.8041-109.21933l-.07738-.2549.26022-.15181c6.57463-3.83653,16.45658-3.58105,22.986.59367a17.15009,17.15009,0,0,1,7.44359,18.19132l8.60322,44.85729c3.49772,14.663,7.11763,29.84049,10.57731,44.80585l.09811.42426-.53579.03421c-6.29931.40058-12.80735.81488-18.02141,1.0436Z"
transform="translate(-71 -232.62729)"
fill="#ccc"
/>
<polygon points="831.194 421.744 818.934 421.744 813.1 374.457 831.194 374.457 831.194 421.744" fill="#ffb8b8" />
<path d="M905.32117,666.25558H865.79041v-.5a15.40421,15.40421,0,0,1,15.387-15.38672h24.1438Z" transform="translate(-71 -232.62729)" fill="#2f2e41" />
<polygon points="946.719 411.631 935.037 415.353 915.121 372.069 932.362 366.575 946.719 411.631" fill="#ffb8b8" />
<path d="M986.64124,666.63351l-.15162-.47657a15.40435,15.40435,0,0,1,9.989-19.332l23.00415-7.33008,4.82324,15.13672Z" transform="translate(-71 -232.62729)" fill="#2f2e41" />
<circle cx="884.66704" cy="69.87633" r="24.56103" fill="#ffb8b8" />
<path
d="M966.69432,297.95159c.1396-9.90634-4.00632-19.71729-10.41658-24.64995a16.64876,16.64876,0,0,0-21.13211.37344c-6.311,5.15746-10.26257,15.11151-9.92822,25.00948C939.35813,298.7248,953.49885,298.765,966.69432,297.95159Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M909.19348,639.15011l-.4917-.04785c-10.66577-1.04688-21.69482-2.12793-32.11792-2.252l-.56689-.00683.07739-.56153c2.46948-17.88574,3.51636-36.47949,4.52881-54.46191.99976-17.75586,2.0332-36.11572,4.44092-53.55322,1.01855-4.66944,2.01123-9.28321,3.00049-13.88037,8.18554-38.043,15.91723-73.97657,31.8767-109.54639l.15088-.33594.36548.04395c14.97437,1.812,29.36328,7.27539,40.51538,15.3833l.21607.15674-.0105.26709c-.21509,5.5249-.43774,11.23632-.10815,16.439a55.797,55.797,0,0,1,7.95385,49.2832c4.39112,14.6753,8.93091,29.84522,13.563,44.80957,11.24854,30.83838,22.88818,62.75147,34.81983,95.10108l.1958.53027-.55054.12891c-8.58472,2.01562-17.44043,4.09375-26.17676,4.90039l-.32983.03027-.15674-.292A712.85141,712.85141,0,0,1,936.30042,501.2297c-2.98145,9.09228-7.27637,17.29931-11.43726,25.249A189.02218,189.02218,0,0,0,914.381,548.88058c-1.84155,15.12109-2.33008,31.5039-2.802,47.34668-.44653,14.97949-.86816,29.12793-2.3313,42.43164Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M947.28183,273.756c10.6461-2.29372,22.42205-.11154,30.78278,7.07137s12.60642,19.60911,9.17169,30.26612-15.09593,18.15524-25.6397,15.40318c3.02034-8.51233-.37868-18.96349-7.76211-23.86665C945.07836,296.81524,942.66781,282.93292,947.28183,273.756Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M960.2074,420.99923l-.38941-.17725c-13.58129-6.19629-26.89843-10.95068-39.37573-15.28857l-.38257-.08252-.001-1.10938.24829.08643c.05224-.11523.11108-.24609.17016-.37646.17041-.377.28662-.63379.3855-.80372l-.00268-.00146c1.04028-2.11963,1.86718-4.168,2.66674-6.14893.8252-2.04443,1.677-4.15527,2.77759-6.38867a19.35575,19.35575,0,0,1-4.27637-20.82861c2.75635-6.53272,9.78418-11.62061,17.16846-12.46485,2.70581-7.44873,8.73487-23.10009,8.73487-23.10009s12.67822-.34815,17.77685-.99512l.08569-.01074.08423.01855c11.13086,2.439,20.42359,12.97168,22.5979,25.61377,1.83545,10.66992-.95166,22.87451-7.84741,34.36572a148.03962,148.03962,0,0,1-11.70947,16.08887c-3.106,3.88379-6.03955,7.55176-8.47608,11.2461Z"
transform="translate(-71 -232.62729)"
fill="#ccc"
/>
<path d="M984.29217,290.49254v0Z" transform="translate(-71 -232.62729)" fill="#2f2e41" />
<path
d="M984.7908,288.31066c-7.45248-1.11243-13.30382-8.73046-12.45669-16.21774s8.2526-13.60541,15.76524-13.02465,13.88983,7.76435,13.57617,15.29287S994.306,289.731,984.7908,288.31066Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M983.62732,283.45577c-7.45239-1.11242-13.30371-8.73047-12.45654-16.21771a15.24139,15.24139,0,0,1,8.88183-11.73438c-6.01,1.31543-11.18237,6.55249-11.88183,12.73438-.84717,7.48724,5.00415,15.10529,12.45654,16.21771a14.20792,14.20792,0,0,0,8.17188-1.14294A14.50427,14.50427,0,0,1,983.62732,283.45577Z"
transform="translate(-71 -232.62729)"
fill="#2f2e41"
/>
<path
d="M839.06875,415.43349a10.05575,10.05575,0,0,1,15.15306-2.85319l30.47891-18.65516-.6265,18.55912-28.84725,14.87a10.11028,10.11028,0,0,1-16.15822-11.92072Z"
transform="translate(-71 -232.62729)"
fill="#ffb8b8"
/>
<path
d="M864.12832,404.49546l.29286-.20188c29.48139-20.33114,59.95745-41.34787,92.71522-65.43426l.21456-.15789.22983.19477c5.80788,4.92069,8.85952,14.32312,7.09886,21.87045A17.15011,17.15011,0,0,1,950.00786,373.846l-39.42775,23.05743c-12.65982,8.18336-25.764,16.65334-38.7215,24.90159l-.36733.23385-.21077-.49378c-2.47653-5.8059-5.03555-11.80405-6.98845-16.644Z"
transform="translate(-71 -232.62729)"
fill="#ccc"
/>
<path d="M453,667.37271H72a1,1,0,0,1,0-2H453a1,1,0,1,1,0,2Z" transform="translate(-71 -232.62729)" fill="#3f3d56" />
<path d="M1128,667.37271H747a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-71 -232.62729)" fill="#3f3d56" />
</svg>
</div>
</div>
</div>
</div>
<div class="timeline-item mt-5 pt-4 px-8 sm:px-0">
<div class="grid sm:grid-cols-2">
<div class="mt-4 mt-sm-0">
<div
class="flex justify-start md:justify-end before:absolute before:top-0 before:border-dashed before:border-2 before:rounded-full before:left-[-41.5px] sm:before:right-[-41.5px] before:z-10 before:bg-white before:h-[1.75rem] before:w-[1.75rem] after:absolute after:top-[9px] after:h-[0.625rem] after:w-[0.625rem] after:bg-black after:left-[-33px] sm:after:right-[-33px] sm:before:left-auto sm:after:left-auto after:z-20 after:rounded-full ltr:float-right rtl:float-left md:me-7 relative"
>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 855.15669 581.90681">
<path
d="M696.92661,503.79661a5.5,5.5,0,0,1,5.5,5.49994v53.20618h105.5a5.5,5.5,0,0,1,0,11h-105.5v184h-11V509.29655A5.5,5.5,0,0,1,696.92661,503.79661Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path
d="M403.33253,756.2532l-19.83221.54759a13.81232,13.81232,0,0,1-8.48582-2.3789c-2.15367-1.602-3.14159-3.76763-2.70847-5.94251l3.90258-19.61285c.73546-3.7,5.26958-6.49709,10.77994-6.6493l10.95246-.30244c5.51034-.15215,10.19188,2.39045,11.1305,6.04428l4.979,19.36761c.55248,2.14765-.31449,4.36454-2.37642,6.08293A13.81231,13.81231,0,0,1,403.33253,756.2532Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<path
d="M523.96291,755.69264l-19.83215.54763a13.81231,13.81231,0,0,1-8.48582-2.37891c-2.15362-1.602-3.14159-3.76763-2.70848-5.94251l3.90259-19.61285c.73546-3.7,5.2696-6.49714,10.77993-6.6493l10.95246-.30244c5.5104-.15213,10.19188,2.39045,11.1305,6.04428l4.979,19.36762c.55246,2.14769-.31448,4.36453-2.37641,6.08292A13.81217,13.81217,0,0,1,523.96291,755.69264Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<path
d="M334.46727,589.18826a4.33143,4.33143,0,0,1,1.595-8.30761L561.53,574.65488a4.33,4.33,0,0,1,4.4488,4.208l0,.00038a4.33573,4.33573,0,0,1-4.20924,4.44844l-.00045-.00019-225.46776,6.22569A4.30673,4.30673,0,0,1,334.46727,589.18826Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<rect x="356.21949" y="515.39594" width="64.47382" height="217.68039" transform="translate(-194.26833 -166.59855) rotate(-1.58175)" fill="#e6e6e6" />
<polygon points="242.126 333.079 229.737 366.828 229.748 520.587 244.844 524.916 242.126 333.079" fill="#ccc" />
<path
d="M385.11593,457.6809c-12.05743.34244-21.25689,21.20913-21.03567,29.35186l.407,14.74161,43.65913-1.20557-.407-14.74161C407.51085,477.68465,397.17388,457.35745,385.11593,457.6809Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<path
d="M354.06345,606.43974a8.50984,8.50984,0,0,1-8.73142-8.26213l-.66249-23.99087a8.5,8.5,0,1,1,16.99353-.46923l.66248,23.99087A8.50982,8.50982,0,0,1,354.06345,606.43974Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<polyline points="193.233 339.284 192.928 323.429 197.086 323.326 197.391 339.13 201.16 569.476 197.001 569.591" fill="#3f3d56" />
<path
d="M425.06668,553.91991l-74.73856,2.0638c-7.13852-8.70518-7.78692-45.7926,7.11089-52.85111l5.8423-9.92024,45.04258-2.19882,5.26415,10.44507C420.99871,507.7645,424.81991,544.62037,425.06668,553.91991Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path
d="M396.9363,536.13244l-18.90007.52192c-3.64713.10071-6.74793-4.631-6.91128-10.54634s2.67166-10.811,6.3188-10.91168l18.90006-.52192c3.64714-.10071,6.74794,4.631,6.91129,10.54634S400.58344,536.03173,396.9363,536.13244Z"
transform="translate(-177.18543 -177.55905)"
fill="#85A98F"
/>
<polygon points="183.151 465.568 144.192 493.088 137.386 555.138 182.834 539.953 183.151 465.568" fill="#e6e6e6" />
<rect x="480.62986" y="512.731" width="64.47382" height="217.68039" transform="translate(-194.14737 -163.16544) rotate(-1.58175)" fill="#e6e6e6" />
<polygon points="301.996 333.806 315.257 367.222 319.236 520.93 304.257 525.649 301.996 333.806" fill="#ccc" />
<ellipse cx="397.13212" cy="262.58361" rx="8.44737" ry="11.32747" fill="#e6e6e6" />
<path
d="M508.26852,455.05074c-12.05744.34245-21.25689,21.20914-21.03567,29.35186l.407,14.74161,43.65914-1.20557L530.892,483.197C530.66338,475.05448,520.32648,454.72726,508.26852,455.05074Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<polyline points="343.567 344.247 343.262 328.392 347.42 328.288 347.725 344.093 351.494 574.439 347.335 574.554" fill="#3f3d56" />
<path
d="M548.21927,551.28975l-74.7385,2.0638c-1.30314-7.87683.3826-44.63292,7.11089-52.85111l5.8423-9.92024,45.04259-2.19882,5.26414,10.44507C550.0394,499.91218,554.69093,536.03162,548.21927,551.28975Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path
d="M520.18032,536.813l-18.90007.52192c-3.64714.10071-6.76843-5.37372-6.957-12.20169s2.626-12.46635,6.273-12.56708l18.90007-.52192c3.64714-.10071,6.76843,5.37372,6.957,12.20169S523.8274,536.71222,520.18032,536.813Z"
transform="translate(-177.18543 -177.55905)"
fill="#85A98F"
/>
<polygon points="368.086 449.662 405.749 478.93 409.715 541.227 365.009 523.983 368.086 449.662" fill="#e6e6e6" />
<path
d="M534.75357,338.67976c-40.4127,0-86.85713-44.8462-127.94893-23.53858-124.415,64.51367-107.28857-43.43994-143.032-83.58887l1.17348-2.35367c27.05948,103.21821,51.543,267.6924,142.3988,83.20476,22.75922-46.21386,97.45512,25.21994,141.42331,23.11264l.0763,2.8291Q541.8795,338.68114,534.75357,338.67976Z"
transform="translate(-177.18543 -177.55905)"
fill="#f2f2f2"
/>
<path
d="M631.75057,345.0259c-32.21551,24.39973-96.31582,16.69148-116.20791,58.48687-60.228,126.54525-111.754,30.14828-164.48777,19.72362l-.48561-2.58476c52.79008,4.37844,109.41447-2.4151,163.75111-19.64751,49.10434-15.57131,92.91452-38.73551,126.692-66.96179l1.76894,2.20919Q637.43193,340.72462,631.75057,345.0259Z"
transform="translate(-177.18543 -177.55905)"
fill="#f2f2f2"
/>
<ellipse cx="104.13212" cy="150.58361" rx="8.44737" ry="11.32747" fill="#e6e6e6" />
<ellipse cx="366.13212" cy="58.58361" rx="8.44737" ry="11.32747" fill="#e6e6e6" />
<path d="M358.656,385.18822c-3.862,2.57318-7.81469-3.55124-3.87848-6.0102C358.63937,376.605,362.59207,382.72945,358.656,385.18822Z" transform="translate(-177.18543 -177.55905)" fill="#e6e6e6" />
<path d="M501.656,184.18823c-3.862,2.57319-7.81469-3.55124-3.87848-6.01018C501.63937,175.605,505.59207,181.72944,501.656,184.18823Z" transform="translate(-177.18543 -177.55905)" fill="#e6e6e6" />
<polygon
points="408.749 125.801 406.292 125.262 406.83 122.804 405.192 122.445 404.653 124.903 402.196 124.365 401.837 126.003 404.294 126.542 403.756 128.999 405.394 129.358 405.933 126.9 408.39 127.439 408.749 125.801"
fill="#e6e6e6"
/>
<circle cx="183.53494" cy="32.73714" r="10.70233" fill="#ff6584" />
<path
d="M439.00118,196.74951c-12.05744.34245-21.2569,21.20915-21.03568,29.35188l.407,14.74161,43.65913-1.20556-.40711-14.74162C461.396,216.75324,451.05913,196.42606,439.00118,196.74951Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<path
d="M464.99807,754.96821l-19.83215.54763a13.81233,13.81233,0,0,1-8.48582-2.37891c-2.15368-1.602-3.14165-3.76765-2.70848-5.94251l3.90259-19.61285c.73551-3.7,5.2696-6.49714,10.78-6.64927l10.95246-.30244c5.51039-.15213,10.19188,2.39044,11.1305,6.04427l4.9789,19.36752c.55246,2.14769-.31448,4.36453-2.37641,6.08292A13.81216,13.81216,0,0,1,464.99807,754.96821Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<rect x="415.4532" y="291.40111" width="64.47382" height="440.01582" transform="translate(-191.13137 -165.0065) rotate(-1.58175)" fill="#e6e6e6" />
<polyline points="270.868 325.949 270.563 310.094 274.721 309.991 275.026 325.795 278.795 556.141 274.636 556.256" fill="#3f3d56" />
<path
d="M486.53068,330.85065,399.20479,333.262c-1.52254-9.20342.447-52.15,8.30847-61.75224l2.15433-11.462,60.29654-1.66505,3.15478,11.17106C481.77751,276.9218,486.2423,319.98486,486.53068,330.85065Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path
d="M471.87015,259.73526l-62.22262,1.7182c-2.29663.06335-4.1931-1.14245-4.23579-2.69339a1.95169,1.95169,0,0,1,.09665-.65848l9.66494-29.77518c.41385-1.275,2.06138-2.21137,3.98418-2.26446l41.26444-1.13939c1.9228-.05308,3.61946.79092,4.10307,2.04115l11.29335,29.19646c.57762,1.4933-.75639,3.04723-2.97964,3.47082A6.08056,6.08056,0,0,1,471.87015,259.73526Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path
d="M415.78556,501.48553a7.62611,7.62611,0,0,1-1.58088-.915,5.604,5.604,0,0,1-2.37913-4.32149l-2.26085-81.87758c-.0931-3.38939,3.22545-6.24061,7.39767-6.356l55.70319-1.53841c4.17306-.11605,7.64291,2.54888,7.73709,5.93821l2.26073,81.878a5.60268,5.60268,0,0,1-2.13683,4.44594,8.50617,8.50617,0,0,1-5.2613,1.90983l-55.70234,1.53767A8.91985,8.91985,0,0,1,415.78556,501.48553Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<path
d="M451.438,254.46588l-18.90007.52192c-3.64714.1007-6.7311-4.01989-6.87367-9.18422s2.70926-9.44884,6.3564-9.54955l18.90007-.52192c3.64714-.10071,6.7311,4.01989,6.87367,9.18422S455.08518,254.36517,451.438,254.46588Z"
transform="translate(-177.18543 -177.55905)"
fill="#85A98F"
/>
<path
d="M898.19394,740.08733h-22V580.21c18.40229-1.31952,32.23267-6.95472,32.23267-13.70722,0-7.732-18.13245-14-40.5-14s-40.5,6.268-40.5,14c0,6.81751,14.09991,12.49408,32.76733,13.74207V740.08733h-22a8,8,0,0,0,0,16h60a8,8,0,0,0,0-16Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<polygon points="676.847 481.363 669.62 489.238 635.806 465.112 646.471 453.489 676.847 481.363" fill="#a0616a" />
<path
d="M835.5538,679.70713a13.32168,13.32168,0,0,0,4.33559,9.30746l.31814.296,9.47771-10.32853,13.82067-15.06363-10.20277-9.36667-1.84225,2.01241-.19237.20719-9.1817,4.343-1.94585.92483-.33295.15534-.73246,7.86477v.0074A13.28266,13.28266,0,0,0,835.5538,679.70713Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<polygon points="714.287 559.924 704.06 563.031 687.21 525.063 702.304 520.478 714.287 559.924" fill="#a0616a" />
<path
d="M863.98679,756.2017l.12581.42173,32.97573-10.01775-4.02487-13.251-2.60429.79166-.27375.08142-12.25956-1.12461-.36253-.02958-4.639,6.3998a13.41268,13.41268,0,0,0-8.93758,16.72833Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
id="ad16ec3e-8c70-4d69-a6df-f9bf45b483f6-111"
data-name="Path 17"
d="M807.14234,538.68707s-65.294,63.042-24.01623,82.55557h12.75817a84.503,84.503,0,0,1,12.61132-25.10752c1.20538-1.57743,5.72106-1.257,6.97511-2.79432,7.657-9.38674,15.95823-17.44824,21.69136-17.12816l-1.37151,43.558L833.571,635.30785c-1.16546,8.03186,31.7271,78.16146,31.7271,78.16146L885.9723,705.344s-21.53993-57.76213-21.79225-66.08937L881.44161,547.693Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M801.69759,541.79634a3.89,3.89,0,0,0,1.27259,1.15419,8.98975,8.98975,0,0,0,2.6709.99144c14.7011,3.33675,62.72574,10.25451,75.19244,6.9547,1.53153-.39951,2.53033-.96181,2.85587-1.70168,1.04323-2.33795.91-12.21517.296-24.14179-.111-2.2344-2.57476-4.65373-2.72269-6.99173-.10359-1.75347,2.10859-3.40335,1.99023-5.18645-.81387-12.05979-1.86447-24.34893-2.56735-32.11751-.4439-4.99408-.74727-8.11629-.74727-8.11629l7.58361-47.81746-.35512-.58452-.39951-.19973-24.45256-12.10422-1.33175-3.40336a5.26651,5.26651,0,0,0-4.87568-3.3368l-16.10687-.06656a5.249,5.249,0,0,0-4.2838,2.17516l-4.36522,6.04473-28.85472,18.49661.111.34031,13.53951,41.20306.06657,3.211v.0074l.5031,25.82125-1.39831,3.49959,1.57591,5.74136s-.72509,6.71053-4.60938,11.69726c-3.52177,4.528-8.00534,9.2483-10.03257,13.0808v.0074C801.12792,538.57055,800.75058,540.4054,801.69759,541.79634Z"
transform="translate(-177.18543 -177.55905)"
fill="#85A98F"
/>
<path
id="ef5568b9-6037-4ec0-9cfc-fa22633e4b80-112"
data-name="Path 18"
d="M779.991,617.49777l3.49,4.40992s32.09783,22.4561,33.2,24.55472l5.0727,4.80008,12.274-13.1203-6.383-8.00038a50.1066,50.1066,0,0,0-19.22112-14.71558h0l-9.78231-8.67888Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M895.61028,556.69023l-5.84513-56.57768L888.22236,476.827l16.36037-2.95828s-.64826,16.64985,1.495,26.04387c2.115,9.2699.28058,55.53545.14989,56.77256a7.95977,7.95977,0,1,1-10.61731.00505Z"
transform="translate(-177.18543 -177.55905)"
fill="#a0616a"
/>
<path
d="M876.128,471.0061l4.55755,9.75141,1.59073,3.396,4.2838,22.43266,2.13822,2.27139,1.84225,7.33208.86563-.17756,15.61117-3.2332,4.55014-.93965A8.64955,8.64955,0,0,0,909.999,501.015c-.31073-.28115-.56966-.5549-.5623-.81383.259-15.60377-.69547-44.096-9.31487-55.8228-2.73751-3.72154-4.38-7.42827-6.76978-10.0178-.00741-.00736-.00741-.01476-.01477-.01476l-5.81537-9.52206-.35512-.58452-.39951-.19973Z"
transform="translate(-177.18543 -177.55905)"
fill="#85A98F"
/>
<circle id="af7fa85c-211d-4c02-a612-cf38cfa53f1c" data-name="Ellipse 5" cx="672.12801" cy="202.13103" r="21.43064" fill="#a0616a" />
<path
d="M874.76076,375.07894c.62766-3.6014,1.11688-8.27006-.6812-12.4204-1.51934-3.49282-5.32013-6.76762-9.54488-6.32591a4.39885,4.39885,0,0,0-1.37264-4.39892,11.55527,11.55527,0,0,0-4.6882-2.20425c-3.971-1.16718-8.08439-2.37721-12.33157-2.39969-4.7667-.0259-8.9903,1.60706-11.58015,4.48623l-.0634.09312-.77645,1.85365a1.86806,1.86806,0,0,1-1.14868,1.05728,1.83578,1.83578,0,0,1-1.55348-.1902,1.69462,1.69462,0,0,0-2.58087,1.36572l-.04131.791-1.112-.44327a1.68958,1.68958,0,0,0-2.29858,1.85051l.148.941a1.811,1.811,0,0,0-1.37993.31109,1.65526,1.65526,0,0,0-.58927,1.86,15.3983,15.3983,0,0,0,4.28388,6.39952,12.80237,12.80237,0,0,0,2.90823,1.97737q.32943.16611.68487.3146a76.25188,76.25188,0,0,0,26.96328,6.10778,15.65361,15.65361,0,0,0-1.67438,5.37209,5.87473,5.87473,0,0,0,2.514,5.54144,7.39947,7.39947,0,0,0,1.204.55162,7.94136,7.94136,0,0,1,1.15454.53448,3.59829,3.59829,0,0,1-.14825,6.24292s1.59493,1.94715,1.85017,1.91406a4.98167,4.98167,0,0,0,2.625-1.55306C870.17275,390.2022,873.27793,383.60175,874.76076,375.07894Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M968.58324,706.35184l.93143-20.94324a67.6402,67.6402,0,0,1,31.54965-7.98643c-15.15276,12.3885-13.25912,36.26927-23.53233,52.92887a40.68576,40.68576,0,0,1-29.83528,18.80144l-12.68037,7.76378a68.17644,68.17644,0,0,1,14.36987-55.24593A65.85415,65.85415,0,0,1,961.489,690.42482C964.526,698.4327,968.58324,706.35184,968.58324,706.35184Z"
transform="translate(-177.18543 -177.55905)"
fill="#f2f2f2"
/>
<path
d="M1032.34212,757.91264a1.5486,1.5486,0,0,1-1.55329,1.55322H178.73865a1.55322,1.55322,0,0,1,0-3.10644h852.05018A1.54866,1.54866,0,0,1,1032.34212,757.91264Z"
transform="translate(-177.18543 -177.55905)"
fill="#ccc"
/>
<path
d="M543.68349,601.12509a8.50985,8.50985,0,0,1-8.73142-8.26214l-.66249-23.99087a8.5,8.5,0,0,1,16.99351-.4692l.66249,23.99087A8.50985,8.50985,0,0,1,543.68349,601.12509Z"
transform="translate(-177.18543 -177.55905)"
fill="#3f3d56"
/>
<path
d="M918.53992,688.80705q-19.36817,0-42.45654-1.46386c-79.61377-5.05567-182.7378-22.63282-290.376-49.49219-107.6377-26.85938-206.93018-59.79395-279.58545-92.73438-35.39258-16.04687-62.55615-31.23633-80.73535-45.14746-19.24707-14.727-27.666-27.564-25.02393-38.15283,5.148-20.62891,50.731-25.14209,88.064-25.29541l.01269,3c-51.26806.21045-81.51367,8.38672-85.16552,23.022-4.65186,18.64014,33.28662,47.74073,104.08691,79.84131,72.49561,32.86813,171.60547,65.73923,279.07321,92.55661,107.46729,26.81641,210.40137,44.36328,289.83985,49.4082,77.57861,4.92774,124.74316-2.9375,129.39453-21.57812,3.86181-15.47656-21.59815-38.27539-71.68946-64.19824l1.37891-2.66407c36.397,18.83594,78.64551,45.85157,73.22168,67.58887-2.64252,10.58887-16.10541,17.96485-40.01508,21.92285C954.93494,687.67619,938.19422,688.80705,918.53992,688.80705Z"
transform="translate(-177.18543 -177.55905)"
fill="#ccc"
/>
<path
d="M233.244,669.1541c-10.24609,0-16.90722-2.5459-19.85547-7.60742-5.814-9.98047,3.92334-27.49317,28.94092-52.05079l2.10156,2.14063c-23.23877,22.8125-33.34277,40.001-28.45068,48.40039,3.0957,5.3125,12.30859,7.2168,26.64844,5.50391,14.23535-1.69922,33.10058-6.76465,56.07177-15.05469,47.291-17.06738,106.62256-45.85645,167.065-81.06445,60.44043-35.207,114.75048-72.61621,152.92675-105.335,7.33252-6.28565,13.98731-12.33252,19.7793-17.9712a196.95978,196.95978,0,0,0,20.97559-23.37744c8.563-11.627,11.45312-20.58105,8.35791-25.89453-5.16992-8.87451-26.8877-8.04-61.15625,2.353l-.87012-2.8711c36.76611-11.14892,58.50732-11.48339,64.61865-.99169,3.79737,6.51855.92578,16.3374-8.53418,29.18359a199.92306,199.92306,0,0,1-21.29883,23.74756c-5.83691,5.6831-12.53906,11.77246-19.91992,18.09961-38.30957,32.83349-92.77685,70.354-153.36914,105.64892-60.59375,35.29688-120.1001,64.168-167.55615,81.29492-23.18506,8.36719-42.27344,13.48536-56.73486,15.21094A82.69758,82.69758,0,0,1,233.244,669.1541Z"
transform="translate(-177.18543 -177.55905)"
fill="#ccc"
/>
<path
d="M780.78711,545.98171c-7.41429-.1477-47.23975-1.29075-53.77054-1.00966-.36944-1.29329-12.74985,14.57255-13.05093,14.6709a1.80832,1.80832,0,0,0,.60481,2.90758c.72777.44213,64.93165-.7456,65.70956-.59063a1.78591,1.78591,0,0,0,1.59378-1.03833l.42913-.96116c.04459-1.64432.58292-10.048.09966-11.48483A1.77814,1.77814,0,0,0,780.78711,545.98171Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path d="M782.30283,559.95889c-.37681.90549-.85882,2.04315-2.02291,2.00138l-65.03159.7298a1.79391,1.79391,0,0,1-1.56528-2.63308Z" transform="translate(-177.18543 -177.55905)" opacity="0.17" />
<path
d="M727.32042,544.77735c-.7-1.21052-18.08617-87.23831-19.53728-87.95769l-11.87031-14.52105-1.06095-.79779c-1.47534-.81046-5.01435-.26248-4.69563,1.99086h0c2.7887,13.37007,20.7256,89.51848,21.11867,101.39039l2.15914,15.12429a1.86251,1.86251,0,0,0,2.29966,1.52982,3.58266,3.58266,0,0,0,2.87739-2.07911C718.773,558.92333,728.13321,545.08723,727.32042,544.77735Z"
transform="translate(-177.18543 -177.55905)"
fill="#e6e6e6"
/>
<path
d="M695.91,442.29922l22.70339,117.16093c-.75925,1.92172-4.312,3.268-5.13948.74717-.01446-.00347-23.29114-116.64351-23.31482-116.71323C689.911,440.687,694.54951,440.59792,695.91,442.29922Z"
transform="translate(-177.18543 -177.55905)"
opacity="0.17"
/>
<polygon points="519.409 269.531 530.939 285.603 543.881 347.068 537.865 352.316 519.409 269.531" fill="#85A98F" />
<path
d="M773.34421,554.26935l3.19.13a12.53882,12.53882,0,0,1,.46-2.76c.48-2.28.91-4.99-1.08-4.98-1.35-.13-1.81,1.58-2.05,3.44A26.31787,26.31787,0,0,1,773.34421,554.26935Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M755.04423,549.97937l2.15.07995,1.04.04c-.02-1.14.51-3.49-.78-4.07a1.60015,1.60015,0,0,0-.65-.13c-1.21-.07-1.57.85-1.68006,1.91-.06994.64-.04,1.32-.06,1.85C755.06418,549.76935,755.05424,549.87933,755.04423,549.97937Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M748.67423,549.71936l2.16.09,1.03.04c-.02-1.31.67-4.17-1.43005-4.21-1.94-.11-1.69,2.36-1.74,3.76C748.69419,549.50934,748.68418,549.61932,748.67423,549.71936Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M742.30424,549.46936l2.15.08,1.04.04c-.02-1.3.67-4.16-1.43-4.2-1.94-.12-1.69,2.35-1.74,3.76C742.32419,549.25934,742.31418,549.36932,742.30424,549.46936Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M735.93418,549.20935l2.16.09,1.03.04c-.02-1.31.67-4.16-1.43-4.21-1.94-.11-1.69,2.36005-1.74,3.76C735.9542,548.99933,735.94419,549.10937,735.93418,549.20935Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M729.56418,548.95935l2.15.08,1.04.04c-.02-1.2.56-3.71-.98-4.14h-.01a1.46394,1.46394,0,0,0-.44-.06,1.5056,1.5056,0,0,0-.54.05h-.01c-1.34.35-1.15,2.45-1.19,3.71C729.5842,548.74933,729.57419,548.85937,729.56418,548.95935Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M766.91422,548.27936l3.19.13c0-.12,0-.25.01-.4a13.33041,13.33041,0,0,0,.04-2.29c-.11-.84-.47-1.5-1.48-1.52-1.03-.06-1.44.6-1.6,1.45a3.11646,3.11646,0,0,0-.08.44v.01C766.91422,546.87933,766.96421,547.71936,766.91422,548.27936Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M760.54423,548.01935l3.19.13a23.28044,23.28044,0,0,0,.06-2.58c-.09-.88-.44-1.6-1.49-1.62-1.06006-.07-1.47.65-1.63,1.54C760.52421,546.34936,760.60422,547.37933,760.54423,548.01935Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M754.17423,547.76935l.95.04,2.24.09c-.01-.48.08-1.18.09-1.87a4.23315,4.23315,0,0,0-.02-.62c-.08-.93-.41-1.7-1.5-1.72-1.11-.06-1.5.71-1.63995,1.65C754.15421,546.17932,754.23423,547.14935,754.17423,547.76935Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path d="M766.97422,554.01935l3.19.12c-.01-1.3.67-4.16-1.43-4.2C766.63419,549.80932,767.09421,552.70935,766.97422,554.01935Z" transform="translate(-177.18543 -177.55905)" fill="#2f2e41" />
<path d="M760.60422,553.75934l3.19.13c-.01-1.31.67-4.17-1.43-4.21C760.2642,549.55932,760.72422,552.45935,760.60422,553.75934Z" transform="translate(-177.18543 -177.55905)" fill="#2f2e41" />
<path
d="M754.23423,553.50934l3.19.12c-.01-.93.34-2.65-.23-3.57a1.31959,1.31959,0,0,0-1.2-.63,1.40554,1.40554,0,0,0-.93.23C754.04423,550.32934,754.3342,552.44934,754.23423,553.50934Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M747.86423,553.24933l3.19.13c-.01-.93.32995-2.63995-.22-3.57a1.32343,1.32343,0,0,0-1.21-.63995,1.38934,1.38934,0,0,0-.93.23C747.67423,550.08935,747.96421,552.19934,747.86423,553.24933Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M741.49418,552.99933l3.19.12c-.01-.93.34-2.65-.23-3.56994a1.31934,1.31934,0,0,0-1.2-.63,1.40519,1.40519,0,0,0-.93.23C741.30424,549.81933,741.59421,551.93933,741.49418,552.99933Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M735.12418,552.73938l3.19.12994c-.00994-.93.33-2.63995-.22-3.56994a1.31238,1.31238,0,0,0-1.21-.64,1.38925,1.38925,0,0,0-.93.23C734.93418,549.57934,735.22422,551.68933,735.12418,552.73938Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M728.75419,552.48938l3.19.12c-.01-.93005.33-2.64-.23-3.57a1.30821,1.30821,0,0,0-1.2-.63,1.405,1.405,0,0,0-.93.23C728.56418,549.31933,728.85422,551.42932,728.75419,552.48938Z"
transform="translate(-177.18543 -177.55905)"
fill="#2f2e41"
/>
<path
d="M764.7803,543.24528l24.31306-51.42056L798.286,470.375l-14.44775-8.22653s-4.92111,15.91917-10.06408,24.06724c-5.07509,8.04038-18.71837,52.28659-19.00618,53.49683a7.95977,7.95977,0,1,0,10.01233,3.53276Z"
transform="translate(-177.18543 -177.55905)"
fill="#a0616a"
/>
<path
d="M764.63224,495.6377l18.38757,11.09293,4.17-6.30274,2.77738-1.43257,11.49437-19.73725,10.16248-10.35367,13.42726-42.9193-17.47011,2.621-.02283.00749c-3.11234,1.65072-5.89632,4.60186-9.71281,7.20274-12.02605,8.19551-22.39546,34.75188-27.3355,49.55869-.08107.243-.4139.41243-.80035.57792a8.653,8.653,0,0,0-5.0775,9.68473Z"
transform="translate(-177.18543 -177.55905)"
fill="#85A98F"
/>
</svg>
</div>
</div>
<div class="mt-12 sm:mt-4">
<div class="px-0 md:px-10">
<h5 class="text-2xl mb-1 font-medium">Launch</h5>
<p class="mt-3 mb-0 text-gray-700 text-lg">
The generated injected humour, or non-characteristic words etc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Preview
Education
2019 – 2020
Master in Computer Science
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2019 – 2020
Bachelor in Computer Science
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2019 – 2020
Certificate in Web Design & Development
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Experience
2021 – 2024
UX/UX Design Intern @SocialHub
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2019 – 2021
UI & UX Designer @Flipkart
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2018 – 2019
Senior UX/UX Designer in Amazon
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Show Code
<section class="container mx-auto px-4 lg:px-0">
<div class="grid md:grid-cols-2 gap-10 lg:gap-14">
<div>
<h2 class="text-4xl font-bold text-center mb-6">Education</h2>
<div class="border-r border-b border-black p-7">
<h6 class="font-medium text-sm tracking-wider mb-2">2019 - 2020</h6>
<h3 class="text-2xl line-clamp-2 font-semibold mb-2">Master in Computer Science</h3>
<p class="text-gray-600 leading-6 line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="border-l border-b border-black p-7">
<h6 class="font-medium text-sm tracking-wider mb-2">2019 - 2020</h6>
<h3 class="text-2xl line-clamp-2 font-semibold mb-2">Bachelor in Computer Science</h3>
<p class="text-gray-600 leading-6 line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="border-r border-b border-black p-7">
<h6 class="font-medium text-sm tracking-wider mb-2">2019 - 2020</h6>
<h3 class="text-2xl line-clamp-2 font-semibold mb-2">Certificate in Web Design & Development</h3>
<p class="text-gray-600 leading-6 line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<h2 class="text-4xl font-bold text-center mb-6">Experience</h2>
<div class="border-l border-b border-black p-7">
<h6 class="font-medium text-sm tracking-wider mb-2">2021 - 2024</h6>
<h3 class="text-2xl line-clamp-2 font-semibold mb-2">UX/UX Design Intern @SocialHub</h3>
<p class="text-gray-600 leading-6 line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="border-r border-b border-black p-7">
<h6 class="font-medium text-sm tracking-wider mb-2">2019 - 2021</h6>
<h3 class="text-2xl line-clamp-2 font-semibold mb-2">UI & UX Designer @Flipkart</h3>
<p class="text-gray-600 leading-6 line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="border-l border-b border-black p-7">
<h6 class="font-medium text-sm tracking-wider mb-2">2018 - 2019</h6>
<h3 class="text-2xl line-clamp-2 font-semibold mb-2">Senior UX/UX Designer in Amazon</h3>
<p class="text-gray-600 leading-6 line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>Preview
Funding Raise
Tagline hereSERIES A
Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.
SERIES B
Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.
SERIES C
Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="grid gap-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-2 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-black">
<h3 class="text-3xl font-medium">Funding Raise</h3>
<span class="text-sm font-light tracking-wider uppercase">Tagline here</span>
</div>
</div>
<div class="relative col-span-12 px-0 sm:px-4 space-y-6 sm:col-span-9">
<div class="col-span-12 space-y-12 relative px-0 sm:px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:bg-gray-300">
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-black">
<h3 class="text-xl font-medium mb-1 tracking-wide">SERIES A</h3>
<time class="text-xs tracking-wide uppercase">Dec 2020</time>
<p class="mt-3 font-light">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-black">
<h3 class="text-xl font-medium mb-1 tracking-wide">SERIES B</h3>
<time class="text-xs tracking-wide uppercase">Jul 2019</time>
<p class="mt-3 font-light">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-black">
<h3 class="text-xl font-medium mb-1 tracking-wide">SERIES C</h3>
<time class="text-xs tracking-wide uppercase">Jan 2016</time>
<p class="mt-3 font-light">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
</div>
</div>
</div>
</div>
</div>Timeline UI design is a crucial element in many applications and websites, offering a visually appealing way to display chronological data. Whether you’re building a project management tool, showcasing a historical journey, or tracking milestones, a well-designed timeline can enhance user experience by presenting complex information in an easy-to-digest format.
Importance of Timeline UI Design
Timelines are versatile and widely used across various industries. In project management, they help teams visualize deadlines, tasks, and progress. In education, they can illustrate historical events or the evolution of a concept. Even in social media, timelines are essential for displaying posts or activity logs. A well-structured timeline simplifies data interpretation and helps users stay organize.
900+ UI Components Design
Stay in the loop with everything you need to know.