Terms and Conditions (Headline Example)

Centered Subhead 1 Example

Column Name  /  Leftside Subhead1

Vestibulum ut ante gravida, elementum dui at, suscipit nisl. Nam id facilisis felis, at facilisis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultrices, lectus at consectetur semper, tellus tellus aliquet lacus, nec bibendum mauris ligula vitae massa. Proin tincidunt nibh vitae vestibulum sodales.

Nunc sagittis augue tortor, eget ultrices metus suscipit sit amet. Duis fringilla ultrices eros, sed vehicula dolor. In molestie fringilla accumsan. Nunc suscipit urna quis magna tincidunt, vel porta felis tempor.

Column Name  /  Subhead 1 (Leftside)

Vestibulum ut ante gravida, elementum dui at, suscipit nisl. Nam id facilisis felis, at facilisis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultrices, lectus at consectetur semper, tellus tellus aliquet lacus, nec bibendum mauris ligula vitae massa. Proin tincidunt nibh vitae vestibulum sodales.

Subhead 2 (leftside)

Nunc sagittis augue tortor, eget ultrices metus suscipit sit amet. Duis fringilla ultrices eros, sed vehicula dolor. In molestie fringilla accumsan. Nunc suscipit urna quis magna tincidunt, vel porta felis tempor.

Column Name  /  Leftside Subhead1

Vestibulum ut ante gravida, elementum dui at, suscipit nisl. Nam id facilisis felis, at facilisis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultrices, lectus at consectetur semper, tellus tellus aliquet lacus, nec bibendum mauris ligula vitae massa. Proin tincidunt nibh vitae vestibulum sodales. Nunc sagittis augue tortor, eget ultrices metus suscipit sit amet. Duis fringilla ultrices eros, sed vehicula dolor. In molestie fringilla accumsan. Nunc suscipit urna quis magna tincidunt, vel porta felis tempor. Quisque vehicula, nulla quis finibus efficitur, quam diam hendrerit lorem, eu mollis dui magna ut nisl. Nam non risus ac purus facilisis porttitor. Duis ac sollicitudin urna, at vestibulum diam.

Typefaces used:

 

The Grid System

Formula: ((1360 - 60 x 2) - 32 x 11) / 12 = 74 px

Current grid system has 12 columns (most flexible) and is applied to the common screen resolution today, which is 1360 px. The gap between those columns is 32 px, resulting the size of a column of 74 px width. Margins (left and right of the screen: 60 px.

74 px

180 px

286 px

392 px

604 px