Discover the best fry websites created by professional designers. Get inspired and start planning your perfect fry 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

Just a quick attempt at replicating something seen elsewhere—can definitely be improved upon but hopefully enough to demonstrate the principle. Interested to see anyone's improvements or other ways of achieving this effect!

You need to have a decent amount of content above and below this at the moment for it to be effective. Play with the interaction assigned to 'outer block' to tweak.

Progress Line

Section based progress line

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

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

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.

Discover fry websites built by the Webflow community

Discover fry websites built by the Webflow community