Check out our list of the most popular responsive websites made with Webflow by professional web designers.

A keyboard-activated (⌘ + K) menu with arrow navigation.

Had a ton of fun building this project and after some great feedback, wanted to put it out for the community. Most of the functionality comes from the page code in the <head> tag, here's a quick breakdown of the four sections, courtesy of ChatGPT:

1) Initialization: Waits for the HTML and CSS to load before identifying 'modal' and 'closeButton' elements through IDs.

2) Keyboard Toggle: Listens for 'Command/Control + K' key press, toggling the 'modal' element's visibility between 'display: none' and 'display: flex'.

3) Close Button: Assigns functionality to a 'closeButton' element, working seamlessly with the keyboard toggle.

4) Arrow Key Navigation: Disables default arrow key behavior and focuses navigation on modal links, customizing the focused state for accessibility. Exclude links by assigning them the 'ignoreLink' ID.

Apply the 'modal' ID to the content container and 'closeButton' ID to the close element.

Enjoy, Will

Command Menu (⌘ + K)

Watch lesson at https://www.timothyricks.com/resource/css-hover

Design from https://k72.ca/en/about

CSS Hover

Cloneable Responsive Website Mockup. A responsive iframe browser mockup that displays your live website and toggles desktop and mobile views.

***NOTES***
There are code scripts in the header and footer and within the document as follows. The page header includes custom CSS classes and the footer includes a script. To update the URL navigate to the HTML embed where you will find an iframe. Change the URL within the SRC attribute.

<iframe class="iframe-settings" src="https://yoururlhere.com" title="description" loading="lazy"></iframe> 
<style>.iframe-settings {width:1366px; height:788px; }</style>

Cloneable Responsive Website Mockup

Cloneable Responsive Website Mockup. 

Mast is a lightweight, developer-first framework of essential classes and strategies to help you build efficiently for any brand and scale.

Learn more and read the docs for it here: https://www.nocodesupply.co/mast

Mast

Mast <> A CSS Framework for Webflow

Create a more dynamic and interactive experience for your users by using a simple cursor animation made using Cuberto Mouse Follower and GSAP. 

Free to Clone and experiments. Follow for more and visit my profile for more such interactions and cloneables. 

Thanks! 

MovingCursor

Smooth effects for the mouse cursor with Text and Video on Hover using JavaScript

Watch tutorial at https://www.youtube.com/watch?v=FkvImc0l9zU

Design from https://k72.ca/en/about

Scroll Switch

Scroll-Based Item Toggling in Webflow

(Free Clone) 
My Cartier design from the Relume Design League brought to life through slick animations and interactions. 




Cartier Watches

In this cloneable, Lukas shows us how he shrinks a navigation in Webflow once it reaches a certain point while scrolling. In this case as soon as the next section arrives at the navigation. In addition, the design of the navigation changes from dark to light and the next section over scrolls the first. 
No custom code is needed for this. It is all solved directly with the Webflow interactions.

Tutorial: https://youtu.be/0ZkoNovZlFY

Shrink Nav on scroll + overscroll Section Effect

Shrinking Nav on scroll + overscroll section effect

Finsweet

Project lead form created with Finsweet Accessible Components and Client-First naming convention.

-> https://webflow.com/libraries/detail/accessible-components
-> https://finsweet.com/client-first

Project Quote Accessible Form

Punchlist

Punchlist and Flow Sparrow have to come together to give you a free Knowledge Base cloneable. This means that you can use Punchlist’s knowledge base in your own project! Simply download the cloneable, add it to your project, style and publish. 

For any feedback on the site, reach out to info@flowsparrow.com


https://punchlist.com/
https://www.flowsparrow.com/

Punchlist Docs

Knowledge Base By Punchlist and Flow Sparrow

Edgar Allan

Native Webflow Scroll interaction using YouTube API to pause the video when the user scrolls back up or down.

-------------------------------------------------------------------

This clonable is created by the folks at Edgar Allan:

https://www.edgarallan.com/
https://twitter.com/edgarallanco

YouTube API + Scroll Event

Youtube API + Scroll Event

NEUE WORLD has created a Snap Scroll for your next project. Feel free to clone it and use it for your upcoming or existing WebFlow Design. Drop us an email if you ever need any assistance hello@neue.world

Snap Scroll by NEUE WORLD

This is the 21st cloneable template! 🎉🚀

All interactions are made in webflow. No custom code!

All images are from Pexels, Unsplash, RawPixel, and FreePik.

---------

👀 Find previous templates on my profile.

🎉 Follow Eurecah on Twitter to see our client work: https://twitter.com/madebyeurecah

❤️ Follow along on Twitter and know when free templates get released early: twitter.com/Tycreated

BOLD CAPITAL Cloneable Template

If you're looking for a nice cloneable portfolio that gets you up and running in no time? Look no further! Feel free to get your hands dirty with mine. 

It features:
• custom cursors 
• mega menu
• cool interactions 
• up scrolling footer effect

Feel free to use it, just a little thank you goes a long way 😊 🤘🏻

————————————————————————————————

Finally, after years of procrastinating and dreading the process I went in and followed Ben Celinsky's steps to design and build your own portfolio without hating the process. And it worked. Loved it. There's still a bunch of stuff that I would like to add but for now it's just what I needed. A nice place on the web to show my skills. Hope you like it!


Moris Design Co. Portfolio

Moris Design Co.

Design from https://ohm.studio/

Watch lesson at https://www.timothyricks.com/resource/overlapping-scroll-interaction

OHM Studio

Overlapping Scroll Interaction

Image on Hover for your next WebFlow site. We have created 5 variations on how you can create these beautiful effects. For more tools visit https://www.neue.world/webflow-tools

Image on Hover by NEUE WORLD

Image on Hover by Neue World

Solveig is a minimal & modern FREE Portfolio Webflow Template perfectly suited for freelancers, designers, agencies or your personal portfolio.

Pages
---- 
- Home
- Work (CMS)
- Work Single (CMS)
- Contact

License
----
You can utilize this template in an unlimited number of projects, including commercial and personal projects. However, you are not permitted to resell this template, include them in a product, publish them online, or distribute them under any circumstances.

Discover inspiring websites built by the Webflow community

Discover inspiring websites built by the Webflow community