<?php ob_start(); ?>

	<section id="" class="section padding">

				<div class="container">

					<div class="row">

						<div class="col-md-6">

							<h1>H1 Heading</h1>
							<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>

							<h2>H2 Heading</h2>
							<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>

							<h3>H3 Heading</h3>
							<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>

							<h4>H4 Heading</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo a labore atque magni. Repellendus doloribus ullam dolores maiores excepturi quasi amet rem labore, accusantium, sapiente optio ex minima dolore perspiciatis.</p>

							<h5>H5 Heading</h5>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo a labore atque magni. Repellendus doloribus ullam dolores maiores excepturi quasi amet rem labore</p>

							<h6>H6 Heading</h6>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo a labore atque magni.</p>

						</div>


						<div class="col-md-6">

							<h1>Dropcaps</h1>

							<p>
								<span class="dropcap">D</span>ropcaps ipsum dolor sit amet, consectetur adipisicing elit. Quo a labore atque magni. Repellendus doloribus ullam dolores maiores excepturi quasi amet rem labore, accusantium, sapiente optio ex minima dolore perspiciatis. Lorem ipsum dolor sit amet, consectetur 
							</p>
							
							<p>
								<span class="dropcap round">D</span>ropcaps ipsum dolor sit amet, consectetur adipisicing elit. Quo a labore atque magni. Repellendus doloribus ullam dolores maiores excepturi quasi amet rem labore, accusantium, sapiente optio ex minima dolore perspiciatis. Lorem ipsum dolor sit amet, consectetur 
							</p>

							<p>
								<span class="dropcap box">D</span>ropcaps ipsum dolor sit amet, consectetur adipisicing elit. Quo a labore atque magni. Repellendus doloribus ullam dolores maiores excepturi quasi amet rem labore, accusantium, sapiente optio ex minima dolore perspiciatis. Lorem ipsum dolor sit amet, consectetur 
							</p>

							<h1>Blockquote</h1>

							<blockquote>
								<p>Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor.</p>
								<small>Someone famous <cite title="Source Title">Source Title</cite></small>
							</blockquote>

							<h1>Highlight & Tooltips</h1>

							<p> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a> Lorem ipsum dolor sit amet, <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a>  consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <span class="label label-info">label</span> Aenean massa. <span class="label label-success">label</span> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="label label-danger">label</span> Donec quam felis, ultricies nec, <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>  pellentesque eu, pretium quis, sem.</p>


						</div>

					</div> <!-- / .row -->

					<hr>

					<div class="row">

						<div class="col-md-12">
							<h1>Buttons</h1>
						</div>

						<div class="col-md-2">
							<p>
								<!-- Standard button -->
								<button type="button" class="btn btn-default">Default</button>
							</p>
							<p>

								<button type="button" class="btn btn-default"><i class="fa fa-angellist"></i>Default</button>
							</p>
							<p>
								<button type="button" class="btn btn-lg btn-default"><i class="fa  fa-cloud-download "></i>Default</button>
							</p>
							<p>
								<button type="button" class="btn btn-sm btn-default">Default</button>
							</p>
							<p>
								<button type="button" class="btn btn-xs btn-default">Default</button>
							</p>
						</div>
						
						<div class="col-md-2">
							<p>
								<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
								<button type="button" class="btn btn-primary">Primary</button>
							</p>
							<p>
								<button type="button" class="btn btn-primary"><i class="fa fa-angellist"></i>Primary</button>
							</p>
							<p>
								<button type="button" class="btn btn-lg btn-primary"><i class="fa  fa-cloud-download "></i>Primary</button>
							</p>
							<p>
								<button type="button" class="btn btn-sm btn-primary">Primary</button>
							</p>
							<p>
								<button type="button" class="btn btn-xs btn-primary">Primary</button>
							</p>
						</div>

						<div class="col-md-2">
							<p>
								<!-- Indicates a successful or positive action -->
								<button type="button" class="btn btn-success">Success</button>
							</p>
							<p>
								<button type="button" class="btn btn-success"><i class="fa fa-angellist"></i>Success</button>
							</p>
							<p>
								<button type="button" class="btn btn-lg btn-success"><i class="fa  fa-cloud-download "></i>Success</button>
							</p>
							<p>
								<button type="button" class="btn btn-sm btn-success">Success</button>
							</p>
							<p>
								<button type="button" class="btn btn-xs btn-success">Success</button>
							</p>
						</div>

						<div class="col-md-2">
							<p>
								<!-- Contextual button for informational alert messages -->
								<button type="button" class="btn btn-info">info</button>
							</p>
							<p>
								<button type="button" class="btn btn-info"><i class="fa fa-angellist"></i>info</button>
							</p>
							<p>

								<button type="button" class="btn btn-lg btn-info"><i class="fa  fa-cloud-download "></i>info</button>
							</p>
							<p>

								<button type="button" class="btn btn-sm btn-info">info</button>
							</p>
							<p>

								<button type="button" class="btn btn-xs btn-info">info</button>
							</p>
						</div>
							
						<div class="col-md-2">
							<p>
								<!-- Indicates caution should be taken with this action -->
								<button type="button" class="btn btn-warning">Warning</button>
							</p>
							<p>
								<button type="button" class="btn btn-warning"><i class="fa fa-angellist"></i>Warning</button>
							</p>
							<p>

								<button type="button" class="btn btn-lg btn-warning"><i class="fa  fa-cloud-download "></i>Warning</button>
							</p>
							<p>

								<button type="button" class="btn btn-sm btn-warning">Warning</button>
							</p>
							<p>

								<button type="button" class="btn btn-xs btn-warning">Warning</button>
							</p>
						</div>
													
						<div class="col-md-2">
							<p>
								<!-- Indicates a dangerous or potentially negative action -->
								<button type="button" class="btn btn-danger">Danger</button>
							</p>
							<p>
								
								<button type="button" class="btn btn-danger"><i class="fa fa-angellist"></i>Danger</button>
							</p>
							<p>

								<button type="button" class="btn btn-lg btn-danger"><i class="fa  fa-cloud-download "></i>Danger</button>
							</p>
							<p>

								<button type="button" class="btn btn-sm btn-danger">Danger</button>
							</p>
							<p>

								<button type="button" class="btn btn-xs btn-danger">Danger</button>
							</p>													
						</div>


					</div>  <!-- / .row -->


					<hr>

					<div class="row">


						<div class="col-md-6">

							<h1>Alert Boxes</h1>

							<div role="alert" class="alert">
								<i class="fa fa-file-text"></i> Do you have a note? put it here.
							</div>

							<div role="alert" class="alert alert-success">
								<i class="fa fa-check-circle-o"></i> <strong>Well done!</strong> You successfully read this important alert message.
							</div>

							<div role="alert" class="alert alert-info">
								<i class="fa fa-info-circle"></i><strong>Heads up!</strong> This alert needs your attention, but it's not super important.
							</div>

							<div role="alert" class="alert alert-warning">
								<i class="fa fa-exclamation-triangle"></i><strong>Warning!</strong> Better check yourself, you're not looking too good.
							</div>

							<div role="alert" class="alert alert-danger">
								<i class="fa fa-times"></i><strong>Oh snap!</strong> Change a few things up and try submitting again.
							</div>

						</div>  <!-- / .col-md-6 -->

						<div class="col-md-6">

							<h1>Social icons</h1>

							<p>
								<div class="social-icons">
									<a href="#" class="fa fa-rss"></a>
									<a href="#" class="fa fa-facebook"></a>
									<a href="#" class="fa fa-twitter"></a>
									<a href="#" class="fa fa-google-plus"></a>
									<a href="#" class="fa fa-pinterest"></a>
									<a href="#" class="fa fa-youtube"></a>
									<a href="#" class="fa fa-instagram"></a>
									<a href="#" class="fa fa-dribbble"></a>
									<a href="#" class="fa fa-linkedin"></a>
									<a href="#" class="fa fa-flickr"></a>
									<a href="#" class="fa fa-vimeo-square"></a>
									<a href="#" class="fa fa-stumbleupon"></a>
									<a href="#" class="fa fa-tumblr"></a>
									<a href="#" class="fa fa-skype"></a>
									<a href="#" class="fa fa-github"></a>
								</div> <!-- / .social-icons-->
							</p>

							<h1>Pagination</h1>

							<p>
								<ul class="pagination no-margin">
									<li>
										<a href="#" aria-label="Previous">
											<span aria-hidden="true"><i class="fa fa-angle-left"></i></span>
										</a>
									</li>
									<li class="active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li class="disabled"><span>...</span></li>
									<li><a href="#">8</a></li>
									<li><a href="#">9</a></li>
									<li><a href="#">10</a></li>
									<li>
										<a href="#" aria-label="Next">
											<span aria-hidden="true"><i class="fa fa-angle-right"></i></span>
										</a>
									</li>
								</ul>
							</p>


							<h1>Tags</h1>

							<p>
								<div class="tags">
									<a class="tag" href="#">News</a>
									<a class="tag" href="#">theme</a>
									<a class="tag" href="#">video</a>
									<a class="tag" href="#">branding</a>
									<a class="tag" href="#">design</a>
									<a class="tag" href="#">retina</a>
									<a class="tag" href="#">sidebar</a>
									<a class="tag" href="#">development</a>
								</div> <!-- / .tags -->
							</p>

						
						</div>



					</div> <!-- / .row -->

					<hr>	

					<div class="row">

						<div class="col-md-12">
							<h1>Progress bar</h1>
						</div>

						<div class="col-md-6">

							<div>
								<p class="margin-bottom-10">Web Design</p>
								<div class="progress">
									<div data-percentage="60" role="progressbar" class="progress-bar progress-bar-success" style="width: 60%;">
										60%
									</div>
								</div>
							</div>

							<div>
								<p class="margin-bottom-10">Wordpress</p>
								<div class="progress">
									<div data-percentage="80" role="progressbar" class="progress-bar progress-bar-info" style="width: 80%;">
										80%
									</div>
								</div>
							</div>
			
						</div> <!-- / .col-md-6 -->

						<div class="col-md-6">

							<div>
								<p class="margin-bottom-10">HTML 5</p>
								<div class="progress">
									<div data-percentage="99" role="progressbar" class="progress-bar" style="width: 99%;">
										99%
									</div>
								</div>
							</div>

							<div>
								<p class="margin-bottom-10">CSS 3</p>
								<div class="progress">
									<div data-percentage="95" role="progressbar" class="progress-bar progress-bar-warning" style="width: 95%;">
										95%
									</div>
								</div>
							</div>

						</div> <!-- / .col-md-6 -->

					</div> <!-- / .row -->

					<hr>

					<div class="row">
						<div class="col-md-6">
							<h1>Accordion</h1>

							<div class="accordion">

								<div class="accordion-item active">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Duis irure dolor in reprehenderit
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->

								<div class="accordion-item">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Duis irure dolor in reprehenderit
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->
								
								<div class="accordion-item">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Duis irure dolor in reprehenderit
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->

								<div class="accordion-item">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Duis irure dolor in reprehenderit
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->
								
							</div> <!-- / .accordion -->
						</div>  <!-- / .col-md-6 -->

						<div class="col-md-6">
							<h1>Toggles</h1>

							<div class="toggle">

								<div class="accordion-item ">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Lorem ipsum dolor sit amet
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->

								<div class="accordion-item ">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Duis irure dolor in reprehenderit
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->
								
								<div class="accordion-item active">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Lorem ipsum dolor sit amet
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->

								<div class="accordion-item">
									<div class="accordion-title uppercase">
										<a href="#">
											<span class="accordion-toggle fa fa-plus"></span>
											Duis irure dolor in reprehenderit
										</a>
									</div>   <!-- / .accordion-title -->
									<div class="accordion-content">
										<div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate minima neque dolorum nostrum amet, quod itaque perspiciatis facere, blanditiis nobis, enim laboriosam error aliquid officia.
											</p>
											<p>Eum affert meliore accumsan eu, sea probo etiam signiferumque in, ne mei alia necessitatibus. No cotidieque disputando nec, justo democritum te mei, dolore posidonium efficiendi mel eu. Cu civibus epicurei definiebas nam. Eu sed feugait fierent dissentiet, aeque pertinax splendide at mel.</p>
										</div>
									</div>  <!-- / .accordion-content -->
								</div>  <!-- / .accordion-item  -->
								
							</div> <!-- / .toggle -->

						</div>  <!-- / .col-md-6 -->
					</div> <!-- / .row -->

				</div> <!-- / .container -->

			</section>
			<!-- / # -->

<?php return ob_get_clean();