This page is deprecated and no longer in use

Button Styling

Rendered element:

Example Button

CSS selector:

"btn and btn-default"

Sample code:

<a>Example Button</a>

"btn-anim-1" or "btn-icon"

<button class="btn btn-default btn-sm btn-anim-i"><span>Button<i class="fas fa-chevron-right" aria-hidden="true"></i></span></button>

"btn, btn-circle and btn-bottom"

<a><i>font-awesome icon</i></a>

Nav Text Hover

Rendered element:

CSS selector:

id mainNav and "a"

Sample code:

<ul class="navbar-nav ml-auto" id="mainNav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul>

Text Input

Rendered element:

CSS selector:

".form-wrap" and ".input-style"

Sample code:

<div class="input-wrap validate-input" data-validate="Name is needed!">
<input class="input-style" type="text" name="name">
<span class="focus-input2" data-placeholder="NAME"></span>
</div>

Image Hover

Rendered element:

CSS selector:

Sample code:

class "hovereffect"

<div class="hovereffect"> <a href="panradio.html"> <img class="img-responsive" src="img/panradio.png" alt=""> </a> <a href="#"> <div class="overlay"> <h2>Project Example</h2> </div> </a> </div>

Headings

Rendered element:

Header 1- Cabin

CSS selector:

"h1"

Sample code:

<h1>Header</h1>

Header 2 - Cabin

"h2"

<h2>Header</h2>

Header 3 - Cabin

"h3"

<h3>Header</h3>

Paragraphs

Rendered element:

This is an example of a paragraph. This uses the font Lato with a weight of 300.

CSS selector:

"p"

Sample code:

<p>paragraph content</p>

Lists

Rendered element:

  • list item a
  • list item b

my portfolio does not use any list stylings

CSS selector:

"ol", "ul" and "li"

Sample code:

<ol>
<li>list item</li>
<li>list item</li>
</ol>

Footer Styling

Rendered element:

CSS selector:

"social"

Sample code:

<li class="github"><a href="https://github.com/randypanopio"><i class="fab fab fa-github-square"></i></a></li>

Rendered element:

CSS selector:

"social" and "copyright"

Sample code:

<a class="copyright-link" href="styleguide.html">Styleguide</a><span>&bull;</span>

Grid Structure

Using boostrap's grid structure, my website does not take up the full width of the screen unless it is a background image/hero image. I arranged the content of my portfolio with a column taking up 2 width for the title of the section, and a column of 8 width for the rest of the content. The layout usually follows image then content then image again. The grid used in the index page to display individual projects used 6 width columns with some margin to keep them separated.

Colour Swatches

Core Colours

#952d49

#333333

Highlight/Misc

#009999

#555555

Text

#333333

#FFFFFF