Appolio's Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus. Pellentesque pellentesque accumsan libero, at porta risus tempor eget. Suspendisse erat massa, tincidunt ut tristique quis, tincidunt in justo. Sed nec urna massa.

Animation - Slide

Sample Image

We’re big believers in doing right by our neighbors. After all, we grew up in the Twin Cities and we believe this place has much to offer. So we do what we can to support the community we love. Over the past four years, we’ve provided more than $1 million in combined cash and pro bono support to Way to Grow, an early childhood education and nonprofit organization. Other community giving involvement throughout our agency history includes pro bono work for more than 13 organizations, direct giving, a scholarship program through the Minneapolis College of Art & Design, board memberships, and ongoing participation in the Keystone Club, which gives five percent of our company’s earnings back to the community each year.

<div class="row animate-slide inview">
<div class="col-sm-6 col-xs-12">
<img border="0" alt="" src="/images/stories/joomla/article-large-6.jpg" />
</div>
<div class="col-sm-6 col-xs-12">
<p>We’re big believers in doing right by our neighbors. After all, we grew up in the Twin Cities and we believe this place has much to offer. So we do what we can to support the community we love. Over the past four years, we’ve provided more than $1 million in combined cash and pro bono support to Way to Grow, an early childhood education and nonprofit organization. Other community giving involvement throughout our agency history includes pro bono work for more than 13 organizations, direct giving, a scholarship program through the Minneapolis College of Art &amp; Design, board memberships, and ongoing participation in the Keystone Club, which gives five percent of our company’s earnings back to the community each year.</p>
</div>
</div>

Animation - Scale

John Doe

John Doe

Teal Simpson

Teal Simpson

Charlie Waite

Charlie Waite

<div class="row animate-Scale inview">
<div class="col-sm-4">
<div class="item-images">
<div class="images">
<img alt="John Doe" src="/ja_works/ja_appolio/images/about_images/lead1.jpg" />
</div>
<p class="images-desc">John Doe</p>
</div>
</div>
<div class="col-sm-4">
<div class="item-images">
<div class="images">
<img alt="Teal Simpson" src="/ja_works/ja_appolio/images/about_images/lead2.jpg" />
</div>
<p class="images-desc">Teal Simpson</p>
</div>
</div>
<div class="col-sm-4">
<div class="item-images">
<div class="images">
<img alt="Charlie Waite" src="/ja_works/ja_appolio/images/about_images/lead3.jpg" />
</div>
<p class="images-desc">Charlie Waite</p>
</div>
</div>
</div>

List Photos Background

<div class="main-col">
<div class="shadow"> </div>
<div class="background">
<div class="col col1 col-md-1 col-sm-1 col-xs-1 "> </div>
<div class="col col2 col-md-1 col-sm-1 col-xs-1 "> </div>
<div class="col col3 col-md-1 col-sm-1 col-xs-1 "> </div>
<div class="col col4 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col5 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col6 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col7 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col8 col-md-1 col-sm-1 col-xs-1 "> </div>
<div class="col col9 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col10 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col11 col-md-1 col-sm-1 col-xs-1"> </div>
<div class="col col12 col-md-1 col-sm-1 col-xs-1"> </div>
</div>
</div>

Headings

This is a sample Heading 1. Lorem ipsum.

This is a sample Heading 2. Lorem ipsum.

This is a sample Heading 3. Lorem ipsum.

This is a sample Heading 4. Lorem ipsum.

This is a sample Heading 5. Lorem ipsum.

Blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra. Someone famous Source Title

Use .pull-right for a floated, right-aligned blockquote.

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra. Someone famous Source Title

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. Lorem ipsum dolor sit amet consectetur

Un-Ordered List

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur

Definition List

This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Congue Quisque augue elit dolor.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Grey Bubbles

Lorem ipsum dolor adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Blue Bubbles

Lorem ipsum dolor adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Black Bubbles

Lorem ipsum dolor adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Message Boxes with Icons

This is a calendar. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue

This is a download box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue

Message Boxes - Style 1

This is a grey box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

This is a hilite box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Message Boxes - Style 2

This is a grey box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

This is a hilite box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Squared Tags

This is a sample Success. Use this to provide useful information.

This is a sample Warning. Use this to provide useful information.

This is a sample Important. Use this to provide useful information.

This is a sample Info. Use this to provide useful information.

Rounded Tags

This is a sample Success. Use this to provide useful information.

This is a sample Warning. Use this to provide useful information.

This is a sample Important. Use this to provide useful information.

This is a sample Info. Use this to provide useful information.