Shown below are a few of the styles and headings which are formatted in the CSS for this template. Enjoy using them to dress up your website!
Heading 1
Heading 2
Heading 2 - Alternate
Heading 2 - Alternate 2
Heading 3
Heading 4
Heading 5 (white)
Heading 6
Big Letters 1
Big Letters 2
Blockquotes. You can choose to have a blockquote that goes all the way across the page. Just add <blockquote>Your text</blockquote> to your page.
You can add a block quote easily. You can make this blockquote float to the right by adding "rightside" as a class. You can make it float to the left by adding "leftside" as a class.
Vel sodales sit amet, auctor vitae dui. Nulla facilisi. Proin suscipit velit
et enim scelerisque at consequat sem imperdiet. Vivamus mauris nisi,
malesuada eget bibendum vel, suscipit in est. Praesent semper tempor quam,
et eleifend dolor cursus a.
The coding for floating left or right looks like this.
<blockquote class="rightside" > OR
<blockquote class="leftside" >
Horizontal Rule
Our horizontal rule is pretty cool, too! To add a horizontal rule, just place <hr> into your code, exactly where you want it!
It doesn't show the image in design view, but when you preview the page in the browser or upload the page to the web, you'll see it. Just another little thing, to make your web stand out!
Social Media Icons
Eli Burford created the small social media icons pictured above, that were used in this site.
The gray-scale social media icons above were downloaded from Find Icons.com. [I gray-scaled them.]
Image Classes
This template offers a variety of ways to present your images as shown below. All you have to do is add the specific image class to your image.
Float Left
Float an image to the left without a border:
<img alt="" src="images/banner1.jpg" class="imageleft">
Float an image to the left
with a border:
<img alt="" class="imageleft-border" src="images/banner1.jpg">
Float an image to the left with a
border and a shadow:
<img alt="" class="image-catalog imageleft" src="images/banner1.jpg">
Make a square image
appear to be round and float it to the left. [looks square in Design view]
<img alt="" class="image-round imageleft" src="images/banner1.jpg">
Float Right
Float an image to the right without a border:
<img alt="" src="images/banner1.jpg" class="imageright">
Float an image to the right
with a border:
<img alt="" class="imageright -border" src="images/banner1.jpg">
Float an image to the right with a
border and a shadow:
<img alt="" class="image-catalog imageright" src="images/banner1.jpg">
Make a square image
appear to be round and float it to the right. [looks square in Design view]
<img alt="" class="image-round imageright" src="images/banner1.jpg">
Icons for "Home," "Call," "Email," and "Hours"
1Add your text
2 Place your curser at the beginning of the text and add the style by
choosing: home, call, email, hours or comment
Home - It looks like this in code view: <p class="home">Home</p>
Call - It looks like this in code view: <p class="call">
Email - It looks like this in code view: <p class="email">
Comment - It looks like this in code view: <p class="comment">
3 Once you apply the style, the small icon will automatically show up! Easy stuff!
Take a look below at some additional styles!