Mission

Sean Pisano - Web Developer

My job is to make sure websites look great, users enjoy their experience and business goals are met and maintained in a digital environment. Every business has a purpose and a promise; I design the right visual layout, typography, color and graphics that accurately define a client's brand, influence and perception.

Colour Palette

#c7b0c3

Maverick (Violet) - light purple

#c8ac6f

Putty (Yellow) - dark gold

#d4c39c

Double Spanish White (Grey) - light gold

#7d5a76

Trendy Pink (Violet) - Dark Purple

#763d6c

Eminence (Violet) - Darkest Purple

#471e3e

Main - Deep Purple

Typography / Fonts

TeXGyreAdventor-BoldItalic

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.:,;()*!?'@#<>$%&^+-=~

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

TeXGyreAdventor-Italic

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.:,;()*!?'@#<>$%&^+-=~

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

TeXGyreAdventor-Regular

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.:,;()*!?'@#<>$%&^+-=~

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

TeXGyreAdventor-Bold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.:,;()*!?'@#<>$%&^+-=~

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

TeXGyreAdventor-Bold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789.:,;()*!?'@#<>$%&^+-=~

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

Sean Pisano Web Developer

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Inline text elements

Your awesome text goes here.

Your title goes here

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as an addition to the document.

rendered as bold text

rendered as italicized text

Contextual Text Colors

Your awesome text goes here.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled

This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
Inline

Place all list items on a single line with display: inline-block; and some light padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Blockquotes

Your awesome text goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Buttons

Default Buttons

Use the button classes on an <a>, <button>, or <input> element.

Button-Rounded

Add .btn-rounded to default button to get rounded corners.

Button-Custom

Use a classes .btn-custom to quickly create a bordered buttons.

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Button-Width

Create buttons with minimum width by adding add .w-xs, .w-sm, .w-md or .w-lg.

Button-Sizes

Add .btn-lg, .btn-sm for additional sizes.

Button-Disabled

Add the disabled attribute to <button> buttons.

Icon Button

Icon only button.


Block Button

Create block level buttons,with by adding add .btn-block.

Button Group

Wrap a series of buttons with .btn in .btn-group.



Dropdown link Dropdown link
Dropdown link Dropdown link

Dropdown

Turn a button into a dropdown toggle with some basic markup changes.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link

Split button dropdown

Turn a button into a dropdown toggle with some basic markup changes.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link

Dropup

Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link

File upload buttons

Use the button classes on an <a>, <button>, or <input> element.

Upload
Upload

Icons

Font Awesome - Brand Icons

  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
fa-adn
fa-android
fa-apple
fa-behance
fa-behance-square
fa-bitbucket
fa-bitbucket-square
fa-bitcoin (alias)
fa-btc
fa-codepen
fa-css3
fa-delicious
fa-deviantart
fa-digg
fa-dribbble
fa-dropbox
fa-drupal
fa-empire
fa-facebook
fa-facebook-square
fa-flickr
fa-foursquare
fa-ge (alias)
fa-git
fa-git-square
fa-github
fa-github-alt
fa-github-square
fa-gittip
fa-google
fa-google-plus
fa-google-plus-square
fa-hacker-news
fa-html5
fa-instagram
fa-joomla
fa-jsfiddle
fa-linkedin
fa-linkedin-square
fa-linux
fa-maxcdn
fa-openid
fa-pagelines
fa-pied-piper
fa-pied-piper-alt
fa-pinterest
fa-pinterest-square
fa-qq
fa-ra (alias)
fa-rebel
fa-reddit
fa-reddit-square
fa-renren
fa-share-alt
fa-share-alt-square
fa-skype
fa-slack
fa-soundcloud
fa-spotify
fa-stack-exchange
fa-stack-overflow
fa-steam
fa-steam-square
fa-stumbleupon
fa-stumbleupon-circle
fa-tencent-weibo
fa-trello
fa-tumblr
fa-tumblr-square
fa-twitter
fa-twitter-square
fa-vimeo-square
fa-vine
fa-vk
fa-wechat (alias)
fa-weibo
fa-weixin
fa-windows
fa-wordpress
fa-xing
fa-xing-square
fa-yahoo
fa-youtube
fa-youtube-play
fa-youtube-square

Spinner Icons

These icons work great with the fa-spin class. Check out the spinning icons example.
fa-circle-o-notch
fa-cog
fa-gear (alias)
fa-refresh
fa-spinner

Examples

Larger Icons
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Fixed Width Icons
 Home  Library  Applications  Settings
List Icons
  • List icons
  • can be used
  • as bullets
  • in lists
Bordered & Pulled Icons
...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Rotated & Flipped
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Stacked Icons
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

Forms

Input Types

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

email@example.com

A block of help text that breaks onto a new line and may extend beyond one line.
Multiple select

Input States

Bootstrap includes validation styles for error, warning, and success states on form controls.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Input Sizes & Group

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Action Another action Something else here

Basic Example

Horizontal form

Inline Form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Style 1
Style 2

Tables

# Header Header Header Header
1,001 Lorem ipsum dolor sit
1,002 amet consectetur adipiscing elit
1,008 Fusce nec tellus sed