Discover the best leeds websites created by professional designers. Get inspired and start planning your perfect leeds web design today!

I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :)

The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.

Overlapped Header Effect

Webflow implementation of https://codepen.io/tmrDevelops/pen/vOPZBv by https://twitter.com/tmrDevelops - slightly altered but essentially just dropped in an embed, beautiful stuff!

Colour

Colourful Bullerful

A (fake) 3D button using only hover state and a trick with borders to make triangles. Improved thanks to a positioning trick from Sako! Staying away from actual 3D was my preference here in the end due to slight anomalies in positioning when updating the button content.

I've tried so many ways of doing this! Happy with this implementation for now but interested if anyone else has another approach!

Check out the other solutions to this:

Actual 3D from Sako: https://webflow.com/website/3D-Button?s=fry3d

Custom CSS from Zach: https://webflow.com/website/3D-Button-with-Custom-CSS-3dbuttonchallenge

3D Button

Demonstrating a cool effect where a sliding highlight box moves around a grid of clickable items. I've also included an alternative fallback for mobile, where the highlight moves based on scroll instead. This is pure experimentation, but could be used as a starting point for something interesting.

Hover Fun

Sliding Hover Highlight Effect

Portfolio site for Patch Music, showcasing selected work and partners.

We wanted to have a very classic, minimal design appearance for this, drawing inspiration from old school magazine layouts. I also enjoyed creating the logomark for Patch's brand.

The individual case study pages make it easy to see everything at once with a css grid layout that also exposes a menu to navigate between projects.

A few fun things:
- Flex animated navigation bar
- Sticky section headers
- Copy to clipboard option for email address
- Overlapped footer

I really loved working with Patch Music — if you're ever looking for soundtrack or sound design I strongly recommend giving him a shout!

Patch Music

Patch Music — Portfolio

My Day 3 project - Hypermode! We had the chance to go back and traverse time and space after going through a black hole so I went back to my day 1 project. Was great fun working on someone else's yesterday but I really wanted to do some extra bits to this!

We now have:
- Dark mode
- Sort of responsiveness
- 'How it's done' tips
- Updated Graphics
- A new 'Cargo' section with CMS
- Jetboost filters
- A black hole
- A thank you message
- Possibly some other stuff I can't remember now

Me talking through it: https://www.loom.com/share/66990f6cf66f41ab9e961117c0711b7b

So much fun doing this, and I'm amazed by the projects I've seen, everyone in this competition was just incredible so well done all!

Day 3 Clone Comp – Hypermode

Day 3 Clone Comp – Hypermode (Earth Was Lost)

This is an initial test of building a pairs matching memory game in Webflow! All of the main functionality is native, using interactions and conditional visibility. Small piece of custom code for randomising the order each time.

I'll be updating this at some point and refining a bit — it was built for Webflow Maker Day in about 10 hours, and can still be improved a lot but glad to have figured out the principles! I'll make it clonable when it's a bit tidier.

Credit to @sarkis for leaving the breadcrumbs to the techniques that make this possible!

Match Pairs

Match Pairs Game - Sia Sia Bowie Bowie Giraffe Giraffe

Client site: A simple one page site for Sunflower Therapy, a Nottingham based Psychotherapy centre.

This site uses a cross fading image interaction, where the image section remains sticky as you scroll and changes based on the section you're looking at. I felt this was effective for this site since the imagery is purely decorative.

Sunflower Therapy

Heirloom London is a well established Jewellery consultancy based in London. They create bespoke engagement rings as well as offering diamond buying, remodelling, arthritis friendly solutions and more.

The owner Ruth wanted to make a big visual and UX update across her site. We worked together on bringing her existing brand to life, and creating a user journey that is closer to a 'services' website than a standard jewellery store, to emphasise her personal approach. The design was strongly centred around some fantastic photography produced for this build.

We also wanted to bring some ecommerce features into the site however, and while they're not front and centre, Heirloom is now selling some of their most popular designs, as well as curated diamonds through this site, all with Webflow Ecommerce.

The site also uses the CMS heavily, and pretty much every other Webflow feature, but is entirely native.

Heirloom London

Heirloom London — Jewellery Services and Ecommerce Site

Phunk Creative

Get Your Media are a Video Production Company based in Leeds, West Yorkshire.

Josh Gudgeon and the team wanted a custom-built website to show off their incredible videography work.

Get Your Media

Get Dynamic, an automation company based in Leeds, was looking for an exciting new rebrand when its team turned to Phunk. The team were hoping for a functional, standout website with a refreshing new colour palette that would set them apart from others in the industry and pique the interest of website visitors.

Thanks to the time spent fully immersing themselves in understanding the client, Phunk was able to create the perfect solution of a website that was modern and contemporary, without being cheesy or garish. Bold, bright colours were used but were offset with a dark background to create an eye-catching finish. The team created animations in a format that would ensure they didn’t slow down the functionality of the website or hinder the user experience. Phunk also developed a new content management system to help Get Dynamic’s customers edit and upload new content.

Discover leeds websites built by the Webflow community

Discover leeds websites built by the Webflow community