WesWaddell.com
Is Your Business In The Clouds... Flying Blind?
Typography & CSS
Heading 1 <h1>
Heading 2 <h2>
Heading 3 <h3>
Heading 4 <h4>
Heading 5 <h5>
Heading 6 <h6>
Heading 3 <h3 class="alternate">
Heading 3 <h3 class="alternate2">
Heading 3 <h3 class="alternate3">
Miscellaneous Classes:
<p class="center">This is a paragraph of text that is centered. Just apply the center class.</p>
<p class="right">This is text that is aligned to the right. Apply the right class.</p>
<p class="small">This is text that is smaller than normal. Apply the small class.</p>
<p class="center small"> You can have more than one class assigned to an element. This paragraph uses the center class as well as the small class.</p>
Blockquote - Float Right
<blockquote class="rightside"> SVelit doctus adversarium eam ei. An iudico populo omnium duo, dicta adversarium ad sit. Scaevola fabellas nec ut, pri solum error luptatum eu, simul commune no sit.</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. In ultricies accumsan odio, sed faucibus mi volutpat id. Duis laoreet odio ac nisi placerat posuere. Quisque vitae metus quis nibh iaculis ullamcorper. Ut eleifend molestie lectus, ac accumsan urna tincidunt at. In in mauris in nibh aliquam luctus. Vivamus faucibus, mi non commodo egestas, ipsum lectus sodales mauris, a rutrum urna mi viverra libero. Morbi adipiscing lacinia libero, a auctor tellus porta nec.
Blockquote - Float Left
<blockquote class="leftside"> SVelit doctus adversarium eam ei. An iudico populo omnium duo, dicta adversarium ad sit. Scaevola fabellas nec ut, pri solum error luptatum eu, simul commune no sit.</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. In ultricies accumsan odio, sed faucibus mi volutpat id. Duis laoreet odio ac nisi placerat posuere. Quisque vitae metus quis nibh iaculis ullamcorper. Ut eleifend molestie lectus, ac accumsan urna tincidunt at. In in mauris in nibh aliquam luctus. Vivamus faucibus, mi non commodo egestas, ipsum lectus sodales mauris, a rutrum urna mi viverra libero. Morbi adipiscing lacinia libero, a auctor tellus porta nec.
Blockquote - No Float
<blockquote>SVelit doctus adversarium eam ei. An iudico populo omnium duo, dicta adversarium ad sit. Scaevola fabellas nec ut, pri solum error luptatum eu, simul commune no sit.</blockquote>
Content Boxes - Two Across
<div class="contentBox2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras
fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</div>
<div class="contentBox2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras
fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</div>
Content Boxes - Three Across
<div class="contentBox3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras
fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</div>
<div class="contentBox3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras
fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</div>
<div class="contentBox3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras
fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</div>
Images - Float Left
Float an image to the left without a border:
<img alt="" class="imageleft" src="images/clipboard.png">
Float an image to the left with a border:
<img alt="" class="imageleft-border" src="images/clipboard.png">
Float an image to the left with a border
and shadow:
<img alt="" class="imageleft-border image-catalog" src="images/clipboard.png">
Make a square image appear round and float to the left.
<img alt="" class="imageleft image-round" src="images/samples/photo80x80.jpg">
Images - Float Right
Float an image to the right without a border:
<img alt="" class="imageright" src="images/clipboard.png">
Float an image to the right with a border:
<img alt="" class="imageright-border" src="images/clipboard.png">
Float an image to the
right with a border
and shadow:
<img alt="" class="imageright-border image-catalog" src="images/clipboard.png">
Make a square image appear round and float to the left.
<img alt="" class="imageright image-round" src="images/samples/photo80x80.jpg">
Bulleted Lists and Ordered Lists:
<ol class="leadingzero">
- Topic One
- Topic Two
- Topic Three
- Topic Four
<ul>
- Topic One
- Topic Two
- Topic Three
- Topic Four
<ul class="list2">
- Topic One
- Topic Two
- Topic Three
- Topic Four
<ul class="list3">
- Topic One
- Topic Two
- Topic Three
- Topic Four
Paragraphs with Tiny Icons
<p class="home"> Adds the home icon to the paragraph
<p class="email"> Adds the email icon to the paragraph
<p class="phone"> Adds the phone icon to the paragraph
<p class="hours"> Adds the clock icon to the paragraph
<p class="comment"> Adds the text bubble icon to the paragraph
Drop Caps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros. Add class="dropcap" class to the <p> tag.
Big Number
1<p><span class="bignumber">1</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. </p>
Button Look for a Link
Change a regular "call to action" link:
Into a Button:
Add class="button" to the anchor tag <a>
Social Media Icons
[full icon set can be downloaded at
http://www.danieleckermann.com/linkdeck/.]