PageSourceSearch

https://tell-yourfriends.webflow.io/work/cifr-io

html tell-yourfriends.webflow.io collected 2026-10-03 13:51:35 UTC 30,802 bytes, 234 lines download raw bytes

1<!DOCTYPE html><!-- Last Published: Sun Jun 07 2026 16:38:10 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="tell-yourfriends.webflow.io" data-wf-page="67e1d10378e9bbe2e5ddb3f4" data-wf-site="67d0a644a25c8811775e47a4" lang="en" data-wf-collection="67e1d10378e9bbe2e5ddb3ab" data-wf-item-slug="cifr-io"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>cifr.io | Technology | Tell Your Friends</title><meta content="Case study: cifr.io. Build a credible and tech-forward brand identity, website, and user interface that communicates Cifr’s mission to verify branded goods through blockchain technology." name="description"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Dart-EmP6RF4GR4jrolUhQsCSX4KBCVyNz3IxP45Gx8" name="google-site-verification"/><link href="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/css/tell-yourfriends.webflow.shared.f3793d5bf.css" rel="stylesheet" type="text/css" integrity="sha384-83k9W/y6hbBHIgZGDh6m268Pfmhlnak7KiOHUpAzmswtYgbxAmKRDomFQ5v1++Yx" crossorigin="anonymous"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
1<script type="text/javascript">WebFont.load({  google: {    families: ["Geist:300,400,500,600,700"]  }});</script>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e1d50405b31206f9552b3b_Favicon.jpg" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e1d50928c19ef814d5db1c_Webclip.jpg" rel="apple-touch-icon"/><!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 1-2
1
2<script async src="https://www.googletagmanager.com/gtag/js?id=
2G-4SM1EJ4M32
vendor: 12 bytes, line 2
2"></script>
3<script>
4  
vendor: 134 bytes, lines 4-8
4window.dataLayer = window.dataLayer || [];
5  function gtag(){dataLayer.push(arguments);}
6  gtag('js', new Date());
7
8  gtag('config', '
8G-4SM1EJ4M32
vendor: 4 bytes, line 8
8');
9</script>
9</head><body><div class="page-wrapper"><div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="nav_component w-nav"><div class="padding-global"><div class="nav_container"><a href="/" class="nav_brand w-nav-brand"><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67d0b1aa746582a73a6610ef_tell%20your%20friends%20logo.svg" loading="lazy" alt="" class="nav_logo is-desktop"/><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67d0b1b42c1314ffaca42ebf_tell%20your%20friends%20stacked%20logo.svg" loading="lazy" alt="" class="nav_logo is-mobile"/></a><nav role="navigation" class="nav_menu w-nav-menu"><a href="/services" class="nav_menu_link is-hidden w-nav-link">Services</a><a href="/about" class="nav_menu_link w-nav-link">About</a><div class="nav-button-wrapper"><a href="https://cal.com/tellyourfriends" target="_blank" class="button w-button">Book a meeting</a></div></nav><div class="nav_button w-nav-button"><div class="w-icon-nav-menu"></div></div></div></div></div><div class="global-styles w-embed"><style>
10
11/* Make text look crisper and more legible in all browsers */
12body {
13  -webkit-font-smoothing: antialiased;
14  -moz-osx-font-smoothing: grayscale;
15  font-smoothing: antialiased;
16  text-rendering: optimizeLegibility;
17}
18
19/* Focus state style for keyboard navigation for the focusable elements */
20*[tabindex]:focus-visible,
21  input[type="file"]:focus-visible {
22   outline: 0.125rem solid #4d65ff;
23   outline-offset: 0.125rem;
24}
25
26/* Set color style to inherit */
27.inherit-color * {
28    color: inherit;
29}
30
31/* Get rid of top margin on first element in any rich text element */
32.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
33  margin-top: 0 !important;
34}
35
36/* Get rid of bottom margin on last element in any rich text element */
37.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
38	margin-bottom: 0 !important;
39}
40
41
42/* Make sure containers never lose their center alignment */
43.container-medium,.container-small, .container-large {
44	margin-right: auto !important;
45  margin-left: auto !important;
46}
47
48/* 
49Make the following elements inherit typography styles from the parent and not have hardcoded values. 
50Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
51Uncomment this CSS to use it in the project. Leave this message for future hand-off.
52*/
53/*
54a,
55.w-input,
56.w-select,
57.w-tab-link,
58.w-nav-link,
59.w-dropdown-btn,
60.w-dropdown-toggle,
61.w-dropdown-link {
62  color: inherit;
63  text-decoration: inherit;
64  font-size: inherit;
65}
66*/
67
68/* Apply "..." after 3 lines of text */
69.text-style-3lines {
70	display: -webkit-box;
71	overflow: hidden;
72	-webkit-line-clamp: 3;
73	-webkit-box-orient: vertical;
74}
75
76/* Apply "..." after 2 lines of text */
77.text-style-2lines {
78	display: -webkit-box;
79	overflow: hidden;
80	-webkit-line-clamp: 2;
81	-webkit-box-orient: vertical;
82}
83
84/* These classes are never overwritten */
85.hide {
86  display: none !important;
87}
88
89@media screen and (max-width: 991px) {
90    .hide, .hide-tablet {
91        display: none !important;
92    }
93}
94  @media screen and (max-width: 767px) {
95    .hide-mobile-landscape{
96      display: none !important;
97    }
98}
99  @media screen and (max-width: 479px) {
100    .hide-mobile{
101      display: none !important;
102    }
103}
104 
105.margin-0 {
106  margin: 0rem !important;
107}
108  
109.padding-0 {
110  padding: 0rem !important;
111}
112
113.spacing-clean {
114padding: 0rem !important;
115margin: 0rem !important;
116}
117
118.margin-top {
119  margin-right: 0rem !important;
120  margin-bottom: 0rem !important;
121  margin-left: 0rem !important;
122}
123
124.padding-top {
125  padding-right: 0rem !important;
126  padding-bottom: 0rem !important;
127  padding-left: 0rem !important;
128}
129  
130.margin-right {
131  margin-top: 0rem !important;
132  margin-bottom: 0rem !important;
133  margin-left: 0rem !important;
134}
135
136.padding-right {
137  padding-top: 0rem !important;
138  padding-bottom: 0rem !important;
139  padding-left: 0rem !important;
140}
141
142.margin-bottom {
143  margin-top: 0rem !important;
144  margin-right: 0rem !important;
145  margin-left: 0rem !important;
146}
147
148.padding-bottom {
149  padding-top: 0rem !important;
150  padding-right: 0rem !important;
151  padding-left: 0rem !important;
152}
153
154.margin-left {
155  margin-top: 0rem !important;
156  margin-right: 0rem !important;
157  margin-bottom: 0rem !important;
158}
159  
160.padding-left {
161  padding-top: 0rem !important;
162  padding-right: 0rem !important;
163  padding-bottom: 0rem !important;
164}
165  
166.margin-horizontal {
167  margin-top: 0rem !important;
168  margin-bottom: 0rem !important;
169}
170
171.padding-horizontal {
172  padding-top: 0rem !important;
173  padding-bottom: 0rem !important;
174}
175
176.margin-vertical {
177  margin-right: 0rem !important;
178  margin-left: 0rem !important;
179}
180  
181.padding-vertical {
182  padding-right: 0rem !important;
183  padding-left: 0rem !important;
184}
185
186</style></div><main class="main-wrapper"><section id="hero" class="section__work-hero"><div class="work_hero-grid"><div class="work_hero-content"><div class="work_hero-copy"><div class="breadcrumbs"><a href="/" class="breadcrumb-link w-inline-block"><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67febdbd1d230362ec22d422_Home-icon.svg" loading="lazy" alt="" class="icon-height-medium"/></a><a href="/work" class="breadcrumb-link is-grey w-inline-block"><div>work</div></a><a href="#" class="breadcrumb-link w-inline-block"><div>cifr.io</div></a></div><h1>cifr.io</h1><div class="text-size-medium">Build a credible and tech-forward brand identity, website, and user interface that communicates Cifr’s mission to verify branded goods through blockchain technology.</div></div><div class="w-dyn-list"><div role="list" class="collection-list w-dyn-items"><div role="listitem" class="w-dyn-item"><a href="/services/branding" class="service-link w-inline-block"><div>Branding</div></a></div><div role="listitem" class="w-dyn-item"><a href="/services/website-design" class="service-link w-inline-block"><div>Website design</div></a></div><div role="listitem" class="w-dyn-item"><a href="/services/ux-ui-design" class="service-link w-inline-block"><div>UX/UI design</div></a></div></div></div><div class="project-links"><a href="http://cifr.io" class="text-style-link is-dark">Website link</a><div class="collaboration-wrapper"><div class="text-size-regular">In collaboration with:</div><a href="https://www.darkmodehq.com/" class="text-style-link is-dark">Dark Mode</a></div></div></div><div class="work_hero-image-wrapper"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112c834631b0986400ecb7_cifr-1.webp" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112c834631b0986400ecb7_cifr-1-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112c834631b0986400ecb7_cifr-1.webp 720w" class="work_hero-image"/></div></div></section><section class="section_tl-dr"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-medium"><div class="tl-dr-wrapper"><h2 class="heading-style-h4">TL:DR</h2><div data-split="heading" class="text-size-x-large">&quot;We helped Cifr translate cutting-edge blockchain innovation into a trusted digital presence with a sleek brand identity and intuitive product design.&quot;</div></div></div></div></div></section><section class="section_feature-image"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-small"><div class="sticky-image-wrap"><div class="sticky-image"><div class="feature-image-wrapper"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1.webp" loading="lazy" alt="" sizes="(max-width: 767px) 100v
186w, (max-width: 991px) 727px, 940px" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1-p-800.webp 800w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1-p-1080.webp 1080w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1.webp 1500w" class="feature-image"/></div></div></div></div></div></div></section><section class="section_mobile-feature-image"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1.webp" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1-p-800.webp 800w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1-p-1080.webp 1080w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cb54a17cdbf73e14d67_cifr-1.webp 1500w" class="mobile-feature-image"/></section><section id="challenge" class="section_challenge"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="challenge_content-wrapper"><div class="challenge_content"><h3 class="heading-style-h2">The challenge</h3><div class="text-rich-text w-richtext"><p>Cifr needed a complete visual and digital foundation to match the sophistication of its blockchain-based solution. The brand had to project trust, clarity, and authority in a space that can often feel opaque or overly technical. With no identity or website in place, Cifr’s challenge was to clearly communicate its value proposition while introducing a complex technology to an unfamiliar audience.</p></div></div></div></div></div></div></section><section class="section_image-gallery-1"><div class="gallery-1"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/6828ea0b52f601287fbec828_Cifr-1.svg" loading="lazy" alt="" class="project-image-1"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/6828ea11ac8c8f2756a938c2_Cifr-2.svg" loading="lazy" alt="" class="project-image-2"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/6828ea16395d92289113d960_Cifr-3.svg" loading="lazy" alt="" class="project-image-3"/></div></section><section id="solution" class="section_the-solution"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="solution_content-wrapper"><div class="solution_content"><h4 class="heading-style-h2">The solution</h4><div class="text-rich-text w-richtext"><p>We developed a modern and sophisticated visual identity built on principles of clarity and security. The logo was designed with mono typography to signal precision and professionalism, paired with a tech-forward colour palette to reflect innovation and reliability.</p><p>For the website, we focused on clear messaging and a simplified user experience that explained the blockchain verification process. The interface guided users through how Cifr works, with a clean layout that encouraged exploration and confidence in the technology.</p><p>To support the product design, we created initial UX/UI concepts for key user flows, including interactive features that demonstrated the product verification process. Every interaction was designed for clarity, using visual feedback and guidance to support a seamless experience.</p></div></div></div></div></div></div></section><section class="section_image-gallery-2"><div class="gallery-2"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/6828ea1d465b1c09e14df199_Cifr-4.svg" loading="lazy" alt="" class="project-image-4"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/6828ea23b9374004c6252295_Cifr-5.svg" loading="lazy" alt="" class="project-image-5"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/6828ea29b9374004c6252753_Cifr-6.svg" loading="lazy" alt="" class="project-image-6"/></div></section><section id="results" class="section_the-results"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="results_content-wrapper"><div class="results_content"><h5 class="heading-style-h2">The results</h5><div class="text-rich-text w-richtext"><p>✅ A sleek, trustworthy brand identity aligned with the security-focused, high-tech nature of the product<br/>✅ A website that clearly communicates Cifr’s value and builds user confidence in blockchain verification<br/>✅ UX/UI designs that simplify complex interactions and illustrate how users engage with the technology</p><p>‍</p></div></div></div></div></div></div></section><section id="solution" class="section_testimonial w-condition-invisible"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="w-dyn-list"><div class="w-dyn-empty"><div>No items found.</div></div></div></div></div></div></section><section class="section_final-image"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-small"><div class="final-image-wrapper"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cbd0139cac068e65816_cifr-2.webp" loading="lazy" alt="" sizes="(max-width: 767px) 100v
186w, (max-width: 991px) 727px, 940px" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cbd0139cac068e65816_cifr-2-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cbd0139cac068e65816_cifr-2-p-800.webp 800w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cbd0139cac068e65816_cifr-2-p-1080.webp 1080w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/68112cbd0139cac068e65816_cifr-2.webp 1500w" class="feature-image"/></div></div></div></div></section><section id="summary" class="section_in-summary"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="summary_content-wrapper"><div class="summary_content"><h6 class="heading-style-h2">In summary</h6><div class="text-rich-text w-richtext"><p>Cifr showcases how strong visual design and thoughtful UX can bring emerging technology to market with clarity and impact. We helped shape a brand that stands out for its innovation—and builds the trust required to lead in a space rooted in authenticity.</p><p><a href="mailto:[email protected]">📩 <strong>Let’s talk if your tech startup needs design that earns attention and trust.</strong></a></p><p>‍</p></div></div></div></div></div></div></section><section id="call-to-action" class="section_call-to-action"><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e473f4cdda0e28e556d14a_cta-banner-3.webp" loading="lazy" alt="" sizes="(max-width: 767px) 100vw, (max-width: 991px) 95vw, 940px" srcset="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e473f4cdda0e28e556d14a_cta-banner-3-p-500.webp 500w, https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e473f4cdda0e28e556d14a_cta-banner-3-p-800.webp 800w, https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e473f4cdda0e28e556d14a_cta-banner-3-p-1080.webp 1080w, https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67e473f4cdda0e28e556d14a_cta-banner-3.webp 1200w" class="cta-background"/><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="cta_copy-wrapper"><div class="call-toaction_copy"><h6 class="heading-style-h1 is-white">The digital experience your brand derserves</h6></div><div class="cta-call-to-action"><p class="text-size-regular is-white">Don’t settle for ordinary. Let’s create something extraordinary together.</p><a data-w-id="61fb0bba-c899-7147-a083-17a512a7b671" href="https://cal.com/tellyourfriends" target="_blank" class="button is-icon w-inline-block"><div><strong>Book a free 30-min call</strong></div><div class="icon-1x1-small w-embed"><svg aria-hidden="true" fill='currentColor' role="img" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg"><title>Arrow Right</title><polygon points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707 11.515 18.485 10.101 17.071 16.172 11 0 11 0 9"/></svg></div></a></div></div></div></div></div></section><section class="section_more-work"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="more-work_wrapper"><h6 class="heading-style-h2">More of our work</h6><div class="more-work_collection w-dyn-list"><div role="list" class="more-work_list w-dyn-items"><div role="listitem" class="w-dyn-item"><a data-w-id="a2c2ecf9-ffd0-8080-8cdd-b1f612440070" href="/work/gather" class="card w-inline-block"><div class="card_image-wrapper"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/67e320d3d8f964368bacc47e_cover-image%207%20Gather.svg" loading="lazy" alt="" class="card_cover-image"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/681128b10b6a000a1e1df420_gather-1.webp" loading="lazy" style="opacity:0;-webkit-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" alt="" sizes="(max-width: 767px) 100v
186w, (max-width: 991px) 727px, 940px" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/681128b10b6a000a1e1df420_gather-1-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/681128b10b6a000a1e1df420_gather-1.webp 720w" class="card-hover-image"/></div><div class="card_content-wrapper"><div class="small-label">Publishing</div><div class="card_heading-wrapper"><h5>Gather</h5><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67d6d39cdb995e343ab191b4_arrow-forward.svg" loading="lazy" alt="" class="icon-height-medium"/></div></div></a></div><div role="listitem" class="w-dyn-item"><a data-w-id="a2c2ecf9-ffd0-8080-8cdd-b1f612440070" href="/work/flora-health" class="card w-inline-block"><div class="card_image-wrapper"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/67e32098cc6600704f5151af_cover-image%204%20Flora%20Health.svg" loading="lazy" alt="" class="card_cover-image"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/682f7e0afeddc567b46d390d_flora-health-hero.webp" loading="lazy" style="opacity:0;-webkit-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" alt="" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727px, 940px" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/682f7e0afeddc567b46d390d_flora-health-hero-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/682f7e0afeddc567b46d390d_flora-health-hero.webp 720w" class="card-hover-image"/></div><div class="card_content-wrapper"><div class="small-label">Retail</div><div class="card_heading-wrapper"><h5>Flora Health</h5><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67d6d39cdb995e343ab191b4_arrow-forward.svg" loading="lazy" alt="" class="icon-height-medium"/></div></div></a></div><div role="listitem" class="w-dyn-item"><a data-w-id="a2c2ecf9-ffd0-8080-8cdd-b1f612440070" href="/work/silver-silver" class="card w-inline-block"><div class="card_image-wrapper"><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/67e31fef6c1ef078cc46dc76_cover-image%206%20SilverSilver.svg" loading="lazy" alt="" class="card_cover-image"/><img src="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/684f2698f14f5709155786f4_Silver-silver-hero.webp" loading="lazy" style="opacity:0;-webkit-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 3rem, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" alt="" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727px, 940px" srcset="https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/684f2698f14f5709155786f4_Silver-silver-hero-p-500.webp 500w, https://cdn.prod.website-files.com/67e1d103b290a7fa8c069dd5/684f2698f14f5709155786f4_Silver-silver-hero.webp 720w" class="card-hover-image"/></div><div class="card_content-wrapper"><div class="small-label">Music</div><div class="card_heading-wrapper"><h5>Silver Silver</h5><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67d6d39cdb995e343ab191b4_arrow-forward.svg" loading="lazy" alt="" class="icon-height-medium"/></div></div></a></div></div></div></div></div></div></div></section></main><footer class="section_footer"><div class="padding-global"><div class="w-layout-blockcontainer container-large w-container"><div class="padding-section-large"><div class="footer_content"><div class="footer_grid"><div class="footer_nav-links"><div class="footer-title">Our studio</div><a href="/work" class="footer-link w-inline-block"><div>Work</div></a>
186<a href="#" class="footer-link is-hidden w-inline-block"><div>Services</div></a><a href="#" class="footer-link w-inline-block"><div>About</div></a></div><div class="footer_nav-links"><div class="footer-title">Email</div><a href="mailto:[email protected]" class="footer-link w-inline-block"><div>[email protected]</div></a><div class="footer-title">Follow</div><a href="https://instagram.com/tell_yourfriends" target="_blank" class="footer-link w-inline-block"><div>Instagram</div></a><a href="https://www.linkedin.com/in/matthewwaring-digital-designer/" target="_blank" class="footer-link w-inline-block"><div>LinkedIn</div></a><a href="https://contra.com/matthew_waring_23b2t8tq/work?r=matthew_waring_23b2t8tq" target="_blank" class="footer-link w-inline-block"><div>Contra</div></a><a href="https://wedotart.com/tell-your-friends-co" target="_blank" class="footer-link w-inline-block"><div>we[dot]art</div></a></div><div id="w-node-_9bbeb856-a856-dbf2-6053-92fd9c437e7e-9c437e69" class="footer_logo-wrapper"><div class="button-group"><a href="mailto:[email protected]" class="button is-icon w-inline-block"><div>Get in touch</div><div class="icon-1x1-small w-embed"><svg aria-hidden="true" fill='currentColor' role="img" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg"><title>Arrow Right</title><polygon points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707 11.515 18.485 10.101 17.071 16.172 11 0 11 0 9"/></svg></div></a><div class="contra-button w-embed w-script"><div class="contra-hire-me-button" data-analyticsUserId="d3efa6d8-044a-4765-a3f1-f23c2b122f8f" data-theme="dark" data-username="matthew_waring_23b2t8tq"></div>
186<script async src="https://contra.com/static/embed/sdk.js" charset="utf-8"></script>
186</div><p class="text-color-alternate"><br/></p></div></div></div><a href="/" class="footer_brand-link w-inline-block"><img src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/67d0b1aa54f7f64e9d97a5df_tell%20your%20friends%20logo%20-%20white.svg" loading="lazy" alt="" class="footer-logo"/></a><div class="copyright-wrapper"><div>© 2026 Copyright tell your friends LTD</div></div></div></div></div></div></footer><div class="menu-wrapper"><div class="menu"><div class="menu-links-wrapper"><a href="#hero" class="menu-link w-inline-block"><div class="menu-text-wrapper"><div class="menu-text">Intro</div><div class="menu-text menu-text-absolute">Intro</div></div></a><a href="#challenge" class="menu-link w-inline-block"><div class="menu-text-wrapper"><div class="menu-text">Challenge</div><div class="menu-text menu-text-absolute">Challenge</div></div></a><a href="#solution" class="menu-link w-inline-block"><div class="menu-text-wrapper"><div class="menu-text">Solution</div><div class="menu-text menu-text-absolute">Solution</div></div></a><a href="#results" class="menu-link w-inline-block"><div class="menu-text-wrapper"><div class="menu-text">Results</div><div class="menu-text menu-text-absolute">Results</div></div></a><a href="#summary" class="menu-link w-inline-block"><div class="menu-text-wrapper"><div class="menu-text">Summary</div><div class="menu-text menu-text-absolute">Summary</div></div></a></div></div></div></div>
186<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=67d0a644a25c8811775e47a4" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
186<script src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/js/webflow.schunk.36b8fb49256177c8.js" type="text/javascript" integrity="sha384-4abIlA5/v7XaW1HMXKBgnUuhnjBYJ/Z9C1OSg4OhmVw9O3QeHJ/qJqFBERCDPv7G" crossorigin="anonymous"></script>
186<script src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/js/webflow.schunk.9216ed2f22baa055.js" type="text/javascript" integrity="sha384-xda5Pai3JKP9bBDgPciUxn03SvPhhKeXb9q1oAJsZD//ZvzE/ZpsrQzSoN0lsdRc" crossorigin="anonymous"></script>
186<script src="https://cdn.prod.website-files.com/67d0a644a25c8811775e47a4/js/webflow.1891fc92.a742ef301c08cc88.js" type="text/javascript" integrity="sha384-5GxiGiIhaIqJ8KMRniaVht/iZAACPmiWs5Qaybe2jUHJO7hY3E8eMbqjWqX+2Xxu" crossorigin="anonymous"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/InertiaPlugin.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/SplitText.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/CustomEase.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/MorphSVGPlugin.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/Observer.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollToPlugin.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollSmoother.min.js" type="text/javascript"></script>
186<script src="https://cdn.prod.website-files.com/gsap/3.15.0/TextPlugin.min.js" type="text/javascript"></script>
186<script type="text/javascript">gsap.registerPlugin(InertiaPlugin,SplitText,ScrollTrigger,CustomEase,MorphSVGPlugin,Observer,ScrollToPlugin,ScrollSmoother,TextPlugin);</script>
186<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
vendor: 1 bytes, line 186
186
187<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
187<script>
188
189let tl= gsap.timeline();
190
191tl.from (".work_hero-image-wrapper", {
192  yPercent: 100,
193    autoAlpha: 0,
194    duration: 2,
195    ease: "expo.out",  
196})
197    .from (".work_hero-image" , {
198    scale: 1.6,
199    duration: 3,
200    ease: "expo.out"
201}, "<");
202
203// Image animation
204$(".sticky-image-wrap").each(function (index) {
205  let triggerElement = $(this);
206  let targetElement = $(".feature-image-wrapper");
207
208  let tl = gsap.timeline({
209    scrollTrigger: {
210      trigger: triggerElement,
211      // trigger element - viewport
212      start: "top top",
213      end: "bottom bottom",
214      scrub: 1
215    }
216  });
217  tl.fromTo(targetElement, {
218      width: "25em",
219      height: "25em",
220      borderRadius: "25em",
221      duration: 1
222    },
223    {
224      width: "96vw",
225      height: "38em",
226      borderRadius: "2em",
227      duration: 1
228    }
229  );
230});
231</script>
231
232
233
234</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.