Geneva Website Style Guide

Geneva Website Style Guide

Geneva Website Style Guide

This style guide is set up to give the user usable HTML examples of the styling that can be applied to the website. To use it, simply find the style you want (for example, a button formatted as a light grey bar with rounded corners that turns gold on hover would be under "Button Styles", and is called "centerPageLink." When using the code you only need to pay attention to the HTML--the CSS is just there to explain exactly what the style does. Simply copy the format of the HTML exactly--centerPageLink requires an unordered list with the id "centerPageList" and an "a" element with the class "centerPageLink", for example--and insert your own content or formatting.

Example HTML Container

This box denotes HTML code that has been wrapped in <pre> tags

Official College Logo Font: Futura

Web Font: Google Nunito

Example CSS Container

This box denotes CSS code that has been wrapped in <div class=cssContainer> tags. Unlike the <pre> tag, this tag resizes its content in an attempt to display all text with out a scroll bar, but will use a scroll bar if the content is too long.

Web Color Swatches:

Old Gold
#b4975b
New Gold
#daaf48
Yellow
#ffcc33
Dark Grey
#686868
Light Grey
#e1e1e1;
Black
#000