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

Pretty Nice Websites

Did a rebuild for fun on the hero section of the Glasgow International site. Really liked the colors and blocky layout. https://glasgowinternational.org/

They use an image for the pattern on the right side, but I wanted to try and recreate it using just div blocks. It's all flex and absolute positioning for the stacking order. 

Instead of using the Lacuna font they use, I went with Yeseva One, which was a somewhat similar Google Font.

The scrolling section at the bottom was difficult to get the timing down. I'll continue playing with that to see if there is a better way to do that. Anyway, enjoy!

Glasgow International Rebuild

Very simple div interaction I have conjured up while stuck inside. Very bored, Very webflow.

Hero Interaction [Scroll]

Hero interaction [scroll]

A cursor addicted dog illustrated entirely from HTML <div> elements and fed a healthy diet of CSS and JS to keep him active. 

Inspired by Petter Pentilä's Dribbble shot, tweaked to resemble my own beloved pooch and built without writing a single line of code in Webflow.

Div Dog

Found this on codepen, decided to try and implement into webflow.
Super awesome animation!


Original codepen: https://codepen.io/gcyrillo/pen/aGWNWw

Geo Spin

Geo Spinning div blocks

A quick demo on how to make fixed size div's or fonts that dynamically resize relative to the viewport size

Dynamic Fonts & Dynamic Div Sizes

dynamic-fonts-dynamic-div-sizes

So Google just rebranded the g-suite apps that are called google workspace now.

I wanted to recreate them in Webflow using Div blocks only.
The result is pretty good and I learned a bunch while creating this. For instance how you can create a triangle with a div block.

Here is my YouTube video if you want to see how I made this:

https://www.youtube.com/channel/UCr3j87wwGB2NjcKNW8ibZ7A

hopefully, this will be an ongoing series called WebflowArt where I want to recreate interesting layouts in webflow and share it with the community.

You can always support me by sharing and following.

much love

Kabarza

GOOGLE LOGOS

Div Only - All Google Logos

A casual challenge to make the most out of one single DIV element using Webflow.

One single div

Just out for a spin on a new stallion made of pure carbon fiber <div> blocks with a celeste livery of CSS and JS.

Inspired by my passion for cycling and handcrafted without writing a single line of code in Webflow.

Div Bike

Hi my gorgeous friends of Webflow,

This project is meant to show that with absolutely no code or svgs, you can create a fancy broken text effect.

You only need a bit of text and some divs. Then, mix those with some move and rotate transforms, use the overflow property, and you're good to go!

Enjoy and feel free to leave a comment! :)

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Discover div websites built by the Webflow community

Discover div websites built by the Webflow community