Your Business Name

  Your tagline here

Your City, State
800.555.1212


Typography

 
Shown below are a few of the styles and headings which are formatted in the CSS in this template. Enjoy using them to dress up your website!

Heading 1

Heading 2

Heading 3

Heading 4

Alternate

Alternate 2

Heading 5
Heading 6

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" >

This blockquote goes all the way across the side of the section it is included in. It is not floated.

 Icons

We are pleased to offer Flaticon fonts in our templates. Click HERE to view all Icon Fonts in this template which were generated by flaticon.com.  If you would like to view their entire collection, please go to the Flaticon website. You can choose your own icons and replace the ones we chose. You cannot see the icons in "Design" view, you must view them on the web. You might have to do a CTRL-F5 to refresh your web page.

 

The code I used for the above is: <i class="flaticon-technology fa-4x color2 icon-shadow"></i>
The <i></i> brackets are used for icons.

 

1 The first class is the name of the icon: flaticon-technology

 

2 The second class tells the browser to enlarge the icon 4 times it's normal size:  fa-4x

 

3 The third class tells the browser what color to make the icon: color 2 (this is in the css style sheet)

 

4 The fourth class tells the browser to place a small shadow on the icon: icon-shadow

 

Eli Burford created the small social media icons pictured above, that were used in this site.

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="img-left">

 

Float an image to the left with a border:

<img alt="" class="img-left border" src="images/banner1.jpg">

 

Float an image to the left with a border and a shadow:

<img alt="" class="img-catalog img-left" 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="img-round img-left"  src="images/banner1.jpg">

 

Float an image to the left and add a frame to it:

<img alt="" class="img-frame img-left" src="images/banner1.jpg" >

 

Float an image to the left and curve the corners.

<img alt="" class="img-curved img-left" src="images/banner1.jpg">

Float Right

Float an image to the right without a border:

<img alt="" src="images/banner1.jpg" class="img-right">

 

Float an image to the right with a border:

<img alt="" class="img-right border" src="images/banner1.jpg">

 

Float an image to the right with a border and a shadow:

<img alt="" class="img-catalog img-right" 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="img-round img-right"  src="images/banner1.jpg">

 

Float an image to the right and add a frame to it:

<img alt="" class="img-frame img-right" src="images/banner1.jpg" >

 

Float an image to the right and curve the corners.

<img alt="" class="img-curved img-right" 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!

 

Drop Caps

The Drop Cap can be done by applying the dropcap class to the paragraph.

<p class="dropcap">First Letter of your paragraph</p>

Buttons

1 You can make a button by applying the btn-main class.

<span class="btn">name of your button</span>

 

2 You can also make a big

 

Big Button


by highlighting the button name and then applying the "btn-lg" class.

<span class="btn-lg">Big Button</span>

 

Big Number

1 You can also use the Big Number style to make the circled number.

<span class="bignumber">1 </span>

All you do is type in the number or letter, highlight it, and then add the class: bignumber.

Big Letters

A Big Letter! You can easily create this look by typing in your letter(s), highlighting it, and then adding the class: bigletter. You can do it!

<span class="bigletters">can </span>

 

Highlighting

You can also words by applying the highlight class.

<span class="highlight">Words </span>

 

List Items

You can have list items appear like this:

This is the default unordered list:

  • list
  • list
  • list

Or you can apply the list1 class to the ul (unordered list) and get this:

  • list
  • list
  • list

Another option is a numbered list by appling leadingzero to the ol (ordered list)

  1. list
  2. list
  3. list

 

Quick Links

credit cards

Contact Us

123 Main Street, Your City, Your State

1-800-123-4567

Monday-Friday: 8-5
Saturday: Noon-5
Sunday: Closed

Return Policies

Morbi id dolor tellus. Cras nunc massa, congue sit amet interdum id, vulputate ac eros. Mauris eu adipiscing erat. Ut magna nunc, tincidunt in ultricies eu, elementum ut erat.

Find Us here:

Check the Date