Style Guide

Interactive Elements Text Styling Combined Elements Citations

Interactive Elements

Navigation Button

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Submit/Reset Buttons

CSS selector:

.learn-more-button

Sample code:

<form method="get" action="work_1.html">
<button type="submit" class="learn-more-button">LEARN MORE</button>

Rendered element:

Text styling

Headings

CSS selector:

h1,h2

Sample code:

<h1>Heading1</h3>
<h2>Heading2</h3>

Rendered element:

Heading1

Heading2

Paragraphs

Css selector:

.p

Sample code:

<p>La Nature Epoca is a lamp inspired by the concept of blending traditional, naturally occurring forms with a touch of modernity.</p>

Rendered element:

La Nature Epoca is a lamp inspired by the concept of blending traditional, naturally occurring forms with a touch of modernity.

Combined Elements

Grids

Css selector:

.grid,.grid-col-1of3,.grid-col-1of12

Sample code:

<div>
<div class="grid">
<div class="grid-col-1of3"><p>1/3</p></div>
<div class="grid-col-1of3"><p>1/3</p></div>
<div class="grid-col-1of3"><p>1/3</p></div>
</div>

</div>
<div class="grid">
<div class="grid-col-1of2"<p>1/2</p></div>
<div class="grid-col-1of2"><p>1/2</p></div>
</div>

<div class="grid">
<div class="grid-col-12of12"><p>12/12</p></div>
</div>

Rendered element:

1/3

1/3

1/3

1/2

1/2

12/12

website colour swatches

Css selector:

.lightbrown

Sample code:

<a href="#" class="lightbrown">#af936c</a>

Rendered element:

Citations

Click herefor citation.