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">"We helped Cifr translate cutting-edge blockchain innovation into a trusted digital presence with a sleek brand identity and intuitive product design."</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.