Zoe

 A green space invader

Branding

Colour Palette

A set of HTML brackets that are dark blue

Dark Blue | #023777
Used as an accent color.

A set of HTML brackets that are light blue

Light Blue | #45ADA8
Used as a main titles color.

A set of HTML brackets that are bright red

Red | #FE4365
Used as a highlight colour.

A set of HTML brackets that are bright light green

Light Green | #9DE0AD
Used as a secondary title color.

A D20 dice that is grey on a whtie background

Grey | #7F7F7F
Used as a body copy color.

Fonts

Header - Jura

Header - Jura

Header - Jura

Roboto is the font used for body copy.

Interactive Elements

In-text link

CSS selector:

.in-text-link

Sample code:

<p> This is an <a class="in-text-link" href="#">in-text link</a> example </p>

Rendered element:

This is an in-text link example.

Navigation Button

CSS selector:

.button-nav

Sample code:

<a href="#" class="button-nav">Default Button</a>

Rendered element:

Nav Button

Submit/Reset Buttons

CSS selector:

.button-submit

Sample code:

<a href="#" class="button-submit">Submit</a>

Rendered element:

Submit

Text Input Field with Label

CSS selector:

.input-label, .labelled-input

Sample code:

<label class="input-label" for="form-name">Name:</label> <input class="labelled-input" type="text" id="form-name" placeholder="Jane Doe">

Rendered element:

Radio Button with Label

CSS selector:

.labelled-radio, .radio-label

Sample code:

<class="labelled-radio" input type="radio" id="option1" name="example" value="yes" checked> <label for="option1">Yes</label> <class="labelled-radio" input type="radio" id="option2" name="example" value="no"> <label for="option2">No</label> <class="labelled-radio" input type="radio" id="option3" name="example" value="maybe"> <label for="option3">Maybe</label>

Rendered element:

Select an option:




Image as a Link

CSS selector:

.img-link

Sample code:

<a class="img-link" href="https://zoets.cs"> <img src="img/organ.jpg" title="Reorganized Organ" alt="An image of an instrument"></a>

Rendered element:

An image of an instrument

Text Elements

Headings

CSS selector:

.heading

Sample code:

<h2 class="heading">Heading 2</h2> <h3 class="heading">Heading 3</h3> <h4 class="heading">Heading 4</h4> <h5 class="heading">Heading 5</h5>

Rendered element:

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS selector:

p

Sample code:

<p>Lorem ipsum...</p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer est libero, tincidunt non cursus eget, imperdiet sit amet ante. Aliquam et sodales magna. Nam ac vehicula arcu, maximus gravida ex. Mauris aliquet eget risus a molestie. Suspendisse posuere vehicula velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare justo lectus, ac tincidunt metus porttitor vel.

Numbered Lists

CSS selector:

ol, li

Sample code:

<ol> <li>Item one</p> <li>Item two</p> <li>Item three</p> </ol>

Rendered element:

  1. Item one
  2. Item two
  3. Item three

Combined Elements

Main Navigation

CSS selector:

.navigation .navigation-item

Sample code:

<ul class="navigation"> <li><a class="navigation-item" href="#">Home</a></li> <li><a class="navigation-item" href="#">About</a></li> <li><a class="navigation-item" href="#">Contact</a></li> </ul>

Rendered element:

Citations