Latitude:xx.xxxx
Longitude:y.yyyy
Altitude:zzm

# Welcome to Template 2

This is a simple page to demonstrate the use of w3.css and ows-themes in a web page.

It includes a header, sidebar menu, a grid and flexbox layout showing w3-blocks and w3-containers. Some panels include title bars using either grids or flexboxes and some panels with lines of data to illustrate hover effects. This is set to add a gradient highlight and bold text.

#### A Grid Layout

### Title

Tag

Block

### Title

Tag

###### Weather Variable

###### Reading

Temperature

-- °C

Apparent

--

Feels like

--

Block
These 9 panels are blocks and are the same colour as the page so have theme borders added.

A grid layout can be anything between 1 and 7 columns but any orphan panels always align to the left. They are always the same width (dependant on number of columns), and they can contain blocks, containers or cards - only containers have in-built padding. Title bars can be either grid or flexboxe based, grids can only contain two elements, flexboxes as many as will fit.

### Title

Tag

Card content

### Title

Tag

###### Variable

###### Reading

Pressure

--

Highest Pressure

--

Rain rate

-- /hr

Content
Content
Content
Content
Content
Content

This container is the same colour as the page so has a theme border added.
It also uses the <p> element.

#### A Flexbox Layout

##### Basic flexbox layout

### Title

Tag

Card

Card

Card

Click me:

This is an orphan panel and in a basic flexbox layout will stretch to fill the available space. Two orphan panels will stretch equally across the availabel space.

##### Fixed width flexbox layout

### Title

Tag

Card

Card

Card

Click me:

These panels use the class 'w3‐card' and therefore have is a shadow. This defaults to ows-shadow1 but can be changed by adding the class 'ows‐theme‐shadow2' or even 'ows‐shadow2‐hvr'.

A 'Flexbox' layout can also have between 1 and 7 columns but, unlike grids, any orphan panels align centrally. As for grids, they can also accept flex or grid title bars and the same limitations apply.
Unlike grid panels, flexbox orphan panels can be made to grow sideways to occupy 2, 3, or 4 column widths. This is not 100% accurate but does work effectively as can be seen below.

### Title

Tag

Card

Card

Card

This panel illustrates how a flexbox based panel can be made to grow if required.

#### Button Bars

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
All time
This year
This month

Button bars use flex boxes with all child buttons or div's set to wrap and expand into new rows as required.
In the above the buttons for 'This year', 'This month' and 'All time' have been made to grow bigger by adding the class: 'ows-stretch'.

Template design x.y by Oaktree Weather Systems

###### Powered by CumulusMX V X.y.y (b:b.cccc)

### Title

×

Some text

Some text

###### Popup

###### Powered by CumulusMX