The Josh Fernandez Portfolio

The Portfolio's Style Guide

Interactive Elements

Text Elements

Combined Elements

Interactive Elements

Navigation Button

CSS selector:

.nav-item

Sample code:


                      <a href="#" class="nav-item">

                         Default Navigation Button

                      </a>

Rendered element:

Default Navigation Button

In-text link

CSS selector:

Sample code:


                      <a href="#">Default Link</a>

Rendered element:

Default Link

Submit/Reset Buttons

CSS selector:

form, .button, button

Sample code:


                      <form method="post" action="#" id="contact">

                         <input type="submit" class="button" value="Submit">

                         <button class="button"> Reset </button>

                      </form>

Rendered element:

Text Input Field

CSS selector:

form, .form-search

Sample code:


                      <form method="post" action="#" id="search-initial">

                         <label for="form-name"> Name: </label>

                         <input type="text" id="form-name" placeholder="Enter your name here.">

                         <input type="submit" class="button" value="Submit name">

                      </form>

Rendered element:

Text Elements

Headings

CSS selector:

h1, h2, h3, h4, h5

Sample code:


                      <h1>Level one heading</h1>

                      <h2>Level two heading</h2>

                      <h3>Level three heading</h3>

                      <h4>Level four heading</h4>

                      <h5>Level five heading</h5>

Rendered element:

Level one heading

Level two heading

Level three heading

Level four heading

Level five heading

Paragraphs

CSS selector:

Sample code:


                      <p>

                         Hello! I am Josh Fernandez - a fourth-year Software Systems student at Simon Fraser University, also pursuing a minor in Interactive Arts and Technology. I want to pursue a career in software engineering and front-end web development.

                      </p>

Rendered element:

Hello! I am Josh Fernandez - a fourth-year Software Systems student at Simon Fraser University, also pursuing a minor in Interactive Arts and Technology. I want to pursue a career in software engineering and front-end web development.

Bulleted Lists

CSS selector:

Sample code:


                      <ul>

                         <li>One bullet</li>

                         <li>Two bullets</li>

                         <li>Three bullets</li>

                      </ul>

Rendered element:

One bullet
Two bullets
Three bullets

Numbered Lists

CSS selector:

Sample code:


                      <ol>

                         <li>One bullet</li>

                         <li>Two bullets</li>

                         <li>Three bullets</li>

                      </ol>

Rendered element:

One bullet
Two bullets
Three bullets

Combined Elements

Colour Swatches

Blue Swatch

Default State: #1240AB; Active, Focus, and Hover States: #5777C0;

Orange Swatch

Default State: #FF7400; Active, Focus, and Hover States: #FFAA63;

Blue-Green Swatch

Default State: #009999; Active, Focus, and Hover States: #46B2B2;

Yellow Swatch

Default State: #FFAA00; Active, Focus, and Hover States: #FFCB63;

Black Swatch

Default State: #212121; Active, Focus, and Hover States: #4C4C4C;

White Swatch

Default State: #FFFFFF; Active, Focus, and Hover States: #E8E8E8;

Main Navigation

CSS selector:

nav, .nav-item

Sample code:


                      <nav>

                         <a href="index.html" class="nav-item"> Home </a>

                         <a href="about.html" class="nav-item"> About Josh </a>

                         <a href="project1.html" class="nav-item"> Social Networking Project </a>

                         <a href="project2.html" class="nav-item"> Website Project </a>

                         <a href="contact.html" class="nav-item"> Contact Josh </a>

                      </nav>

The Portfolio's Style Guide

Interactive Elements

Navigation Button

CSS selector:

Sample code:

Rendered element:

In-text link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

CSS selector:

Sample code:

Rendered element:

Level one heading

Level two heading

Level three heading

Level four heading

Level five heading

Paragraphs

CSS selector:

Sample code:

Rendered element:

Bulleted Lists

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Combined Elements

Colour Swatches

Blue Swatch

Orange Swatch

Blue-Green Swatch

Yellow Swatch

Black Swatch

White Swatch

Main Navigation

CSS selector:

Sample code:

Rendered element:

Grid Structure and Site Map

Grid Structure