Basic Interactive Elements

In-text link

CSS selector:

.in-text-link

Sample code:

<a href="#" class="in-text-link">In-text link</a>

Rendered element:

In-text link

Navigation Button

CSS selector:

#home-nav

Sample code:


                    <div id="home-nav"> 
  <nav> 
   <ul> 
    <li> 

                        <a href="#">Default Button</a>
                    
    </li> 
   </ul> 
  </nav>
 </div>

Rendered element:

Buttons

CSS selector:

.button

Sample code:

<a href="#" class="button">Submit/Reset Button</a>

Rendered element:

Button

Website Color Swatches

CSS selector:

.container .color-swatch .blue .red .gray .darkergray .white

Sample code:


                    <div class="container">
                      <p class="color-swatch blue">#2C467D</p>
                      <p class="color-swatch red">#FF454</p>
                      <p class="color-swatch gray">#F5F5F5</p>
                      <p class="color-swatch darkergray">#5B5B5B</p>
                      <p class="color-swatch white">#FFFFFF</p>
                    </div>"

Rendered element:

#2C467D

#FF454

#F5F5F5

#5B5B5B

#FFFFFF

Text Styling

CSS selector for Heading 1:

Sample code:

<h1 id="h1-style">Heading 1</h1>

Rendered element:

Heading 1

CSS selector for Heading 2:

Sample code:

<h2>Heading 2</h2>

Rendered element:

Heading 2

CSS selector for Heading 3:

Sample code:

<h3>Heading 3</h3>

Rendered element:

Heading 3

Paragraphs

CSS selector:

Sample code:

<p>Paragraph</p>

Rendered element:

Paragraph

Unordered

CSS selector:

Sample code:


                    <ul>

                     <li>Unordered list 1</li>

                     <li>Unordered list 2</li>

                     <li>Unordered list 3</li>

                    </ul>

Rendered element:

Unordered list 1
Unordered list 2
Unordered list 3

Ordered Lists

CSS selector:

Sample code:


                    <ol>

                     <li>Ordered list 1</li>

                     <li>Ordered list 2</li>

                     <li>Ordered list 3</li>

                    </ol>

Rendered element:

Ordered list 1
Ordered list 2
Ordered list 3

Modular Pattern Elements

Main Navigation

CSS selector:

nav, a

Sample code:


                    <nav id="home-nav">
                      <div class="center">
                        <ul>
                            <li><a class="button-nav" href="#">ABOUT</a></li>
                            <li><a class="button-nav" href="#">PROJECTS</a></li>
                            <li><a class="button-nav" href="#">N/A</a>
                            </li><li><a class="button-nav" href="#">SKILLS</a></li>
                            <li><a class="button-nav" href="#">CONTACT</a></li>
                        </ul>
                      </div>
                    </nav>

Rendered element:

Project List Grid

CSS selector:

div

Sample code:


                  <section id="projects"<
                    <a id="myworks"></a>
                    <section id="works">
                      <div class="work-parent">
                        <div class="work-child">
                          <div class="work-desc">
                            <p>This game was created in a team of two for the Community Game Jam 2019 in August. The language used when creating the game is Unity. The coding involves a lot of OOP. </p>
                            <a href="deflect.html">See the project in detail</a>
                          </div>
                        </div>
                        <div class="work-child-2">
                          <a href="deflect.html"><h2>Shadow Deflect</h2></a>
                        </div>
                      </div>
                      <div class="work-parent-b">
                        <div class="work-child-b">
                          <div class="work-desc-b">
                            <p>This final project is from the course Digital Games: Genre, Structure, Programming, and Play created in 2018. The language used in creating the game is processing that is java based. OOP and FSM were involved a lot in the project. The overall grade received was B+</p>
                            <a href="casteria.html">See the project in detail</a>
                          </div>
                        </div>
                        <div class="work-child-2-b">
                          <a href="casteria.html"><h2>Casteria</h2></a>
                        </div>
                      </div>
                    </section>
                  </section>

Rendered element:

This game was created in a team of two for the Community Game Jam 2019 in August. The language used when creating the game is Unity. The coding involves a lot of OOP.

See the project in detail

Shadow Deflect

This final project is from the course Digital Games: Genre, Structure, Programming, and Play created in 2018. The language used in creating the game is processing that is java based. OOP and FSM were involved a lot in the project. The overall grade received was B+

See the project in detail

Casteria

Skills grid

CSS selector:

div

Sample code:


                <section id="skills">
                  <section id="skill">
                    <a id="skillslearned"></a>
                    <h1>SKILLS LEARNED</h1>
                    <div class="intro-parent">
                      <div class="skills-child">
                        <h2>Main Expertise:</h2>
                        <div class="icon-text">
                          <div class="icon-img-child">
                            <img src="images/photoshop.png" alt="adobe ps">
                          </div>
                          <div class="icon-text-child">
                            <p>Photoshop</p>
                          </div>
                        </div>
                        <div class="icon-text">
                          <div class="icon-img-child">
                            <img src="images/experience.png" alt="adobe xd">
                          </div>
                          <div class="icon-text-child">
                            <p>Adobe XD</p>
                          </div>
                        </div>
                        <div class="icon-text">
                          <div class="icon-img-child">
                            <img src="images/java.png" alt="java">
                          </div>
                          <div class="icon-text-child">
                            <p>Java</p>
                          </div>
                        </div>

                      </div>
                      <div class="skills-child">
                        <h2>Secondary:</h2>
                        <div class="icon-text">
                          <div class="icon-img-child">
                            <img src="images/premier.png" alt="adobe pr">
                          </div>
                          <div class="icon-text-child">
                            <p>Premiere Pro</p>
                          </div>
                        </div>
                        <div class="icon-text">
                          <div class="icon-img-child">
                            <img src="images/illustrator.png" alt="adobe ai">
                          </div>
                          <div class="icon-text-child">
                            <p>Illustrator</p>
                          </div>
                        </div>
                        <div class="icon-text">
                          <div class="icon-img-child">
                            <img src="images/unity.png" alt="unity engine">
                          </div>
                          <div class="icon-text-child">
                            <p>Unity</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </section>

Rendered element:

Main Expertise:

Photoshop

Adobe XD

Java

Secondary:

Premiere Pro

Illustrator

Unity

Citations

Styleguide

Wireframe

IAT339 - P03

STYLEGUIDE

Contents

Basic Interactive Elements

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Button

CSS selector:

Sample code:

Rendered element:

Buttons

CSS selector:

Sample code:

Rendered element:

Website Color Swatches

CSS selector:

Sample code:

Rendered element:

Text Styling

CSS selector for Heading 1:

Sample code:

Rendered element:

Heading 1

CSS selector for Heading 2:

Sample code:

Rendered element:

Heading 2

CSS selector for Heading 3:

Sample code:

Rendered element:

Heading 3

Paragraphs

CSS selector:

Sample code:

Rendered element:

Unordered

CSS selector:

Sample code:

Rendered element:

Ordered Lists

CSS selector:

Sample code:

Rendered element:

Modular Pattern Elements

Main Navigation

CSS selector:

Sample code:

Rendered element:

Project List Grid

CSS selector:

Sample code:

Rendered element:

Shadow Deflect

Casteria

Skills grid

CSS selector:

Sample code:

Rendered element:

Main Expertise:

Secondary: