Your Family Name
Our Family's Journey Through Time
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.
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
an image to the left without a border:
<img alt="" src="img/smallman.jpg" class="img-left">
Float
an image to the left with a border:
<img alt="" class="img-border-left" src="images/smallman.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-left" src="img/smallman.jpg">
Float
an image to the left and add a frame to it:
<img alt="" class="img-frame-left" src="img/smallman.jpg" >
Float
an image to the left and curve the corners.
<img alt="" class="img-curved-left" src="img/smallman.jpg">
Float
an image to the right without a border:
<img alt="" src="img/smallman.jpg" class="img-right">
Float
an image to the right with a border:
<img alt="" class="img-border-right" src="img/smallman.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-right" src="img/smallman.jpg">
Float
an image to the right and add a frame to it:
<img alt="" class="img-frame-right" src="img/smallman.jpg" >
Float
an image to the right and curve the corners.
<img alt="" class="img-curved-right" src="img/smallman.jpg">
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!
The Drop Cap can be done by applying the dropcap class to the paragraph.
<p>The Drop Cap can be done by applying the dropcap class to the paragraph.</p>
You can make your links buttons by adding the class "btn-small" or "btn-detail" to the a tag:
<a class="btn-small" href="index.html">Button
Small</a>
<a class="btn-detail" href="index.html">Button Detail</a>
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.
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>
You can also words by applying the highlight class.
<span class="highlight">Words </span>
You can have list items appear like this:
This is the default unordered list:
Or you can apply the list1 class to the ul (unordered list) and get this:
Another option is a numbered list by appling leadingzero to the ol (ordered list)