Inspiration
Most of the inspiration for this template came from a harbour side photo i took in geneva which was rather dull, so i gray-scaled it and matched the edge colours with the background colours of the elements. The orange links go quite well against the grey but can easily be changed to suit.
Images
There are three classes for images: 'inline' - which is not floated; 'left' and 'right' which is floated
left and right respectively. All have 5px padding on all sides. Each paragraph has a left-border 2px thick
which brakes up the page nicely.
Links
Home, links within a paragraph have a bold hover effect whilst those in the link bar have a left border which separates the menu.
Lists
Examples of both ordered and unordered list elements can be found in the right
hand top box whilst examples of varying heading sizes are shown below.
PS: To get the best effect, do not include the heading tags withing the
paragraph tags as this will upset the margins, to create the inset effect use the following
format: <H1>Heading</H1><P> Text Text Text</P>
To add drop caps around a letter: <span class='dropcap'>x</span>
Example Paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.
Example Paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.
Example Paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.
Example Paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.
Example Paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.