Explore the Transhumans gallery one-pager. It's a simple and beautiful space, built with a CSS grid and powered by a CMS. You can customize each item with different URLs, and all the images are CC0, so use them as you like. Best of all? The entire site is clonable. Feel free to take it, tweak it, and make it your own.

Enjoy!

Transhumans

A one-pager for Robotos, an NFT collection of friendly droids.

Robotos Landing Page

A web teleprompter using the marquee HTML tag that does an OKish job. 
Use it to record those scripts u don't wanna memorize.

Made in collaboration with Pixel Geek
Inspired by this tweet: https://twitter.com/AdrienneTacke/status/1385386687841198080

ShittyPrompter

Crazy one-pager filled with scroll-based animations, GIFs, colors, and predictions into the future! 

It's kind of a mess, to be honest, but feel free to clone it, inspect it, and do whatever u want. The stars are on your side, bebé!

Pablito Planeta Landing Page

A simple pad with sound effects for your Clubhouse rooms. It uses a lot of custom code, so make sure to inspect that stuff to create your own :)

Clubpad - Clubhouse Soundboard

Use this as a starting point for a random idea generator. The concepts are collected from different collections and create a sentence.

The original site was designed to combat artist's block. You could use it for other creative stuff!

Original: https://www.doodlestrudel.com/
Need doodles? Try Blush: https://blush.design/

doodle-strudel-random-generator

A one-pager for an illustration collection from Blush called Dayflow. Feel free to copy, inspect, remix this page and make it your own!

If you want to create your own illustrations, you can use Blush https://blush.design/

All artwork by Pau Barbaro. Check out her illustration collection here:
https://blush.design/artists/pau-barbaro

Dayflow Illustration Landing Page

This is a simple one-pager in black and white. 
- Full height hero
- Sections for value props that expand to full width.
- A how-to section using a grid
- A CMS collection using a grid (so nice)
- And a footer with images fixed to the bottom.

I combined a display serif called Tiffany for headings and a geometric sans called DM Sans for the body. I think they make a nice combo. Tiffany is a paid font. If you want a Google equivalent, try DM Serif Display or Abril Fatface.

Disclaimer: My naming conventions are horrible. Maybe you can do something better. Lol.

--- 

I made this for Open Peeps—a hand-drawn illustration library packed with doodle building blocks. You could use them in product imaging, marketing, comics, product states, user flows, personas, storyboarding, quinceañera invitations, or whatever you want!

open-peeps-landing-page

Just a simple list with filters and sorting using MixItUp.

Design Conferences List

Suuuuper simple landing page leading to a google form. Not very imaginative.

Destroy My Design

This page shows containers in which the proportions (or aspect ratio) remain the same, even when their size changes. This is possible by changing the top padding to a percentage, which is based on the width of the container. 

Yeah, this sounds super weird, but it works! Try it by resizing this window.

If you have a suggestion on how we can make this more useful, please leave a comment!

aspect-ratio-boxes

Playing with Rotational Parallax and illustrations from Open Doodles
https://www.opendoodles.com/

rotational-parallax-illustrations

A friend had a question about using a grid with different layouts for collections. 

My suggestion was having different lists with different layouts for every row. Plus some sorting and filtering magic. Not very elegant but does the trick!

Clonable site:
https://webflow.com/website/Quick-Demo-of-Collections-with-Different-Layouts

See video tutorial here: 
https://youtu.be/ohU71THlpGg

See the tweet the sparked the conversation:
https://twitter.com/RockyRoark/status/1185406083155689472

Quick Demo of Collections with Different Layouts

This is the site is an example of how to use an illustration library called Open Doodles. If you want to see that project, go here (also clonable) https://webflow.com/website/open-doodles

This is just a one-pager using different layout methods for different sections. I also added some scroll-based animations to the illustrations to create some parallax goodness.

There's also a video walkthrough in which I create this page, in case you wanna see that: https://www.youtube.com/watch?v=dBNerBMbuNk

Feel free to use this site however you want. You can copy, edit, remix, or clone the site and these images for any personal or commercial use.

If you have a suggestion on how to improve this website, I would love to hear it.

Landing Page with Illustrations

This is the site for an illustration library called Open Doodles. It uses a combination of CSS Grid, Flexbox, two CMS collections, symbols, and hover interactions! Making it clonable in hopes others can use it as a starting point or as a way to learn new tricks.

Feel free to use this site and illustrations however you want. You can copy, edit, remix, or close the site and these images for any personal or commercial use.

If you have suggestions on how to improve the website, I would love to hear them!

Open Doodles Site

Just a simple newsletter landing page with a form connected to Mailchimp.

another-design-newsletter

Humaaans is a free library to mix-&-match illustrations of people. You can customize their positions, clothing, colors, and hairstyle to create some cool scenes. You can add backgrounds and use the power of libraries to make it your own 💈

Humaaans

Recreated Piet Mondrian's “Composition with Large Red Plane, Yellow, Black, Gray, and Blue” in CSS Grid using @webflow

It turns out Mondrian used a 16x16 grid too. Lol

Pablo Stanley

About

About

About