Steven Caesar Wong's Portfolio: Style Guide

By Steven Caesar Wong


B. Button style

a. CSS selector:

".project-button"

".project-button:hover"

b. Sample code:

<a href="#" class="project-button">View Details</a>

c. Rendered element:

View Details

C. Text input field and label

a. CSS selector:

"text-length"

"input.text,input.text:hover"

"textarea,textarea:hover"

b. Sample code:

<form method="post" action="#">
<label for="form-full-name">Full Name:</label>
<input type="text" id="form-full-name" placeholder="Full Name" class="text-length">
<label for="form-subject">Subject:</label>
<input type="text" id="form-subject" placeholder="Subject" class="text-length">
<label for="form-email">Email/Phone Number:</label>
<input type="text" id="form-email" placeholder="Email/Phone Number" class="text-length">
<label for="form-comment">Comment:</label>
<textarea id="form-comment" placeholder="Message"></textarea>
</form>

c. Rendered element:


D. Submit and reset button style

a. CSS selector:

"submit-button-nav"

"reset-button-nav"

b. Sample code:

<input type="submit" value="Submit" class="submit-button-nav">
<input type="reset" value="Reset" class="reset-button-nav">

c. Rendered element:


E. Levels of headings

a. CSS selector:

"h1"

"h2"

"h3"

b. Sample code:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

c. Rendered element:

Heading level 1

Heading level 2

Heading level 3


F. Paragraph

a. CSS selector:

"p"

b. Sample code:

<p>Like the ever-expanding ripples across water when an object is dropped into it, an effect from an initial state can be followed outwards incrementally. I decide to create the ripple effect on the dress, which will be a combination of technology, nature and fashion. When the spectator walks close to the model, the inner circle will light up. When the spectator walks far away from the model, the light will slowly fade away and the outer circle light will fade in. When the spectator stops in front of the model, rapid ripple effects will be created. The interaction creates an interesting pattern of showing ripple effect, and which the distance between spectator and the model can stimulate. </p>

c. Rendered element:

Like the ever-expanding ripples across water when an object is dropped into it, an effect from an initial state can be followed outwards incrementally. I decide to create the ripple effect on the dress, which will be a combination of technology, nature and fashion. When the spectator walks close to the model, the inner circle will light up. When the spectator walks far away from the model, the light will slowly fade away and the outer circle light will fade in. When the spectator stops in front of the model, rapid ripple effects will be created. The interaction creates an interesting pattern of showing ripple effect, and which the distance between spectator and the model can stimulate.


G. Bulleted lists

a. CSS selector:

"ul"

b. Sample code:

<ul>
<li>Bulleted list 1</li>
<li>Bulleted list 2</li>
<li>Bulleted list 3</li>
</ul>

c. Rendered element:


H. Numbered lists

a. CSS selector:

"ol"

b. Sample code:

<ol>
<li>Numbered list 1</li>
<li>Numbered list 2</li>
<li>Numbered list 3</li>
</ol>

c. Rendered element:

  1. Numbered list 1
  2. Numbered list 2
  3. Numbered list 3

I. Blockquote

a. CSS selector:

"blockquote"

b. Sample code:

<blockquote>"Hello! I am Steven Caesar Wong. I create video games and artworks by programming."</blockquote>

c. Rendered element:

"Hello! I am Steven Caesar Wong. I create video games and artworks by programming."