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

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

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

Card Design Web Desire

card-design-web-desire

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

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

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

Digital Computer Arts

digitalcomputerarts4

****** Divisions now supports the new 3 larger breakpoints ******

We all know the limitations of using the native column component in Webflow. That's why I created "Divisions". This framework allows you to arrange your content based on divisions of 12, 8 and 5 columns.

✅ Easy-to-use and flexible
✅ Responsive
✅ Larger-breakpoints (Divisions support the new 3 larger breakpoints).

Please share some love ❤️ if you benefit from this clonable project.

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

Todos conocemos las limitaciones del componente "Columns" nativo de Webflow. Por este motive he creado "Divisions". Este framework te permite organizer tu contenido en diviones basadas en 12, 8 y 5 columnas.

✅ Flexible y fácil de user.
✅ Responsive
✅ Larger-breakpoints (Proximamente con el lanzamiento de esta nueva característica en Webflow).

Por favor, considera dejar un like ❤️ si te beneficias de clonar esta proyecto.

Fast Layout

Divisions

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.

UX Conf 2021

UX·Conf 2021 — Dribbble Rework

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

Layout is based on Lubalin 100 project. I tried reaching the same layout, it's rough, but the basic concept working. Plus, there are other experimental layouts below the student names.

This whole page is should work as a starting point for my Typo class students at METU Budapest.

It's an ongoing project.

Discover .css-10iahqc{text-transform:capitalize;}layout websites built by the Webflow community

Discover layout websites built by the Webflow community