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

I created a pre-launch landing page for Citypad a little while back. They're launching in 2018 and needed a page to collect emails for their launch. The goal was to display some of their properties in an engaging way, whilst keeping the email box visible.

This version wasn't used in the end (I created about 6 different versions), so feel free to clone!

CityPad

Citypad Layout

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

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)

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

My client wanted a modern, clean, simple website that took the prospect through a simple narrative, describing exactly what the business does, how it benefits them and why RES are the right leaseplan & floorplan specialists to use. 

With this in mind, I created a 2-page website, with all of the main content on the first page and an about us page on the second. Animations were implemented to make the content come alive, but nothing too hectic was added to ensure the focus was on the actual content. I coordinated all of the professional photography, edited the photos to all fit the theme, created a colour palette for the website, retouched all the logos and built the whole thing up from scratch without any templates. 

This is my first of hopefully many projects in Webflow! Please let me know what you think in the comments.

RES-London

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

Simple and transparent website design for a window cleaning company in the UK.

LT Home Solution & Window Cleaning

LT Home Solutions - Window Cleaning Website

Brand new website just launched, to showcase our motion and web design portfolio.

ENERGI.DESIGN

Energi.design Portfolio Site

Brochure site for lead generation agency Grow Savvy.

Grow Savvy

grow-savvy

This is a site for a client who runs a beauty parlour and required new branding and a website for their skin treatments and services.

Discover england websites built by the Webflow community

Discover england websites built by the Webflow community