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.
Logo


Alternatinative Logo

Favicon / Application Icons






Colour Palette
Maverick (Violet) - light purple
Putty (Yellow) - dark gold
Double Spanish White (Grey) - light gold
Trendy Pink (Violet) - Dark Purple
Eminence (Violet) - Darkest Purple
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 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.
- 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
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.
Add .blockquote-reverse
for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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.
Spinner Icons
fa-spin
class. Check out the
spinning icons example.
Examples
Larger Icons
fa-lgfa-2x
fa-3x
fa-4x
fa-5x
Fixed Width Icons
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
normalfa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Stacked Icons
fa-twitter on fa-square-ofa-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
.
Input States
Bootstrap includes validation styles for error, warning, and success states on form controls.
Input Sizes & Group
Set heights using classes like .input-lg
, and set widths using grid column classes like .col-lg-*
.
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 |