Hello World! Let's try a few things…
Full Page Sub Index
Responsive
Built-in responsiveness
Mobile first fluid grid
Fits any screen sizes
PC Tablet and Mobile
Standard CSS
Standard CSS only
Easy to learn
No need for jQuery
No JavaScript library
Design
Paper like design
Bold colors and shadows
Equal across platforms
Equal across devices
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
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
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
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.
Pagination
Pico Table Of Contents Plugin
- Full Page
- Responsive
- Standard CSS
- Design
- Color Classes
- Built-In Responsiveness
- w3-half - 1/2
- w3-half - 2/2
- w3-third - 1/3
- w3-third - 2/3
- w3-third - 3/3
- w3-quarter - 1/4
- w3-quarter - 2/4
- w3-quarter - 3/4
- w3-quarter - 4/4
- Containers
- Header Element
- About London
- Footer Element
- Color Themes
- Theme Indigo
- Movies 2014 - Indigo
- Frozen - Indigo
- The Fault in Our Stars - Indigo
- The Avengers - Indigo
- Theme
- Movies 2014
- Frozen
- The Fault in Our Stars
- The Avengers
- Theme Red
- Movies 2014 - Red
- Frozen - Red
- The Fault in Our Stars - Red
- The Avengers - Red
- Theme
- Movies 2014 - Teal
- Frozen - Teal
- The Fault in Our Stars - Teal
- The Avengers - Teal
- Paper-like Cards with Shadows
- Tables
- Forms and Lists
- Input Form
- Lists
- Progress Bars
- Slideshows
- Navigation
- Accordions
- Tabs
- London
- Paris
- Tokyo
- Buttons
- Pagination
- Pico Table Of Contents Plugin
index.mdSite Navigation
Important Notices and Disclaimers
By using links on thewebshoppe.ca web site, you understand that thewebshoppe.ca network may provide, or third parties may provide, links to other World Wide Web sites or resources. Becausewebshoppe.ca has no control over such sites and resourceswebshoppe.ca is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any Content, advertising, products, or other materials on or available from such sites or resources.
This website is hosted, owned, operated and administered in the soveriegn country of Canada and subject to the laws, rules and regulations of Canada. By using this website you acknowledge you are allowed to view the contents of this site in your location.
If you find any listing that contains dead-links, errors, incorrect or misleading information or notices as required by law please report it to the network administrator so that it can be corrected or removed. This directory is a human edited resource and we are not responsible for spelling or typographical errors and/or omissions but we will fix them upon notice.
Twig Tests
Three quarters of the first section.
Last quarter of the first section.
Two thirds of the second section.
Last third of the second section.
First Level Navigation Tree
The w3-third class uses one third (33.33%) of the screen widow.
Raw Navigation Tree
On small screens (max 600 pixels) it automatically resizes to full screen width.
Twig Macro Navigation Tree
from: http://picocms.org/in-depth/features/page-tree/
Random Navigation Tree
random flat nav menu w/ active
Pico Navigation Plugin
from: https://github.com/ahmet2106/pico-navigation
Pico Pages List
Pages
ArrayNested Pages
from: https://github.com/nliautaud/pico-pages-list
Pico Page Tree Plugin
from: http://picocms.org/cookbook/
TOC Plugin
This plugin has to be used in the page .md file.
Pico's pages() function
http://picocms.org/in-depth/features/pages-function/
root nodeArraypagination Plugin
This plugin has to be used in the page .md file.
current page's tree nodeArray