RubyGems - kirgudu_base - Versions diffs - 0.0.1 → 0.0.3 - Mend

kirgudu_base 0.0.1 → 0.0.3

Files changed (871) hide show

data/app/views/admin_templates/good/zapanel/font-awesome/scss/font-awesome.scss ADDED Viewed

@@ -0,0 +1,33 @@
+/*!
+ *  Font Awesome 3.2.1
+ *  the iconic font designed for Bootstrap
+ *  ------------------------------------------------------------------------------
+ *  The full suite of pictographic icons, examples, and documentation can be
+ *  found at http://fontawesome.io.  Stay up to date on Twitter at
+ *  http://twitter.com/fontawesome.
+ *
+ *  License
+ *  ------------------------------------------------------------------------------
+ *  - The Font Awesome font is licensed under SIL OFL 1.1 -
+ *    http://scripts.sil.org/OFL
+ *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
+ *    http://opensource.org/licenses/mit-license.html
+ *  - Font Awesome documentation licensed under CC BY 3.0 -
+ *    http://creativecommons.org/licenses/by/3.0/
+ *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+ *    "Font Awesome by Dave Gandy - http://fontawesome.io"
+ *
+ *  Author - Dave Gandy
+ *  ------------------------------------------------------------------------------
+ *  Email: dave@fontawesome.io
+ *  Twitter: http://twitter.com/davegandy
+ *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
+ */
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "bootstrap";
+@import "extras";
+@import "icons";

data/app/views/admin_templates/good/zapanel/form.html ADDED Viewed

@@ -0,0 +1,790 @@
+<!DOCTYPE html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Forn Elements Page</title>
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Raleway:100,900,800,700,600,500,400,300,200' rel='stylesheet' type='text/css'><!-- Google Fonts -->
+<!-- Styles -->
+<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
+<link rel="stylesheet" href="font-awesome/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
+<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
+<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive Style -->
+<!-- Script -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- Jquery -->
+<script src="js/jquery.mCustomScrollbar.concat.min.js"></script><!-- Scroll Bar -->
+<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><!-- Circle Chart -->
+<script type="text/javascript"  src="js/bootstrap.js"></script><!-- Bootstrap -->
+<script type="text/javascript"  src="js/script.js"></script><!-- Script -->
+<script src="js/jquery.flot.min.js"></script><!-- Chart -->
+<script src="js/side-navigation-tag.js"></script>
+<script type="text/javascript" src="js/jquery.sparkline.min.js"></script> <!-- Sparkline -->
+<script src="js/jquery-ui.custom.min.js"></script> <!-- Jquery UI Custom -->
+<script src="js/jquery.easypiechart.min.js"></script> <!-- Easy Pie Chart -->
+<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script><!-- Sidebar Add Tag -->
+<script type="text/javascript" src="js/jquery.smartWizard.js"></script><!-- Wizard Form -->
+<!-- Wizard Form -->
+<script type="text/javascript">
+    $(document).ready(function(){
+    	// Smart Wizard
+  		$('#wizard').smartWizard();
+      function onFinishCallback(){
+        $('#wizard').smartWizard('showMessage','Finish Clicked');
+        //alert('Finish Clicked');
+      }
+		});
+</script>
+<!-- Sparklines -->
+<script type="text/javascript">
+	$(function() {
+	$("#new-orders").sparkline([4,5,6,7,6,5,4,3,2,2,3,4], {
+    type: 'bar',
+    height: '40px',
+	barSpacing:3,
+    barWidth: 6,
+    barColor: '#ff4646',
+    negBarColor: '#D6A838'});
+    });
+	$(function() {
+	$("#my-balance").sparkline([4,5,6,7,6,5,4,3,2,2,3,4], {
+    type: 'bar',
+    height: '40px',
+	barSpacing:3,
+    barWidth: 6,
+    barColor: '#21b95e',
+    negBarColor: '#27A9E3'});
+    });
+</script>
+</head>
+<body>
+<div class="wrapper dark">
+	<header>
+		<div class="logo">
+			<img src="images/logo.png" alt="" />
+		</div><!-- Logo -->
+		<div class="welcome-user">
+			<img src="images/user.png" alt=""/>
+			<span>LARA SMITH</span>
+			<p>Welcome Lara Smith</p>
+		</div>
+			<div class="side-navigation">
+				<ul>
+					<li><a title=""><i class="icon-laptop"></i>Dashboard<span>5</span></a>
+						<ul>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Dashboard 1</a></li>
+							<li><a href="dashboard2.html" title=""><i class="icon-angle-right"></i>Dashboard 2</a></li>
+							<li><a href="dashboard3.html" title=""><i class="icon-angle-right"></i>Dashboard 3</a></li>
+							<li><a href="hosting-dashboard.html" title=""><i class="icon-angle-right"></i>Hosting Dashboard</a></li>
+							<li><a href="sale-purchase-dashboard.html" title=""><i class="icon-angle-right"></i>For Sale & Purchase</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-cogs"></i>Components<span>13</span></a>
+						<ul>
+							<li><a href="charts.html" title=""><i class="icon-angle-right"></i>Charts</a></li>
+							<li><a href="notification.html" title=""><i class="icon-angle-right"></i>Notifications</a></li>
+							<li><a href="grids.html" title=""><i class="icon-angle-right"></i>Grids</a></li>
+							<li><a href="ribbon-grids.html" title=""><i class="icon-angle-right"></i>Ribbon Grids</a></li>
+							<li><a href="buttons.html" title=""><i class="icon-angle-right"></i>Buttons</a></li>
+							<li><a href="calendars.html" title=""><i class="icon-angle-right"></i>Calendars</a></li>
+							<li><a href="progressbar.html" title=""><i class="icon-angle-right"></i>Progress Bar</a></li>
+							<li><a href="file-manager.html" title=""><i class="icon-angle-right"></i>File Manager</a></li>
+							<li><a href="gallery.html" title=""><i class="icon-angle-right"></i>Gallery</a></li>
+							<li><a href="slider.html" title=""><i class="icon-angle-right"></i>Slider</a></li>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Page Tour</a></li>
+							<li><a href="collapse.html" title=""><i class="icon-angle-right"></i>Collapse</a></li>
+							<li><a href="range-slider.html" title=""><i class="icon-angle-right"></i>Range Slider</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-shopping-cart"></i>Cart Example</a>
+						<ul>
+							<li><a href="cart.html" title=""><i class="icon-angle-right"></i>Cart Page</a></li>
+							<li><a href="billing.html" title=""><i class="icon-angle-right"></i>Billing Page</a></li>
+							<li><a href="order-recieved.html" title=""><i class="icon-angle-right"></i>Order Recieved</a></li>
+						</ul>
+					</li>
+					<li><a href="form.html" title=""><i class="icon-pencil"></i>Form Elements</a></li>
+					<li><a href="icon.html" title=""><i class="icon-tint"></i>Icons</a></li>
+					<li><a href="tables.html" title=""><i class="icon-list-alt"></i>Tables</a></li>
+					<li><a href="typography.html" title=""><i class="icon-font"></i>Typography</a></li>
+					<li><a title=""><i class="icon-rocket"></i>Sample Pages<span>4</span></a>
+						<ul>
+							<li><a href="invoice.html" title=""><i class="icon-angle-right"></i>Invoice</a></li>
+							<li><a href="index.html" title=""><i class="icon-angle-right"></i>Log in</a></li>
+							<li><a href="404.html" title=""><i class="icon-angle-right"></i>404 Error Page</a></li>
+							<li><a href="blank-page.html" title=""><i class="icon-angle-right"></i>Blank Page</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-ellipsis-horizontal"></i>Bonus Free<span>5</span></a>
+						<ul>
+							<li><a href="price-table.html" title=""><i class="icon-angle-right"></i>Pricing Table</a></li>
+							<li><a href="search.html" title=""><i class="icon-angle-right"></i>Search Result</a></li>
+							<li><a href="inbox.html" title=""><i class="icon-angle-right"></i>Message</a></li>
+							<li><a href="profile.html" title=""><i class="icon-angle-right"></i>Profile</a></li>
+							<li><a href="faq.html" title=""><i class="icon-angle-right"></i>FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		<div class="social-statistics">
+			<h4 class="headings"><i class="icon-twitter"></i>Social Statistics</h4>
+				<div class="social-details">
+					<img src="images/fb.jpg" alt="" />
+					<span>530,893</span>
+					<p>Total Facebook Likes</p>
+				</div>
+				<div class="social-details">
+					<img src="images/twitter.jpg" alt="" />
+					<span>17,812</span>
+					<p>Total Twitter Tweets</p>
+				</div>
+				<div class="social-details">
+					<img src="images/rss.jpg" alt="" />
+					<span>2,159</span>
+					<p>Total Rss</p>
+				</div>
+		</div>
+		<div class="new-files">
+			<h4 class="headings"><i class="icon-envelope"></i> Your Emails</h4>
+			<ul>
+				<li>
+					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+					<a title="" href="#"><i class="icon-envelope blue"></i>From : David Smith</a>
+					<p>Dear Victoria, Congratulations! You work has been uploaded so please....</p>
+				</li>
+				<li>
+					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+					<a title="" href="#"><img src="images/email-thumb.png" alt="" />Re : John Doe</a>
+					<p>Dear Haxzer, What's Your Plan! You work has been uploaded so please....</p>
+				</li>
+				<li>
+					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+					<a title="" href="#"><i class="icon-envelope green"></i>Re : Parker</a>
+					<p>Dear Haxzer, What's Your Plan! You work has been uploaded so please....</p>
+				</li>
+			</ul>
+		</div>
+		<div class="tag-sec">
+			<input id="tags_1" type="text" class="tags" value="Here,you,can,add,tags" />
+		</div>
+		<a href="" class="slide-up-btn"><i class="icon-align-justify"></i></a>
+	</header><!-- Header End -->
+<section class="main-section">
+		<div class="responsive-logo">
+			<img src="images/logo.png" alt="" />
+		</div>
+			<div class="responsive-menu">
+			<div class="responsive-menu-dropdown">
+				<a title="" class="red">MENU <i class="icon-align-justify" ></i></a>
+			</div>
+				<ul>
+					<li><a title=""><i class="icon-laptop"></i>Dashboard<span>5</span></a>
+						<ul>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Dashboard 1</a></li>
+							<li><a href="dashboard2.html" title=""><i class="icon-angle-right"></i>Dashboard 2</a></li>
+							<li><a href="dashboard3.html" title=""><i class="icon-angle-right"></i>Dashboard 3</a></li>
+							<li><a href="hosting-dashboard.html" title=""><i class="icon-angle-right"></i>Hosting Dashboard</a></li>
+							<li><a href="sale-purchase-dashboard.html" title=""><i class="icon-angle-right"></i>For Sale & Purchase</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-cogs"></i>Components<span>13</span></a>
+						<ul>
+							<li><a href="charts.html" title=""><i class="icon-angle-right"></i>Charts</a></li>
+							<li><a href="notification.html" title=""><i class="icon-angle-right"></i>Notifications</a></li>
+							<li><a href="grids.html" title=""><i class="icon-angle-right"></i>Grids</a></li>
+							<li><a href="ribbon-grids.html" title=""><i class="icon-angle-right"></i>Ribbon Grids</a></li>
+							<li><a href="buttons.html" title=""><i class="icon-angle-right"></i>Buttons</a></li>
+							<li><a href="calendars.html" title=""><i class="icon-angle-right"></i>Calendars</a></li>
+							<li><a href="progressbar.html" title=""><i class="icon-angle-right"></i>Progress Bar</a></li>
+							<li><a href="file-manager.html" title=""><i class="icon-angle-right"></i>File Manager</a></li>
+							<li><a href="gallery.html" title=""><i class="icon-angle-right"></i>Gallery</a></li>
+							<li><a href="slider.html" title=""><i class="icon-angle-right"></i>Slider</a></li>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Page Tour</a></li>
+							<li><a href="collapse.html" title=""><i class="icon-angle-right"></i>Collapse</a></li>
+							<li><a href="range-slider.html" title=""><i class="icon-angle-right"></i>Range Slider</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-shopping-cart"></i>Cart Example</a>
+						<ul>
+							<li><a href="cart.html" title=""><i class="icon-angle-right"></i>Cart Page</a></li>
+							<li><a href="billing.html" title=""><i class="icon-angle-right"></i>Billing Page</a></li>
+							<li><a href="order-recieved.html" title=""><i class="icon-angle-right"></i>Order Recieved</a></li>
+						</ul>
+					</li>
+					<li><a href="form.html" title=""><i class="icon-pencil"></i>Form Elements</a></li>
+				</ul>
+				<ul>
+					<li><a href="icon.html" title=""><i class="icon-tint"></i>Icons</a></li>
+					<li><a href="tables.html" title=""><i class="icon-list-alt"></i>Tables</a></li>
+					<li><a href="typography.html" title=""><i class="icon-font"></i>Typography</a></li>
+					<li><a title=""><i class="icon-rocket"></i>Sample Pages<span>4</span></a>
+						<ul>
+							<li><a href="invoice.html" title=""><i class="icon-angle-right"></i>Invoice</a></li>
+							<li><a href="index.html" title=""><i class="icon-angle-right"></i>Log in</a></li>
+							<li><a href="404.html" title=""><i class="icon-angle-right"></i>404 Error Page</a></li>
+							<li><a href="blank-page.html" title=""><i class="icon-angle-right"></i>Blank Page</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-ellipsis-horizontal"></i>Bonus Free<span>5</span></a>
+						<ul>
+							<li><a href="price-table.html" title=""><i class="icon-angle-right"></i>Pricing Table</a></li>
+							<li><a href="search.html" title=""><i class="icon-angle-right"></i>Search Result</a></li>
+							<li><a href="inbox.html" title=""><i class="icon-angle-right"></i>Message</a></li>
+							<li><a href="profile.html" title=""><i class="icon-angle-right"></i>Profile</a></li>
+							<li><a href="faq.html" title=""><i class="icon-angle-right"></i>FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+<div class="container">
+	<div class="row">
+		<div class="main-bg">
+			<div class="top-stats">
+				<form>
+					<input type="text" placeholder="Your Search Here" class="search-box"/>
+					<input type="submit" class="search-submit" value=""/>
+				</form>				<div class="top-bar-chart">
+					<div class="bar-chart-details">
+						<p>New User</p>
+						<h5>17,561</h5>
+					</div>
+					<span id="new-orders" class="sparkline">4,5,6,7,6,5,4,3,2,2,4</span>
+				</div>
+				<div class="top-bar-chart">
+					<div class="bar-chart-details">
+						<p>My Balance</p>
+						<h5>$21,561.01</h5>
+					</div>
+					<span id="my-balance" class="sparkline">4,5,6,7,6,5,4,3,2,2,4</span>
+				</div>
+				<div class="top-stats-icons">
+					<i class="icon-rocket"></i><i class="icon-user"></i><i class="icon-laptop"></i><i class="icon-tasks"></i>
+				</div>
+			</div>
+			<div class="breadcrumbs-notify">
+				<a href="#" title="">Home / </a> <a href="#" class="current-page" title=""> Blank Page </a>
+				<div class="notification-auto">
+					<div class="fade-notification">
+					<h5><i class="icon-warning-sign"></i> Notification :</h5>
+					</div>
+					<div class="notification-slideshow">
+						<h6 class="notify-fade">Server 3 is Over Loader Please Check. <i>3:45pm</i></h6>
+						<h6 class="notify-fade">Server # 10 is Not Responding<i>1:30 Am</i></h6>
+						<h6 class="notify-fade">New User Registration Error . <i>Today</i></h6>
+						<h6 class="notify-fade">Domain Expiration Error <i>Yesterday</i></h6>
+						<h6 class="notify-fade">Database Over loaded 2% Remaining <i>9:59 pm</i></h6>
+						<h6 class="notify-fade">Application Erro Delete it Now <i>Last Week</i></h6>
+					</div>
+				</div>
+			</div>
+			<div class="heading-buttons-sec">
+				<h1>Form Elements</h1>
+				<p>Good Morning Lara Smith!!</p>
+					<div class="heading-buttons">
+						<ul>
+						<li class="dropdown heading-dropdown">
+							<a href="#" data-toggle="dropdown" role="button" id="drop1">Dropdown <b class="caret"></b></a>
+							<ul aria-labelledby="drop1" role="menu" class="dropdown-menu" id="menu1">
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
+							<li class="divider" role="presentation"></li>
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
+							</ul>
+						</li>
+						</ul>
+						<a href="#" title=""><i class="icon-paper-clip"></i></a><a href="#" title=""><i class="icon-calendar"></i></a><a href="#" title=""><i class="icon-envelope"></i></a><a href="#" title=""><i class="icon-refresh"></i></a>
+					</div>
+			</div>
+		<div class="body-sec">
+			<div class="col-md-12">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-table pull-left"></i><h3 class="pull-left">Wizard Form</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop2"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop2" role="menu" class="dropdown-menu" id="menu2">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div class="wizard-form-h">
+							<div id="wizard" class="swMain">
+								<ul>
+									<li><a href="#step-1">
+									<span class="stepDesc">
+									   Step 1
+									   <small>Account Information</small>
+									</span>
+								</a></li>
+									<li><a href="#step-2">
+									<span class="stepDesc">
+									   Step 2
+									   <small>Company Information</small>
+									</span>
+								</a></li>
+									<li><a href="#step-3">
+									<span class="stepDesc">
+									   Step 3
+									   <small>Submit your Form</small>
+									</span>
+								 </a></li>
+								</ul>
+								<div id="step-1">
+								<h2 class="StepTitle">Account Information</h2>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Your Name</label><input class="input-style" type="text" placeholder="Your Name" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Last Name</label><input class="input-style" type="text" placeholder="Last Name" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Your Email</label><input  type="text" placeholder="Your Email"/>
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+																										<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Your Password</label><input  type="password" placeholder="Your password" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+								</div>
+								<div id="step-2">
+								<h2 class="StepTitle">Step 2 Content</h2>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Company Name</label><input  type="text" placeholder="Company Name" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Your Post</label><input  type="text" placeholder="Your Post" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Company Email</label><input  type="text" placeholder="Company Email" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Website</label><input  type="text" placeholder="Http://" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-12">
+										<div class="inline-form">
+											<label class="c-label">Company Address</label><textarea  placeholder="Company Address" rows="5"></textarea>
+										</div>
+									</div>
+								</div>
+								<div id="step-3">
+									<h2 class="StepTitle">Step 3 Content</h2>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Name on Card</label><input  type="text" placeholder="Name on Card" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Card Number</label><input  type="text" placeholder="Card Number" />
+											<p>Example block-level help text here.</p>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Expiration Date</label>
+												<select>
+												<option>1</option>
+												<option>2</option>
+												<option>3</option>
+												<option>4</option>
+												<option>5</option>
+												<option>6</option>
+												<option>7</option>
+												<option>8</option>
+												<option>9</option>
+												<option>10</option>
+												<option>11</option>
+												<option>12</option>
+												</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="inline-form">
+											<label class="c-label">Expiration Year</label>
+												<select>
+												<option>2009</option>
+												<option>2010</option>
+												<option>2011</option>
+												<option>2012</option>
+												<option>2013</option>
+												<option>2014</option>
+												<option>2015</option>
+												<option>2016</option>
+												<option>2017</option>
+												<option>2018</option>
+												<option>2019</option>
+												<option>2020</option>
+												</select>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-table pull-left"></i><h3 class="pull-left">Check box and Radio Buttons Examples</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop4"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop4" role="menu" class="dropdown-menu" id="menu4">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<form>
+						  <div class="checkbox pull-left">
+							<label>
+							  <input type="checkbox" value="">
+							  Option one is this and that&mdash;be sure to include why it's great
+							</label>
+						  </div>
+						  <br>
+						  <div class="radio pull-left">
+							<label>
+							  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
+							  Option one is this and that&mdash;be sure to include why it's great
+							</label>
+						  </div>
+						  <div class="radio pull-left">
+							<label>
+							  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+							  Option two can be something else and selecting it will deselect option one
+							</label>
+						  </div>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-table pull-left"></i><h3 class="pull-left">Textarea Example</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop5"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu5">
+							<li role="presentation"><a class="hide-btn" title=""><i class="icon-angle-up pull-right"></i></a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<textarea class="form-control" rows="3"></textarea>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-12">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-table pull-left"></i><h3 class="pull-left">Sign in Form with file Input</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop3"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop3" role="menu" class="dropdown-menu" id="menu3">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<form class="sec" role="form">
+						  <div class="form-group">
+							<label for="exampleInputEmail1">Email address</label>
+							<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+						  </div>
+						  <div class="form-group">
+							<label for="exampleInputPassword1">Password</label>
+							<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+						  </div>
+						  <div class="form-group">
+							<label for="exampleInputFile">File input</label>
+							<input type="file" id="exampleInputFile">
+							<p class="help-block">Example block-level help text here.</p>
+						  </div>
+						  <div class="checkbox">
+							<label>
+							  <input type="checkbox"> Check me out
+							</label>
+						  </div>
+						  <button type="submit" class="btn gray pull-right">Submit</button>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-table pull-left"></i><h3 class="pull-left">Sign in Form Without Label</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop6"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop6" role="menu" class="dropdown-menu" id="menu6">
+							<li role="presentation"><a class="hide-btn" title=""><i class="icon-angle-up pull-right"></i></a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<form class="sec" role="form">
+						  <div class="form-group">
+							<label class="sr-only" for="exampleInputEmail2">Email address</label>
+							<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+						  </div>
+						  <div class="form-group">
+							<label class="sr-only" for="exampleInputPassword2">Password</label>
+							<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+						  </div>
+						  <div class="checkbox">
+							<label>
+							  <input type="checkbox"> Remember me
+							</label>
+						  </div>
+						  <button type="submit" class="btn gray btn-default">Sign in</button>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-table pull-left"></i><h3 class="pull-left">Select List and Multi Select Example</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop7"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop7" role="menu" class="dropdown-menu" id="menu7">
+							<li role="presentation"><a class="hide-btn" title=""><i class="icon-angle-up pull-right"></i></a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div class="sec">
+						<select class="form-control">
+							<option>1</option>
+							<option>2</option>
+							<option>3</option>
+							<option>4</option>
+							<option>5</option>
+						</select>
+						</div>
+						<div class="sec">
+						  <select multiple="" class="form-control">
+							<option>1</option>
+							<option>2</option>
+							<option>3</option>
+							<option>4</option>
+							<option>5</option>
+						  </select>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-12">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-ban-circle pull-left"></i><h3 class="pull-left">Disabled Elements</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop8"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop8" role="menu" class="dropdown-menu" id="menu8">
+							<li role="presentation"><a class="hide-btn" title=""><i class="icon-angle-up pull-right"></i></a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<fieldset disabled="">
+						<div class="form-group">
+						  <label for="disabledTextInput">Disabled input</label>
+						  <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+						</div>
+						<div class="form-group">
+						  <label for="disabledSelect">Disabled select menu</label>
+						  <select id="disabledSelect" class="form-control">
+							<option>Disabled select</option>
+						  </select>
+						</div>
+						<div class="checkbox">
+						  <label>
+							<input type="checkbox"> Can't check this
+						  </label>
+						</div>
+						<button type="submit" class="btn green btn-primary">Submit</button>
+					  </fieldset>
+					</div>
+				</div>
+			</div>
+</div><!-- Body Sec -->
+</div><!-- main-bg-->
+</div><!-- Row -->
+</div><!-- Container -->
+</section><!-- Main Section -->
+</div><!-- Wrapper -->
+	<!-- Side Panel -->
+	<div class="side-panel green">
+		<a class="panel-button gray"><i class="icon-cogs"></i></a>
+		<h4 class="gray">Sidebar Theme</h4>
+		<div class="patterns">
+			<div class="light-theme-sec">
+			<img src="images/light-theme-thumb.jpg" alt="" /><a title="" class="light-theme">LIGHT</a>
+			</div>
+			<div class="dark-theme-sec">
+			<img src="images/dark-theme-thumb.jpg" alt="" /><a title="" class="dark-theme">DARK</a>
+			</div>
+			<a title="" class="gradient-theme-btn">GRADIENT THEME</a>
+		</div>
+	</div>
+</body><!-- Body -->
+</html><!-- Html -->