<!-- Banner Boxes -->

<!-- Default -->
<div class="banner-box" style="background-image:url('../path/to/image.jpg');">
  <div class="text">...</div>
</div>

<!-- Text Placement -->
<!-- You can combine options like "top" and "right" -->
<div class="banner-box" style="background-image:url../path/to/image.jpg');">
  <div class="text top right">...</div>
</div>

<!-- You can use multiple .text elements within a .banner-box -->
<div class="banner-box" style="background-image:url../path/to/image.jpg');">
  <div class="text top">...</div>
  <div class="text top center">...</div>
  <div class="text top right">...</div>
  <div class="text">...</div>
  <div class="text center">...</div>
  <div class="text right">...</div>
</div>

<!-- "Dark" Banner Box -->
<!-- Sets a light font color if there is a dark background -->
<div class="banner-box dark" style="background-image:url('../path/to/image.jpg');">
  <div class="text">...</div>
</div>
			

Animations via the animate.css library

<!-- Special Box -->

<!--Default -->
<div class="special-box">
  <span class="text">Special Box</span>
</div>

<!-- Special Box Dark -->
<div class="special-box dark">
  <span class="text">Special Box</span>
</div>

<!-- Special Boxes can be used as links -->
<a class="special-box" href="#" style="background-image:ur(../path/to/image.jpg);">
  <span class="text">Special Box Link</span>
</a>
			

<!-- Responsive Grid -->

<!-- Default Grid -->
<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-7">...</div>
  <div class="col-xs-12 col-sm-4 col-md-6 col-lg-5">...</div>
</div>

<!-- "No Gap" Grid -->
<div class="row no-gap">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-7">...</div>
  <div class="col-xs-12 col-sm-4 col-md-6 col-lg-5">...</div>
</div>

This theme uses Bootstrap's grid system.

Lead Text...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae quae dolor itaque optio ex similique, incidunt, ipsa minus tenetur excepturi fuga sapiente molestias quisquam. Itaque modi eligendi ex, doloribus eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit...

<!-- Typography -->

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p class="lead">Lead text...</p>
<p>Paragraph Text...</p>

Action Primary Secondary Success Light Dark Action Primary Secondary Success Light Dark XS - Extra Small SM - Small MD - Medium LG - Large XL - Extra Large

<!-- Actions / Buttons -->

<!-- Default with color options -->
<a href="#" class="action">Action</a>
<a href="#" class="action primary">Primary</a>
<a href="#" class="action secondary">Secondary</a>
<a href="#" class="action success">Success</a>
<a href="#" class="action light">Light</a>
<a href="#" class="action dark">Dark</a>

<!-- Outlined -->
<a href="#" class="action outline">Action</a>
<a href="#" class="action outline primary">Primary</a>
<a href="#" class="action outline secondary">Secondary</a>
<a href="#" class="action outline success">Success</a>
<a href="#" class="action outline light">Light</a>
<a href="#" class="action outline dark">Dark</a>

<!-- Size Variations -->
<a href="#" class="action xs primary">XS - Extra Small</a>
<a href="#" class="action sm secondary">SM - Small</a>
<a href="#" class="action md success">MD - Medium</a>
<a href="#" class="action lg light">LG - Large</a>	
<a href="#" class="action xl dark">XL - Extra Large</a>

<!-- Lhasa Boxes -->

<div class="lhasabox lhasa-blue">...</div>
<div class="lhasabox lhasa-yellow">...</div>
<div class="lhasabox lhasa-green">...</div>
<div class="lhasabox lhasa-orange">...</div>
<div class="lhasabox">...</div>
<div class="lhasabox lhasa-dark">...</div>

<!-- Responsive Video Embed -->

<!-- Default 16x9 Aspect Ratio -->
<div class="responsive-embed">
  <iframe src="..." ></iframe>
</div>

<!-- 4x3 Aspect Ratio -->
<div class="responsive-embed responsive-4x3">
  <iframe src="..." ></iframe>
</div>

<!-- Youtube Embed Styling Cheatsheet -->
//youtube.com/embed/VIDEO_ID?modestbranding=1&autohide=1&showinfo=0&controls=0&iv_load_policy=3&rel=0
&rel=0 .............. Hide Suggested Videos
&modestbranding=1 ... Minimalist Player
&autohide=1 ......... Hide Controls on Video Load
&showinfo=0 ......... Hide Video Title
&controls=0 ......... Hide Player Controls
&iv_load_policy=3 ... Hide Annotations
			

<!-- Drop Shadow Effects -->

<div class="shadow1">...</div>
<div class="shadow2">...</div>
<div class="shadow3">...</div>
<div class="shadow4">...</div>
<div class="shadow5">...</div>
<div class="shadow6">...</div>
<div class="shadow7">...</div>
<div class="shadow8">...</div>

<!-- Messages -->

<!-- Success Messages -->
<div class="page messages">
    <div class="message-success success message">
      <div>...</div>
    </div>
</div>

<!-- Error Message -->
<div class="page messages">
  <div class="message-error error message">
    <div>...</div>
  </div>
</div>

<!-- Alert Message -->
<div class="page messages">
  <div class="message-warning warning message">
    <div>...</div>
  </div>
</div>