A refresh redesign of the TimeFrame app. This project was built a few days before I joined Webflow Team.

TimeFrame

Hey! 👋

Here's a exploration using custom dropdowns built using IX2.

This should be a great starting point for you to refine and edit this for your own projects.

Please note this component is not production ready.

Inspired by @ryry.io

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under CC0 (Unsplash, Pexels, Freepix or Similar)
⦿Typography available under SIL Open Font License 1.1 (Inter)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Flowbase - Dropdown Menu

I tend to like simple sites, with easy and intuitive UI. But, this site is admittedly not that. I just wanted to try out some interactions that I didn't see too many people doing. It's a work in progress, any constructive feedback is welcome and appreciated. There is a little bit of custom code to delay page transition from home page, but other than that it's all made with Webflow interactions. And if you find the easter-egg, you find the upside-down.

ladybugonarainbowwww

An interactive glitch

Flowbase is the largest Webflow resource site for Webflow Experts and Beginners. Cloneable Assets, Templates, Guides, Videos & more.

⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

Flowbase | Webflow Assets & Tutorials

Newspaper grid

Cards 2.0 are Symbol based Framework/UI Kit for quick design or wireframe of your next landing page project. 100+ symbols/elements ready for design or hi-fidelity wireframe for any UI/UX designers or developers out there. The main goal of this project is to help you - Webflow users - with creating beautiful landing pages or wireframes within minutes directly in Webflow with ready to be published code. All again with a coded styleguide for all the main typography elements (H1-H6, links, paragraphs etc.) buttons, tags you name it. 

What you get/Package overview:

50 New Cards as Webflow Symbols (in 2 versions Dark and Light = 100+ Symbols)
3 Complete landing pages in 2 versions
Symbols for Hero sections, Features, Testimonials, Pricing, Team, Blog and more.
Ready for all 4 responsive breakpoint 
Cards from v1.0 recreated into a new structure
All cards in Sketch file

Happy Cloning! 🎉

Cards 2.0 - Framework/UI Kit

We built this animation for the hero of our page on prototyping, and after a flurry of requests, have decided to make it cloneable for you to pick apart, tinker with, and try to recreate for yourself. Enjoy!

pong-animation

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

The issue with common templates is that they offer a predefined UX and UI, while designers usually only need white-labeled building blocks when they start a project.

I couldn't find anything like this in the templates marketplace, so decided to build my own responsive wireframe kit.

The aim of this kit is to allow Webflow designers create wireframe prototypes directly in Webflow, ideally skipping Sketch and Invision. 

The great thing about using Webflow is that the wireframes can be turned into the final product. How cool is that? Efficiency over 8000!

I worked on this for over 120 hours, so if you use it, please consider a donation ^^ https://www.paypal.me/dariostefanutto

Thanks for your support and don't forget to subscribe to my account! I'll add more free templates.

-Dario

Legowerk

I have wasted lots of time over the years exploring all the css easing options that Webflow offers. That being said, I decided to make a one-page guide that conveniently displays all ease options at once. Feel free to clone it!

I hope this is helpful to you! Updated April 2021.

Webflow CSS Easing Visualized

I do a lot of reading on my laptop and tablet. The ability to change the background-color and font-color on demand keeps my eyes and/or head from aching. If you have late night readers on your sites, they might thank you for implementing something like this. It's exceptionally easy to do with Webflow.

I made the CSS sun and moon for fun. In real life, I would use a much smaller toggle that follows the reader the down the page.

Night Mode for Blogs & Articles | Cloneable

This is a responsive dashboard I put together and it was based on a dribble post that you can see here:

https://dribbble.com/shots/3781660-Dashboard-Meeting

Divan's design is beautiful and I was excited to recreate it in Webflow!

Responsive Dashboard

The Webflow Editor is pretty intuitive, but that doesn't mean clients couldn't use a handy reference work on it. Which is why I built this site, and am now making it free to clone. 

So go ahead: clone it, customize it, share it with your clients. 

And if you or your clients have feedback on how I could make it even more useful, please let me know!

The client's guide to the Webflow Editor

Experimental multi-step form created with the Webflow slider component.

Clone-away!

Multi-Step Form

Had the inspiration after seen a Win 95 UI kit, come to find out there is countless Windows 95 emulators and flash simulators around the web but there wasn't really any good HTML versions that functioned well. Everything was done strictly in WebFlow with the exception of the draggable windows being some basic Jquery,

This is one of those never ending project and i'm sure i'll just keep adding to it over time, anyways hope you enjoy exploring it! Constructive criticism is always welcomed! =)

**PLEASE NOTE** It is recommended you view the project on a monitor and not from a laptop, i've noticed that It does not fit well, currently, on the smaller screen due to all the absolute positioning I had to use. Thanks!

Windows 95 HTML Recreate

Interactive scrollable 3D isometric Grid. 
Build 100% in Webflow. 
Inspired by Codrops Article (http://tympanus.net/Development/IsometricGrids)

3disometric-grid

Feel free to clone the button!
I'd love to see how you're using it, so please comment with a link to your website if you use it :-)

Joseph Amato

About

Skills

About

About