← Back to home
Stage

Designing with the grid and Flexbox

A div of 140px
A div of 300px
A div of 160px
A div of 160px
A div of 160px
A div of 160px
Fall
The fall season brings colder temperatures and frost. Corn is one of the crops that is harvested in the fall. In addition, some children enjoy trick or treating on Halloween night. Furthermore, in the fall season there are animals that prepare for hibernation by eating a lot in order to store up enough body fat to live on through the winter months.
Winter
Winter brings snow and ice for many people in the world. Evergreen trees are brought inside homes and set up for Christmas celebrations. Bears have gone into hibernation and most trees have lost all of their leaves. Shoveling snow and building snowmen are two common activities of the winter season.
Spring
In nature, the spring season is a time of renewal. Trees begin to bud and flowers bloom. Easter egg hunts are held in the springtime to celebrate the season. Rainy days help the growth of the flowers, grass, and trees during the spring.
Summer
For many students, summer is a time of relaxation and a break from schoolwork. The Fourth of July is celebrated in America with parades and other outdoor activities. The long days of summer allow for lots of time with friends and family. Summer is a common season for thunderstorms that are both powerful and exciting to see.

Grid design

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem .

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam mi quis viverra varius enim in eros elementum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. 

Layered fonts

2020 Webflow Features Wrap-up!

2020 Webflow Features Wrap-up!
2020 Webflow Features Wrap-up!
2020 Webflow Features Wrap-up!

Pre style in Rich Text element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually.

I'm a H6, the next p will be pre

I'm the next p, I should be pre :)

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. 

The CSS of my custom pre-paragraph (H6)

h6 + p {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 70 px;
border-left-style: dotted;
border-left-width: 10px;
border-left-color: rgba(0, 0, 0, 0.0470588);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;   background-color: rgba(255, 255, 255, 0.478431);
font-family: Inconsolata, monospace;   color: rgb(36, 34, 32) !important;
font-size: 16px;    line-height: 23px;
}

Master position:absolute

3D
The plague of the zombies
At Central Station Theatre,
Springfield, MA
Special diffusion in 3D Anaglyph
Only Staurday and Sunday nights, book your seats in advance!

The perfect message box

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Align DIVs

display:block DIV with no dimensions
25% width
25% width
25% width
25% width

Show hide a DIV

Hide the poem

عُبور

عُبورالعاصفة التي لا تصادف
في طريقها شيئاً
تَنفُقْ
والجُمَل القصيرة
أجمل وسيلة لعبور المحيطات.

Target an element with a combo class

Change opacity of all shapes
Change opacity of green shapes
Change opacity of colored shapes
Reset all

CSS Transitions with Backgrounds

I'm the perfect button
Click me, hover me, hear me!
Game On!

The Game On button is made with custom code.
You can grab the code here.

Add sound on click

I'm the perfect button
Click me, hover me, hear me!

Embed anything in RT

This is a Rich Text element with embedded rich content

Webflow's Rich Text element can be filled with text, lists, links, videos and images, but also rich content from other sites and services. Actually, it can embed everything that the embed.ly service supports.

 
 
This is a H6 Title

/* The button properties */
.new-print-button {
background-color: rgb(40, 194, 127);
background-image:               url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5840549e41ed56e151574a8c_print%20button%20icon%203-white.svg), url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5840549e316b850d0aa56057_print%20button%20icon%202-white.svg);

‍