Demonstration Index
Color Classes
Red
Blue
Blue Grey
Teal
Yellow
Orange
Built-In Responsiveness
Resize the page to see the effect!
w3-half - 1/2
The w3-half class uses half (50%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-half - 2/2
The w3-half class uses half (50%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-third - 1/3
The w3-third class uses one third (33.33%) of the screen widow.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-third - 2/3
The w3-third class uses one third (33.33%) of the screen widow.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-third - 3/3
The w3-third class uses one third (33.33%) of the screen widow.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-quarter - 1/4
The w3-quarter class uses one quarter (25%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-quarter - 2/4
The w3-quarter class uses one quarter (25%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-quarter - 3/4
The w3-quarter class uses one quarter (25%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen width.
w3-quarter - 4/4
The w3-quarter class uses one quarter (25%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen width.
Containers
Use containers to create headers, sections and footers.
Header Element
About London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
By the way, you can add a close icon to all containers if you want the ability to hide them. Look to your right!
Color Themes
The color themes have been designed to work harmoniously with each other.
Theme Indigo
Movies 2014 - Indigo
-
Frozen - Indigo
The response to the animations was ridiculous
-
The Fault in Our Stars - Indigo
Touching, gripping and genuinely well made
-
The Avengers - Indigo
A huge success for Marvel and Disney
Theme - Current
Movies 2014 - Current
-
Frozen - Current
The response to the animations was ridiculous
-
The Fault in Our Stars - Current
Touching, gripping and genuinely well made
-
The Avengers - Current
A huge success for Marvel and Disney
Theme Red
Movies 2014 - Red
-
Frozen - Red
The response to the animations was ridiculous
-
The Fault in Our Stars - Red
Touching, gripping and genuinely well made
-
The Avengers - Red
A huge success for Marvel and Disney
Theme Teal
Movies 2014 - Teal
-
Frozen - Teal
The response to the animations was ridiculous
-
The Fault in Our Stars - Teal
Touching, gripping and genuinely well made
-
The Avengers - Teal
A huge success for Marvel and Disney
Paper-like Cards with Shadows
w3-card
w3-card-4
w3-card-4
Tables
Don't worry. W3.CSS takes care of your tables.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Adam | Johnson | 67 |
| Eve | Jackson | 94 |
Forms and Lists
Lists
- Jill
- Eve
- Adam
- Jill
- Eve
- Adam
- Steve
Progress Bars
Navigation
Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
Tabs
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.