<?php
require_once "../../../maincore.php";
require_once THEMES."templates/header.php";

echo '<!-- 960 Container -->
<div class="container floated">

	<div class="sixteen floated page-title">

		<h2>Shortcodes <span>/ Elements</span></h2>

		<nav id="breadcrumbs">
			<ul>
				<li>You are here:</li>
				<li><a href="index-2.html">Home</a></li>
				<li>Elements</li>
			</ul>
		</nav>

	</div>

</div>
<!-- 960 Container / End -->


<!-- Page Content -->
<div class="page-content">


	<!-- 960 Container -->
	<div class="container">

	<!-- Buttons
	================================================== -->

		<div class="eight columns">

			<!-- Headline -->
			<h3 class="margin-reset">Buttons</h3><br />

			<a href="#" class="button gray">Button</a>&nbsp;
			<a href="#" class="button color">Button</a>&nbsp;
			<a href="#" class="button light">Button</a>

			<div class="clearfix" style="margin: 6px 0 0 0;"></div>

			<a href="#" class="button gray medium"><i class="icon-folder-open white"></i> Button</a>&nbsp;
			<a href="#" class="button color medium"><i class="icon-beaker white"></i> Button</a>&nbsp;
			<a href="#" class="button light medium"><i class="halflings user white"></i> Button</a>&nbsp;

			<div class="clearfix"></div>
			<br />
			<br />

		</div>


	<!-- Tabs
	================================================== -->

		<div class="eight columns">

			<!-- Headline -->
			<h3 class="margin-reset">Tabs</h3><br />

			<!-- Tabs Navigation -->
			<ul class="tabs-nav">
				<li class="active"><a href="#tab1">First Tab</a></li>
				<li><a href="#tab2">Second</a></li>
				<li><a href="#tab3">Third</a></li>
			</ul>

			<!-- Tabs Content -->
			<div class="tabs-container">
				<div class="tab-content" id="tab1">1. Lorem ipsum pharetra lorem felis. Aliquam egestas consectetur elementum class aptentea taciti sociosqu ad litora torquent perea conubia nostra lorem consectetur adipiscing elit.</div>
				<div class="tab-content" id="tab2">2. Lorem ipsum pharetra lorem felis. Aliquam egestas consectetur elementum class aptentea taciti sociosqu ad litora torquent perea conubia nostra lorem consectetur adipiscing elit.</div>
				<div class="tab-content" id="tab3">3. Lorem ipsum pharetra lorem felis. Aliquam egestas consectetur elementum class aptentea taciti sociosqu ad litora torquent perea conubia nostra lorem consectetur adipiscing elit.</div>
			</div>

		</div>

	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 25px; margin-bottom: 40px;"></div>


	<!-- 960 Container -->
	<div class="container">


	<!-- Large Notice
	================================================== -->

		<div class="eight columns">
			
			<!-- Headline -->
			<h3 class="margin-reset">Large Notice</h3><br />

			<!-- Large Notice -->
			<div class="large-notice">
				<h2>This is a Headline</h2>
				<p>This is example of style component for calling extra attention to featured content or information.</p>
				<a href="#" class="button medium color">Read More</a>
			</div>

		<br /><br />

		</div>


	<!-- Accordions
	================================================== -->

		<div class="eight columns">

			<!-- Headline -->
			<h3 class="margin-reset">Accordions</h3><br />

			<!-- Accordion -->
			<ul id="accordion">

				<!-- Section 1 -->
				<h3>Web Development</h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate aliquam egestas litora torquent conubia.</p>
				</div>

				<!-- Section 2 -->
				<h3>Top Notch Support</h3>
				<div>
					<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Nullam laoreet, velit ut condimentum feugiat.</p>
				</div>

				<!-- Section 3 -->
				<h3>Social Marketing</h3>
				<div>
					<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper.</p>
					<br />
					<ul class="check-list">
						<li>Compatible with the latest W3C standards</li>
						<li>Flexible, Responsive Layout</li>
						<li>Compatible with Major Browsers</li>
						<li>Attuned to Smartphones and Tablet PCs</li>
					</ul>
				</div>
			</div>
			<!-- Accordion / End -->

		</div>

	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 0px; margin-bottom: 40px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Progress Bars
	================================================== -->

		<div class="eight columns">

			<!-- Headline -->
			<h3 class="margin-reset">Progress Bars</h3><br />
		
			<!-- Progress Bars -->
			<div id="skill-bars">
				<div class="skill-bar"><div class="skill-bar-content" data-percentage="80"></div><span class="skill-title">Web Design 80%</span></div>
				<div class="skill-bar"><div class="skill-bar-content" data-percentage="90"></div><span class="skill-title">HTML / CSS 90%</span></div>
				<div class="skill-bar"><div class="skill-bar-content" data-percentage="85"></div><span class="skill-title">WordPress 85%</span></div>
				<div class="skill-bar"><div class="skill-bar-content" data-percentage="70"></div><span class="skill-title">jQuery 70%</span></div>
				<div class="skill-bar"><div class="skill-bar-content" data-percentage="75"></div><span class="skill-title">SEO 75%</span></div>
			</div>

		</div>


	<!-- Alert Boxes
	================================================== -->

		<div class="eight columns">

			<!-- Headline -->
			<h3 class="margin-reset">Alert Boxes</h3><br />


			<div class="notification error closeable">
				<p><span>Error!</span> Please fill in all the fields required.</p>
			</div>

			<div class="notification success closeable">
				<p><span>Success!</span> You did it, now relax and enjoy it.</p>
			</div>

			<div class="notification warning closeable">
				<p><span>Warning!</span> Change this and that and try again.</p>
			</div>

			<div class="notification notice closeable">
				<p><span>Notice!</span> Please edit the information below.</p>
			</div>

	</div>
	<!-- 960 Container / End -->


	<div class="clearfix"></div>
	<!-- Divider -->
	<div class="line" style="margin-top: 30px; margin-bottom: 40px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Regular Table
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">Client List</h3><br />

			<ul class="client-list">
				<li><img src="'.THEME.'images/logo-01.png" alt=""/></li>
				<li><img src="'.THEME.'images/logo-01.png" alt=""/></li>
				<li><img src="'.THEME.'images/logo-01.png" alt=""/></li>
				<li><img src="'.THEME.'images/logo-01.png" alt=""/></li>
				<li><img src="'.THEME.'images/logo-01.png" alt=""/></li>
			</ul>
		</div>

	</div>
	<!-- 960 Container / End -->


	<div class="line" style="margin-top: 40px; margin-bottom: 40px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Regular Table
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">Regular Table</h3><br />

			<table class="standard-table">

				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
					<th>Header 3</th>
					<th>Header 4</th>
				</tr>

				<tr>
					<td>Item #1</td>
					<td>Description</td>
					<td>100 GB</td>
					<td>100 GB</td>
				</tr>

				<tr>
					<td>Item #2</td>
					<td>Description</td>
					<td>200 GB</td>
					<td>200 GB</td>
				</tr>

				<tr>
					<td>Item #3</td>
					<td>Description</td>
					<td>300 GB</td>
					<td>300 GB</td>
				</tr>

				<tr>
					<td>Item #4</td>
					<td>Description</td>
					<td>400 GB</td>
					<td>400 GB</td>
				</tr>

				<tr>
					<td>Item #5</td>
					<td>Description</td>
					<td>500 GB</td>
					<td>500 GB</td>
				</tr>

			</table>

		</div>

	</div>
	<!-- 960 Container / End -->
<br />
</div>
<!-- Page Content / End -->';

require_once THEMES."templates/footer.php";
?>