Interactive Elements

In-text Link

Sample Code

<a href="#">This is an in-text link.</a>

Navigation Link

Sample Code


					<nav>

					     <a href="#">Navigation 1</a>

					     <a href="#">Navigation 2</a>

					     <a href="#">Navigation 3</a>

					</nav>

Text Styling

Four Levels of Headings

Heading 1 (heading)

Heading 2 (sub-heading)

Heading 3 (section)

Heading 4 (sub-section)

Sample Code


					<h1>Heading 1 (heading)</h1>

					<h2>Heading 2 (sub-heading)</h2>

					<h3>Heading 3 (section)</h3>

					<h4>Heading 4 (sub-section)</h4>

A Paragraph

I’m a fourth-year student of Simon Fraser University majoring in SIAT, School of Interactive Art and Technology..

Sample Code

<p>I’m a fourth-year student of Simon Fraser University majoring in SIAT, School of Interactive Art and Technology. </p>

Combined Elements

Main Navigation

Sample Code


					<div class="navbar">

						     <a href="#interactive-elements">Interactive Elements</a>

						     <a href="#text-style">Text Styling</a>

						     <a href="#combined">Combined Elements</a>

						     <a href="#projects">Projects</a>

						     <a href="#citation">Citations</a>

					</div>

Style Guide

Interactive Elements

In-text Link

Sample Code

Navigation Link

Sample Code

Text Styling

Four Levels of Headings

Heading 1 (heading)

Heading 2 (sub-heading)

Heading 3 (section)

Heading 4 (sub-section)

Sample Code

A Paragraph

Sample Code

Combined Elements

Main Navigation

Sample Code

Portfolio Components

Fonts

Sans-Serif

Colors

Background

Projects title

Headings