Fitness Pro

Inspired by Airbnb, exploring new layout techniques. Clone, modifier and let me know what you think.

Travel Header

Exploring the power of Grids, this layout has many bugs - clone and fix pls; it's mainly for learning purposes. Let me know what you think.

Discover Amsterdam Layout Grid

Clondon - free asymmetric layout, original dribbble design by Hrvoje Grubisic.

Free responsive asymmetrical layout Clondon

My attempt to create spotify desktop app in webflow, not perfect but decided to share it with the world. Let me know what you think.

spotify-desktop-app

A simple one-pager, just experimenting with some new styles. Feel free to clone and use for your personal projects.

Actual design was found on dribbble.

designlancer

Hatch is a utility framework for Webflow that is made up of over 2,200 low-level utility classes, helping you work super fast.

Font sizing + spacing scales down automatically on each breakpoint so it's fully responsive out of the box.

If you want to use a style (or override a style) at a specific breakpoint, add a breakpoint class starting with Tablet, Landscape or Portrait. 

- - - - 

Watch a demo of me building with Hatch here: https://youtu.be/SgmapsRTgVo

Be sure to checkout the documentation to see which classes are available: https://www.notion.so/Hatch-0d4a03cf6c9f474787e59484822d09c7

(Official + searchable documentation site coming soon). 

I'd love to hear what you think! If you have any thoughts and/or ideas on how I can make Hatch better please let me know! Hit me up on Twitter (https://twitter.com/mackenziechild) or email me mackenzie@flowmingo.co.

Hatch - A Utility Framework for Webflow

A simple one-page CSS grid website, feel free to clone and improve on it.

Simple one page website

A style guide template that you can use to jumpstart your next Webflow project and speed up development time.

There's a little bit of custom code in the page settings. The CSS stops the default grey box 'flash' from happening when you click the return-to-top button on mobile. And the JS function stops the return-to-top button from entering the footer at the bottom of the page.

If you have any questions, then please feel free to message me on Twitter → https://twitter.com/Oli_Timmis

Style Guide Template

Webflow launched Maker Day, a 24 hour remote design-a-thon aimed at creating a working website or prototype.

So I redesigned and prototyped Zoom and placed it within a sneak peek of my upcoming rebuild of MacOS Big Sur. Clone. Learn. Enjoy!

Watch My Demo - https://youtu.be/pDT2VG1jPfQ

Protocore Original →  Zoom Redesign

Responsive Webflow Style Guide Clone

Was a little worried that I wasn't going to be able to achieve this effect; the left rail of photos moving with the slider, the text being yellow over the images... it all seemed impossible.

But, as I am constantly finding out, nothing is impossible in Webflow. Made purely with CSS, Interactions, and alot of messing about. Particularly proud of some of the smaller viewport accommodations.

Clone away, and let me know what you think in the comments, or if you're interested in knowing how I made this project come to life.

Strive, "Plaid Dress": https://dribbble.com/shots/6711696-Plaid-Dress

Dynamic Hero Slider! - Dribbble Series ft. Strive

Welcome to Dribbble series, where I attempt to bring to life projects created by popular Dribble artists using only the elements supplied by Webflow! Todays project is web design 04 - Photo Studio by Romeo M. • https://dribbble.com/shots/5593011-web-design-04-Photo-Studio

In my freelancing using Webflow, 95% of my work involves creating crazy, weird sliders that accomplish certain goals. This project is peak slider; displaying information, using grid, with customizations applied to the snide nav, arrows, & content.

For this project, I opted to change a few things that didn't make sense. For example, there were 3 different places in the page where social links were listed, which felt like overkill. I also nixed the mouse icon in the prev/next section, as the slider doesn't let you interact like that. Clone away, and let me know what you think in the comments! Be sure to download the Fontawesome font family to make sure the icons work (https://fontawesome.com/cheatsheet)

CSS GRID HERO 2 - Dribbble Series - web design 04 - Photo Studio

Making this utility work on desktop and mobile was no joke...

Basic Details:
- Clean, meaning no janky transitions at each 90 degree angle
- 100% Webflow (no custom code)
- Cross-browser and device compatible

*Since this is using native Webflow interactions (ie no clip-path / masking), it cannot be used on pages with background images (the inner circle will not be transparent)

Also included are custom JS implementations using SVG (including back-to-top functionality, courtesy of Ivan Grozdic)

John Iseghohi

About

Skills

About

About