Discover the best layout websites created by professional designers. Get inspired and start planning your perfect layout web design today!

Freebie Editorial Project for the Webflow's community

----

Check the original version (The current version has been simplified):
https://em-design-freebie-v2.webflow.io/

My Folio:
https://emportfolio.webflow.io/

Editorial Freebie [Simplified]

Editorial Freebie [Free Version]

10 reusable modern CSS grid layouts inspired by tile patterns, along with 8 tasteful animations. Fully responsive and copy/paste ready for your next project!

CSS Grid Tiles

BuildBites

Built the design by Hrvoje Grubisic in Webflow! Check it, clone it!

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

Rich Music Website

Webflow build | Rich Music Website by Hrvoje Grubisic

Hey guys! I tried to recreate Tran Mau Tri Tam's Dribbble post using Webflow. I really like his work and it just inspired me to try his designs on Webflow. Here's the link to the original post: https://dribbble.com/shots/5130341-Travelers-II

All credit goes to Tran Mau Tri Tam. As per usual, feel free to clone it and have fun with it.

Travelers II

Traveler II — Dribbble Rework

Hello again! This time, I tried to recreate Jake Sunshine's Dribbble post using Webflow. He is a Swedish designer specialized in eCommerce. I really like his work and how minimal his style is. Here's the link to the original post: https://dribbble.com/shots/5907864-Deteriorate-PDP-Exploration

Feel free to clone and play around with it. All credit goes to Jake Sunshine.

Deteriorate

Deteriorate — Dribbble Rework

Landing Page design for Desktop Vision 
It is designed to be simplest and easiest remote desktop software to use. It also supports WebXR which allows you to project your desktop into augmented or virtual reality.

Full website: desktop.vision

Desktop Vision

Desktop.vision

A small function to animate each character of a text using CSS Keyframes.

Text Animation is a vanilla function to animate every single character of a text sequentially.

Inspired by the text effects introduced in the Once Upon a Time in Hollywood Mag.

Learn how to use it on Github: https://github.com/happycrappie/animateText

AnimateText Effect

Animate Text Preview

We build the design by the talented Hrvoje Grubisic in Webflow. Check it out!

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

Future Research - bb

Webflow Build | Future Research by Hrvoje Grubisic

Hey :)
This is my Idea for a Webflow Pro User Version.

Whats New?
- Facelift
- Edit Breakpoints
- New CSS
- Code Editor

Please let me know, what you think :)
Fell free to clone this and add your favorite new functions.

Sry for this Quick and Dirty Work but I hope you understand what I mean 😅


@webflow

Webflow Pro

THE NEW WEBFLOW PRO

Card Design Web Desire

card-design-web-desire

Playing around with creating a fold out A5 card on the web. Using mouse movement and absolute positioning with a simple x-axis mouse movement interaction. All images can be found @jacob.robinson.

Fold out test

fold-out-test

We built design by Vilius Vaicius in Webflow! Check it out!

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

Landing page web design & interactions-bb

Webflow build | Landing design & interactions by Vilius Vaicius

A simple one-pager with a grid of teasers and full nodes as hidden panels. Both the page and the panels are scrollable vertically. There is still an issue with double elevators that I wish I could resolve.

There are two things to consider when reviewing this work:

1/ The teaser + panel is one element with one reusable interaction. It means you can duplicate it and it will continue to work without interferences. That was not easy to do. That's why the clising button is outside of the element and works for every element.

2/ Check the Dashboard page: as the full node panels are hidden, it can be tedious to edit. So the content of the panels sits in a div that is transformed to a Symbol. This page hosts all the symbols so the edition of the pages is way easier. There are many occasions where you can use Symbols for difficult to access content, so you can create a dashboard page for it.

Clone it, make it better! Check in the comments about how to licence the images for yourself.

People Wish - Layout

People Wish - A layout with Webflow

Achieve Pinterest-style layouts for your CMS collections by changing just 2 style properties. Ideal for image galleries or unsorted CMS collections.

Easy masonry

Easy Masonry (Pinterest style layout)

Hey there!👋
We rebuilt a homepage of gettala.com with animations in Webflow.

Desktop only. Use it freely! :)

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

Tala

Tala clone

Digital and Computer Arts is an on-line mobile friend journal that showcases the best digital designers and their stories.

Digital Computer Arts

digitalcomputerarts4

Watch the tutorial at https://www.youtube.com/watch?v=aHeG-XDiEDs

MRstudio

Heyo! Recreated one of my old Dribbble shots in a couple of hours. You can check the original shot here: https://dribbble.com/shots/5367935-UX-Conf-2019-Buenos-Aires-Layout-Exploration

As per usual, feel free to clone and use and reuse or repurpose.

Discover layout websites built by the Webflow community

Discover layout websites built by the Webflow community