documentation/tutorial-components.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="../src/assets/img/apple-icon.png" />
	<link rel="icon" type="image/png" href="../src/assets/img/favicon.png" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Tutorial Components - Material Dashboard by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

	<!--     Fonts and icons     -->
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

	<!-- CSS Files -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" />
    <link href="./css/material-dashboard.css" rel="stylesheet"/>
	<link href="css/demo-documentation.css" rel="stylesheet" />

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

	<style>
		pre.prettyprint{
		    background-color: #eee;
		    border: 0px;
		    margin-bottom: 60px;
		    margin-top: 30px;
		    padding: 20px;
		    text-align: left;
		}
		.atv, .str{
		    color: #05AE0E;
		}
		.tag, .pln, .kwd{
		    color: #3472F7;
		}
		.atn{
		    color: #2C93FF;
		}
		.pln{
		    color: #333;
		}
		.com{
		    color: #999;
		}
		.space-top{
		    margin-top: 50px;
		}
		.area-line{
		    border: 1px solid #999;
		    border-left: 0;
		    border-right: 0;
		    color: #666;
		    display: block;
		    margin-top: 20px;
		    padding: 8px 0;
		    text-align: center;
		}
		.area-line a{
		    color: #666;
		}
		.container-fluid{
		    padding-right: 15px;
		    padding-left: 15px;
		}

	</style>
</head>

<body class="components-page">

<nav class="navbar navbar-transparent  navbar-fixed-top navbar-color-on-scroll" >
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button id="menu-toggle" type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar bar1"></span>
        <span class="icon-bar bar2"></span>
        <span class="icon-bar bar3"></span>
      </button>
      <a href="http://www.creative-tim.com">
           <div class="logo-container">
                <div class="logo">
                    <img src="../src/assets/img/new_logo.png" alt="Creative Tim Logo">
                </div>
                <div class="brand">
                    Creative Tim
                </div>
            </div>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse text-center">
		<ul class="nav navbar-nav navbar-center">
			<li>
				<div class="navbar-title hidden text-center">
					<h4>
						<div class="image-container">
							<img src="../src/assets/img/angular2-logo-red.png" alt="Angular2 Logo">
						</div>
						Material Dashboard Angular
					</h4>
				</div>
			</li>
		</ul>
		<ul  class="nav navbar-nav navbar-right">
			<li>
                <a href="https://github.com/creativetimofficial/material-dashboard-angular/issues" target="_blank">Have an issue?</a>
            </li>
			<li>
				<a href="https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=mdangular-free" target="_blank" class="btn btn-danger btn-round">Upgrade to PRO</a>
			</li>
    	</ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

	<div class="page-header header-filter" style="background-image: url('../src/assets/img/cover.jpeg');">
		<div class="container">
			<div class="row">
				<div class="col-md-10 col-md-offset-1 text-center">
					<div class="image-header">
						<img src="../src/assets/img/angular2-logo-red.png">
					</div>

					<h1 class="title">Material Dashboard Angular 2+</h1>
					<h3 class="sub-title">Tutorial and Components</h3>
				</div>
			</div>
		</div>
	</div>

    <div class="main main-raised">
        <div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <div class="fixed-section" data-spy="affix" data-offset-top="340">
                    <ul>
						<li><a href="#license">License</a></li>
						<li><a href="#tutorial">Tutorial</a></li>
						<li><a href="#pablo">&nbsp;</a></li>
						<li><a href="#components"><b>Components</b></a></li>
                        <li><a href="#buttons-row">Buttons</a></li>
                        <li><a href="#checkbox-row">Checkbox/Radio</a></li>
                        <li><a href="#dropdown-row">Dropdown</a></li>
                        <li><a href="#inputs-row">Inputs</a></li>
                        <li><a href="#textarea-row">Textarea</a></li>
                        <li><a href="#navbar-row">Navigation</a></li>
						<li><a href="#navpills-row">Nav Pills</a></li>
						<li><a href="#tables-row">Tables</a></li>
						<li><a href="#icons-row">Material Icons</a></li>
                        <li><a href="#notification-row">Notifications</a></li>
                        <li><a href="#cards-row">Cards</a></li>
						<li><a href="#changing-colors">Changing Colors (SASS)</a></li>
						<li><a href="#api">How to setup Google API Keys</a></li>

                    </ul>
                </div>
            </div>
            <div class="col-md-8 col-md-offset-1">

			<!-- License Row -->
			<div class="tim-row tim-row-first" id="license">
				<h2 class="text-center">MIT License</h2>
				<legend></legend>
				<p>
					Copyright (c) 2017 <a href="https://www.creative-tim.com?ref=material-dashboard-angular" target="_blank">Creative Tim</a>
					<br><br>
					Permission is hereby granted, free of charge, to any person obtaining a copy
					of this software and associated documentation files (the "Software"), to deal
					in the Software without restriction, including without limitation the rights
					to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
					copies of the Software, and to permit persons to whom the Software is
					furnished to do so, subject to the following conditions:
					<br><br>
					The above copyright notice and this permission notice shall be included in all
					copies or substantial portions of the Software.
					<br><br>
					THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
					IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
					FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
					AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
					LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
					OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
					SOFTWARE.
				</p>
			</div>

			<!-- Tutorial Row -->
			<div class="tim-row" id="tutorial">
				<h2 class="text-center">Short Description and Usage</h2>
				<legend></legend>
				<p>
					<b>Material Dashboard Angular CLI</b> is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard Angular 2 was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.
				</p>
			</div>

			<div class="tim-row">
				<h2 class="text-center">Getting Started</h2>
				<legend></legend>
				<p>
					The <b>Material Dashboard Angular CLI</b> is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work.
				</p>
				<p>
					To jump start your project, you can use our start-up template where all the files are already included and ready to use. If you do however, want to start from scratch, you can see the file structure below. The core JavaScript is contained in "js/material-bootstrap-angular.js". Some functions are called from "js/demo.js" because they are presented only for demo purpose, you can check there how they are working and duplicate their effect on your projct. For the other files, you should add them if you use the specific element inside your page.
				</p>
				<ul>
					<li><p>Install NodeJs from <a href="https://nodejs.org/en" target="_blank">NodeJs Official Page</a></p></li>
					<li><p>Open Terminal</p></li>
					<li><p>Go to your file project</p></li>
					<li><p>Run in terminal:<pre>npm install -g @angular/cli@latest</pre></p></li>
					<li><p>Then:<pre>npm install</pre></p></li>
					<li><p>And: <pre>npm start</pre></p></li>
				</ul>
			</div>


			<div class="tim-row">
				<h2 class="text-left">File Structure</h2>
				<legend></legend>
				<p>
					Once you have downloaded the archive and opened it, you will find the following structure:
				</p>
				<p>
					Let's take it one by one:
				</p>
				<p>
				<pre>
md-free-angular-cli
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── angular-cli.json
├── documentation
├── e2e
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.routing.ts
│   │   ├── components
│   │   │   ├── components.module.ts
│   │   │   ├── footer
│   │   │   │   ├── footer.component.css
│   │   │   │   ├── footer.component.html
│   │   │   │   ├── footer.component.spec.ts
│   │   │   │   └── footer.component.ts
│   │   │   ├── navbar
│   │   │   │   ├── navbar.component.css
│   │   │   │   ├── navbar.component.html
│   │   │   │   ├── navbar.component.spec.ts
│   │   │   │   └── navbar.component.ts
│   │   │   └── sidebar
│   │   │       ├── sidebar.component.css
│   │   │       ├── sidebar.component.html
│   │   │       ├── sidebar.component.spec.ts
│   │   │       └── sidebar.component.ts
│   │   ├── dashboard
│   │   │   ├── dashboard.component.css
│   │   │   ├── dashboard.component.html
│   │   │   ├── dashboard.component.spec.ts
│   │   │   └── dashboard.component.ts
│   │   ├── icons
│   │   │   ├── icons.component.css
│   │   │   ├── icons.component.html
│   │   │   ├── icons.component.spec.ts
│   │   │   └── icons.component.ts
│   │   ├── maps
│   │   │   ├── maps.component.css
│   │   │   ├── maps.component.html
│   │   │   ├── maps.component.spec.ts
│   │   │   └── maps.component.ts
│   │   ├── notifications
│   │   │   ├── notifications.component.css
│   │   │   ├── notifications.component.html
│   │   │   ├── notifications.component.spec.ts
│   │   │   └── notifications.component.ts
│   │   ├── table-list
│   │   │   ├── table-list.component.css
│   │   │   ├── table-list.component.html
│   │   │   ├── table-list.component.spec.ts
│   │   │   └── table-list.component.ts
│   │   ├── typography
│   │   │   ├── typography.component.css
│   │   │   ├── typography.component.html
│   │   │   ├── typography.component.spec.ts
│   │   │   └── typography.component.ts
│   │   ├── upgrade
│   │   │   ├── upgrade.component.css
│   │   │   ├── upgrade.component.html
│   │   │   ├── upgrade.component.spec.ts
│   │   │   └── upgrade.component.ts
│   │   └── user-profile
│   │       ├── user-profile.component.css
│   │       ├── user-profile.component.html
│   │       ├── user-profile.component.spec.ts
│   │       └── user-profile.component.ts
│   ├── assets
│   │   ├── css
│   │   ├── img
│   │   ├── js
│   │   │   └── material.min.js
│   │   └── sass
│   │       ├── material-dashboard.scss
│   │       └── md
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
├── tslint.json
└── typings</pre>
			   </p>
			</div>

			<div class="tim-row">
				<h2 class="text-left">Restyled Components</h2>
 			   <legend></legend>
 			   <p>
 			   Here is the list of Bootstrap 3 components that were restyled in <b>Material Dashboard Angular CLI</b>:
 				   <ul>
 					   <li> Buttons </li>
 					   <li> Inputs</li>
 					   <li> Textarea</li>
 					   <li> Menu </li>
 					   <li> Dropdown</li>
 					   <li> Navigation Menu</li>
 					   <li> Labels</li>
 					   <li> Notifications</li>
 					   <li> Typography</li>
 					   <li> Tables</li>
 				   </ul>
 			   </p>
			</div>


			<div class="tim-row">
				<h2 class="text-left">New Components</h2>
 			   <legend></legend>
 			   <p>
 			   Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous.
 			   </p>
 			   <p>
 			   Going through them, we added:
 			   <ul>
 				   <li> Checkboxes</li>
 				   <li> Radio Buttons</li>
 				   <li> Card Stats</li>
				   <li> Card Charts</li>
 				   <li> Card with tabs</li>
 				   <li> Material Icons</li>
 			   </ul>
 			   </p>
			</div>
			<!-- End Tutorial Row -->

			<div class="tim-row" id="components">
				<h2 class="text-center">Components</h2>
			</div>
	    	<!-- buttons row -->
	        <div class="tim-row" id="buttons-row">

                <h2>Buttons</h2>
                <legend></legend>
                <h4>Colors</h4>
                <p>We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette.</p>
                <p>
                       <button class="btn btn-default">Default</button>
                       <button class="btn btn-primary">Primary</button>
                       <button class="btn btn-info">Info</button>
                       <button class="btn btn-success">Success</button>
                       <button class="btn btn-warning">Warning</button>
                       <button class="btn btn-danger">Danger</button>
                </p>

    			<pre class="prettyprint">

&lt;button class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;
&lt;button class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
    			</pre>

			</div>


    		<!-- checkbox row -->
        	<div class="tim-row" id="checkbox-row">
                <h2> Checkboxes </h2>
                <legend></legend>
                <p>
                    To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js
                </p>
                <p>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes">
							Unchecked
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes" checked>
							Checked
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes" disabled>
							Disabled Unchecked
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes" disabled checked>
							Disabled Checked
						</label>
					</div>
                </p>

    			<pre class="prettyprint">
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot;&gt;
		Unchecked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; checked&gt;
		Checked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled&gt;
		Disabled Unchecked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled checked&gt;
		Disabled Checked
	&lt;/label&gt;
&lt;/div&gt;

				</pre>
        	</div>
    		<!-- end row -->

    		<!-- radio row -->
        	<div class="tim-row" id="radio-row">
            	<h2> Radio Buttons </h2>
            	<legend></legend>
                <p>
                    To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.
                </p>
                <p>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadios">
							Radio is off
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadios" checked="true">
							Radio is on
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadiosDisabled" disabled>
							Disabled Radio is off
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
							Disabled Radio is on
						</label>
					</div>
                </p>

				<pre class="prettyprint">
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot;&gt;
		Radio is off
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; checked=&quot;true&quot;&gt;
		Radio is on
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; disabled&gt;
		Disabled Radio is off
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; checked=&quot;true&quot; disabled&gt;
		Disabled Radio is on
	&lt;/label&gt;
&lt;/div&gt;
    			</pre>
		    </div>
		    <!-- end row -->

		    <!-- dropdown row -->
		    <div class="tim-row" id="dropdown-row">
            	<h2> Dropdown </h2>
            	<legend></legend>
            	<p> We are very proud to present the dropdown which has a subtle animation. <b>IMPORTANT!</b> The focus state is <b>Purple</b> by default and, on the dropdowns from the navbars, they will take the colour of the parent navbar.</p>

	            <div class="row">
	                <div class="col-md-3">
    	                <div class="dropdown">
    	                	<a href="#pablo" class="btn dropdown-toggle" data-toggle="dropdown">
    	                    	Regular
    	                    	<b class="caret"></b>
    	                	</a>
    	                	<ul class="dropdown-menu">
    	                    	<li><a href="#pablo">Action</a></li>
    	                    	<li><a href="#pablo">Another action</a></li>
    	                    	<li><a href="#pablo">Something else here</a></li>
    	                    	<li class="divider"></li>
    	                    	<li><a href="#pablo">Separated link</a></li>
    	                    	<li class="divider"></li>
    	                    	<li><a href="#pablo">One more separated link</a></li>
    	                	</ul>
	                    </div>
	                </div>
	            </div>

    			<pre class="prettyprint">
&lt;div class=&quot;dropdown&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
    	Regular
    	&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
	&lt;/a&gt;
	&lt;ul class=&quot;dropdown-menu&quot;&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
    			</pre>
		    </div>
		    <!-- end row -->

    		<!-- inputs row -->
        	<div class="tim-row" id="inputs-row">
                <h2>Inputs </h2>
                <legend></legend>

                <p>
                We restyled the Bootstrap inputs to give them a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.
                </p>
                <div class="row">
					<div class="col-sm-4">
	                	<div class="form-group form-black">
	        	        	<input type="text" value="" placeholder="Regular" class="form-control" />
	                	</div>
	                </div>

					<div class="col-sm-4">
						<div class="form-group form-black label-floating">
							<label class="control-label">With Floating Label</label>
							<input type="email" class="form-control">
						</div>
					</div>

	                <div class="col-sm-4">
	                	<div class="form-group label-floating has-success">
							<label class="control-label">Success input</label>
	                    	<input type="text" value="Success" class="form-control" />
							<span class="form-control-feedback">
								<i class="material-icons">done</i>
							</span>
	                	</div>
	                </div>

	                <div class="col-sm-4">
	                	<div class="form-group label-floating has-error">
							<label class="control-label">Error input</label>
	                    	<input type="email" value="Error Input" class="form-control" />
	                    	<span class="material-icons form-control-feedback">clear</span>
	                	</div>
	                </div>

					<div class="col-sm-4">
						<div class="input-group">
							<span class="input-group-addon">
								<i class="material-icons">group</i>
							</span>
							<div class="form-group form-black">
								<input type="text" class="form-control " placeholder="With Material Icons">
		                	</div>
						</div>
					</div>

					<div class="col-sm-4">
						<div class="input-group ">
							<span class="input-group-addon">
								<i class="fa fa-group"></i>
							</span>
							<div class="form-group form-black">
								<input type="text" class="form-control" placeholder="With Font Awesome Icons">
		                	</div>
						</div>
					</div>
	        	</div>


    			<pre class="prettyprint">

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group&quot;&gt;
    	&lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;Regular&quot; class=&quot;form-control&quot; /&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;With Floating Label&lt;/label&gt;
		&lt;input type=&quot;email&quot; class=&quot;form-control&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating has-success&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;Success input&lt;/label&gt;
		&lt;input type=&quot;text&quot; value=&quot;Success&quot; class=&quot;form-control&quot; /&gt;
		&lt;span class=&quot;form-control-feedback&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;done&lt;/i&gt;
		&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating has-error&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;Error input&lt;/label&gt;
		&lt;input type=&quot;email&quot; value=&quot;Error Input&quot; class=&quot;form-control&quot; /&gt;
		&lt;span class=&quot;material-icons form-control-feedback&quot;&gt;clear&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;input-group&quot;&gt;
		&lt;span class=&quot;input-group-addon&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;group&lt;/i&gt;
		&lt;/span&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Material Icons&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;input-group&quot;&gt;
		&lt;span class=&quot;input-group-addon&quot;&gt;
			&lt;i class=&quot;fa fa-group&quot;&gt;&lt;/i&gt;
		&lt;/span&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Font Awesome Icons&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;
				</pre>
    		</div>
    		<!-- end row -->


			<!-- textarea row -->
			<div class="tim-row" id="textarea-row">
			    <h2>Textarea</h2>
			    <legend></legend>
			    <p>The textarea has a new style, so it looks similar to all other inputs.</p>

				<div class="form-group form-black">
					<textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
				</div>
				<pre class="prettyprint">
&lt;textarea class=&quot;form-control&quot; placeholder=&quot;Here can be your nice text&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
				</pre>
		    </div>
		    <!-- end row -->

    		<!-- navbar row -->
    		<div class="tim-row" id="navbar-row">
	            <h2>Navbar </h2>
	            <legend></legend>
	            <p>The classic Bootstrap Navbar was restyled:</p>

	            <div id="navbar">
	                <nav class="navbar navbar-default" role="navigation">
	                	<div class="container-fluid">
	                    	<div class="navbar-header">
	                    		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			                        <span class="sr-only">Toggle navigation</span>
			                        <span class="icon-bar"></span>
			                        <span class="icon-bar"></span>
			                        <span class="icon-bar"></span>
	                    		</button>
	                    		<a class="navbar-brand" href="#pablo">Brand</a>
	                    	</div>

	                    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                    		<ul class="nav navbar-nav">
	                				<li class="active"><a href="#pablo">Link</a></li>
	                        		<li><a href="#pablo">Link</a></li>
	                        		<li class="dropdown">
	                        			<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	                        			<ul class="dropdown-menu">
											<li><a href="#pablo">Action</a></li>
											<li><a href="#pablo">Another action</a></li>
											<li><a href="#pablo">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#pablo">Separated link</a></li>
											<li class="divider"></li>
											<li><a href="#pablo">One more separated link</a></li>
	                        			</ul>
	                        		</li>
	                    		</ul>
	                    	</div>
	                	</div>
	                </nav>
	            </div><!--  end navbar -->

	    		<pre class="prettyprint">
&lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt;
	&lt;div class=&quot;container-fluid&quot;&gt;
    	&lt;div class=&quot;navbar-header&quot;&gt;
    		&lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
    		&lt;/button&gt;
    		&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
    	&lt;/div&gt;

    	&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;
    		&lt;ul class=&quot;nav navbar-nav&quot;&gt;
				&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        		&lt;li class=&quot;dropdown&quot;&gt;
        			&lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
        			&lt;ul class=&quot;dropdown-menu&quot;&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
					  &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
					  &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
				      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        			&lt;/ul&gt;
        		&lt;/li&gt;
    		&lt;/ul&gt;
    	&lt;/div&gt;
	&lt;/div&gt;
&lt;/nav&gt;
	    		</pre>

	            <p class="space-top">Besides the default navbar, we added 5 new colors: primary, blue, green, orange, red. If you want to use one of them, you have to replace the <code>.navbar-default</code> or <code>.navbar-primary</code> with the class for the chosen colour <code>.navbar-info</code>, <code>.navbar-success</code>, <code>.navbar-warning</code> or <code>.navbar-danger</code>.</p>

		    <!-- navbar default -->
		    <div id="navbar-default">
		        <nav class="navbar navbar-default" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		              </ul>
		            </div>
		          </div>
		        </nav>

		    </div><!--  end navbar -->

		    <!-- navbar info -->
		    <div id="navbar-info">
	            <nav class="navbar navbar-info" role="navigation">
	              <div class="container-fluid">
	                <!-- Brand and toggle get grouped for better mobile display -->
	                <div class="navbar-header">
	                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	                    <span class="sr-only">Toggle navigation</span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                  </button>
	                  <a class="navbar-brand" href="#pablo">Brand</a>
	                </div>

	                <!-- Collect the nav links, forms, and other content for toggling -->
	                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                  <ul class="nav navbar-nav">
	                    <li class="active"><a href="#pablo">Link</a></li>
	                    <li><a href="#pablo">Link</a></li>
	                  </ul>
	                </div><!-- /.navbar-collapse -->
	              </div><!-- /.container-fluid -->
	            </nav>

	        </div><!--  end navbar -->

		    <!-- navbar success -->
		    <div id="navbar-success">
		        <nav class="navbar navbar-success" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		              </ul>
		            </div><!-- /.navbar-collapse -->
		          </div><!-- /.container-fluid -->
		        </nav>

		    </div><!--  end navbar -->

		    <!-- navbar warning -->
		    <div id="navbar-warning">
		        <nav class="navbar navbar-warning" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		              </ul>
		            </div><!-- /.navbar-collapse -->
		          </div><!-- /.container-fluid -->
		        </nav>

		    </div><!--  end navbar -->

		    <!-- navbar danger -->
		    <div id="navbar-danger">
		        <nav class="navbar navbar-danger" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		              </ul>
		            </div><!-- /.navbar-collapse -->
		          </div><!-- /.container-fluid -->
		        </nav>

		    </div><!--  end navbar -->

            <p class="space-top">
                Besides all this customisation, we have an extra navbar. <code>.navbar-transparent</code> is a special class that you can to use if you want the navbar to be transparent.
            </p>

	    </div>
            <!-- end row -->

    	    <!-- nav pills row -->
    	    <div class="tim-row" id="navpills-row">
                <h2> Nav Pills</h2>
                <legend></legend>
                <p>
                    We changed the design for the Bootstrap nav pills into something a bit more fresh. We have also added more colour classes for customisation like <code>.nav-pills-primary</code>, <code>.nav-pills-info</code>, <code>.nav-pills-success</code>, <code>.nav-pills-warning</code>, <code>.nav-pills-danger</code>.
                </p>
                <h4>Simple</h4>
                <p>We added coloured shadows to the pills and created two options: horizontal and vertical (using the class <code>.nav-stacked</code>).</p>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="nav nav-pills nav-pills-info">
                          <li class="active"><a href="#pill1" data-toggle="tab">Profile</a></li>
                          <li><a href="#pill2" data-toggle="tab">Settings</a></li>
                          <li><a href="#pill3" data-toggle="tab">Options</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <ul class="nav nav-pills nav-pills-info nav-stacked">
                          <li class="active"><a href="#tab1" data-toggle="tab">Profile</a></li>
                          <li><a href="#tab2" data-toggle="tab">Settings</a></li>
                          <li><a href="#tab3" data-toggle="tab">Options</a></li>
                        </ul>
                    </div>
                </div>


                <h4>With Icons</h4>
                <p>If you want to also add icons, you can use this version with the two options: horizontal and vertical. To use them, please add the <code>.nav-pills-icons</code> class.</p>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="nav nav-pills nav-pills-icons nav-pills-primary" role="tablist">
            				<li>
            					<a href="#dashboard" role="tab" data-toggle="tab">
            						<i class="material-icons">dashboard</i>
            						Dashboard
            					</a>
            				</li>
            				<li class="active">
            					<a href="#schedule" role="tab" data-toggle="tab">
            						<i class="material-icons">schedule</i>
            						Schedule
            					</a>
            				</li>
            				<li>
            					<a href="#tasks" role="tab" data-toggle="tab">
            						<i class="material-icons">list</i>
            						Tasks
            					</a>
            				</li>
            			</ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
    						<li class="active">
    							<a href="#dashboard-2" role="tab" data-toggle="tab">
    								<i class="material-icons">dashboard</i>
    								Dashboard
    							</a>
    						</li>
    						<li >
                                <a href="#schedule-2" role="tab" data-toggle="tab">
    								<i class="material-icons">schedule</i>
    								Schedule
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>


        		<pre class="prettyprint">
&lt;!-- simple and horizontal --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-info&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#pill1&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#pill2&quot; data-toggle=&quot;tab&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#pill3&quot; data-toggle=&quot;tab&quot;&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- simple and vertical --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-info nav-stacked&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#tab1&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#tab2&quot; data-toggle=&quot;tab&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#tab3&quot; data-toggle=&quot;tab&quot;&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- with icons and horizontal --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-icons nav-pills-primary&quot; role=&quot;tablist&quot;&gt;
	&lt;li&gt;
		&lt;a href=&quot;#dashboard&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
			Dashboard
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li class=&quot;active&quot;&gt;
		&lt;a href=&quot;#schedule&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
			Schedule
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href=&quot;#tasks&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;list&lt;/i&gt;
			Tasks
		&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- with icons and vertical --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-icons nav-stacked&quot; role=&quot;tablist&quot;&gt;
	&lt;li class=&quot;active&quot;&gt;
		&lt;a href=&quot;#dashboard-2&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
			Dashboard
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li &gt;
        &lt;a href=&quot;#schedule-2&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
			Schedule
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
        		</pre>
    		</div>
		    <!-- end row -->

		    <!-- tables row -->
		    <div class="tim-row" id="tables-row">
		        <h2>Tables</h2>
		        <legend></legend>
		        <p>All Boostrap classes for tables are supported and improved.</p>
		        <h4>Simple Table inside a card</h4>
				<div class="row">
					<div class="col-md-12">
						<div class="card">
							<div class="card-header" data-background-color="red">
								<h4 class="title">Table Title</h4>
								<p class="category">Here is a subtitle for this table</p>
							</div>
							<div class="card-content table-responsive">
								<table class="table">
									<thead class="text-danger">
										<th>Name</th>
										<th>Country</th>
										<th>City</th>
										<th>Salary</th>
									</thead>
									<tbody>
										<tr>
											<td>Dakota Rice</td>
											<td>Niger</td>
											<td>Oud-Turnhout</td>
											<td class="text-danger">$36,738</td>
										</tr>
										<tr>
											<td>Minerva Hooper</td>
											<td>Curaçao</td>
											<td>Sinaai-Waas</td>
											<td class="text-danger">$23,789</td>
										</tr>
										<tr>
											<td>Sage Rodriguez</td>
											<td>Netherlands</td>
											<td>Baileux</td>
											<td class="text-danger">$56,142</td>
										</tr>
										<tr>
											<td>Philip Chaney</td>
											<td>Korea, South</td>
											<td>Overland Park</td>
											<td class="text-danger">$38,735</td>
										</tr>
										<tr>
											<td>Doris Greene</td>
											<td>Malawi</td>
											<td>Feldkirchen in Kärnten</td>
											<td class="text-danger">$63,542</td>
										</tr>
										<tr>
											<td>Mason Porter</td>
											<td>Chile</td>
											<td>Gloucester</td>
											<td class="text-danger">$78,615</td>
										</tr>
									</tbody>
								</table>

							</div>
						</div>
					</div>
				</div>

					<pre class="prettyprint">

&lt;div class=&quot;card&quot;&gt;
	&lt;div class=&quot;card-header&quot; data-background-color=&quot;red&quot;&gt;
		&lt;h4 class=&quot;title&quot;&gt;Table Title&lt;/h4&gt;
		&lt;p class=&quot;category&quot;&gt;Here is a subtitle for this table&lt;/p&gt;
	&lt;/div&gt;
	&lt;div class=&quot;card-content table-responsive table-full-width&quot;&gt;
		&lt;table class=&quot;table&quot;&gt;
			&lt;thead class=&quot;text-danger&quot;&gt;
				&lt;th&gt;Name&lt;/th&gt;
				&lt;th&gt;Country&lt;/th&gt;
				&lt;th&gt;City&lt;/th&gt;
				&lt;th&gt;Salary&lt;/th&gt;
			&lt;/thead&gt;
			&lt;tbody&gt;
				&lt;tr&gt;
					&lt;td&gt;Dakota Rice&lt;/td&gt;
					&lt;td&gt;Niger&lt;/td&gt;
					&lt;td&gt;Oud-Turnhout&lt;/td&gt;
					&lt;td class=&quot;text-danger&quot;&gt;$36,738&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Minerva Hooper&lt;/td&gt;
					&lt;td&gt;Cura&#231;ao&lt;/td&gt;
					&lt;td&gt;Sinaai-Waas&lt;/td&gt;
					&lt;td class=&quot;text-danger&quot;&gt;$23,789&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Sage Rodriguez&lt;/td&gt;
					&lt;td&gt;Netherlands&lt;/td&gt;
					&lt;td&gt;Baileux&lt;/td&gt;
					&lt;td class=&quot;text-danger&quot;&gt;$56,142&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Philip Chaney&lt;/td&gt;
					&lt;td&gt;Korea, South&lt;/td&gt;
					&lt;td&gt;Overland Park&lt;/td&gt;
					&lt;td class=&quot;text-danger&quot;&gt;$38,735&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Doris Greene&lt;/td&gt;
					&lt;td&gt;Malawi&lt;/td&gt;
					&lt;td&gt;Feldkirchen in K&#228;rnten&lt;/td&gt;
					&lt;td class=&quot;text-danger&quot;&gt;$63,542&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt;Mason Porter&lt;/td&gt;
					&lt;td&gt;Chile&lt;/td&gt;
					&lt;td&gt;Gloucester&lt;/td&gt;
					&lt;td class=&quot;text-danger&quot;&gt;$78,615&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/tbody&gt;
		&lt;/table&gt;

	&lt;/div&gt;
&lt;/div&gt;
		    </pre>

		    </div>
		    <!-- end row -->

			<!-- icons row -->
		    <div class="tim-row" id="icons-row">
		        <h2>Material Icons</h2>
		        <legend></legend>
		        <p>
		            Through most of the examples in this dashboard, we have used the default <a href="https://design.google.com/icons/" target="_blank">Icons for the Material Design</a> provided by Google.
		        </p>
		        <i class="material-icons">face</i>
		    <pre class="prettyprint">

&lt;i class=&quot;material-icons&quot;&gt;face&lt;/i&gt;
			</pre>
		    </div>
		    <!-- end row -->


		    <!-- notification row -->
		    <div class="tim-row" id="notification-row">
		        <h2> Notifications </h2>
		        <legend></legend>
		        <p>The new notifications are looking fresh and clean. They go great with the navbar. For the following notification examples we used the <code>.container-fluid</code> class, so they will be fluid. Please use the class <code>.container</code> when you use them outside of the <code>.wrapper</code> so they will be aligned with the general page container.</p>

				<div class="alert alert-info">
		            <div class="container-fluid">
						<div class="alert-icon">
							<i class="material-icons">info_outline</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>

		            	<b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
		            </div>
		        </div>
		        <div class="alert alert-success">
		            <div class="container-fluid">
						<div class="alert-icon">
							<i class="material-icons">check</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>
		            	<b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
		            </div>
		        </div>
		        <div class="alert alert-warning">
		             <div class="container-fluid">
						 <div class="alert-icon">
							<i class="material-icons">warning</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>
		                 <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
		            </div>
		        </div>
		        <div class="alert alert-danger">
		             <div class="container-fluid">
						 <div class="alert-icon">
							<i class="material-icons">error_outline</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>
		                 <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
		            </div>
		        </div>

				<pre class="prettyprint">
&lt;div class=&quot;alert alert-info&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;info_outline&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Info alert:&lt;/b&gt; You&#39;ve got some friends nearby, stop looking at your phone and find them...
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-success&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;check&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Success Alert:&lt;/b&gt; Yuhuuu! You&#39;ve got your $11.99 album from The Weeknd
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-warning&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;warning&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Warning Alert:&lt;/b&gt; Hey, it looks like you still have the &quot;copyright &amp;copy;  2015&quot; in your footer. Please update it!
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-danger&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
    &lt;i class=&quot;material-icons&quot;&gt;error_outline&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Error Alert:&lt;/b&gt; Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
&lt;/div&gt;
&lt;/div&gt;
				</pre>
			</div>
			<!-- end row -->


            <!-- cards row -->
            <div class="tim-row" id="cards-row">
                <h2>Cards</h2>
                <legend></legend>
                <p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called <code>.card</code>. The information inside the card usually goes inside the content (class <code>.card-content</code>). The content can have three types of elements inside: <code>.title</code> and <code>.category</code>. You can optionally add a <code>.card-footer</code>, if you want to place a call-to-action. <br />
				You can change the color of the header using the <code>data-background-color</code> attribute like this: <code>data-background-color="{ purple | blue | green | orange | red }"</code>. <br>

				If you want to use the cards on white background you can remove it's shadow using the class <code>.card-plain</code>
                </p>

                <h4>Card Chart</h4>
                <div class="row">
					<div class="col-md-6">
						<div class="card">
							<div class="card-header card-chart" data-background-color="orange">
								<div class="ct-chart" id="dailySalesChart"></div>
							</div>
							<div class="card-content">
								<h4 class="title">Daily Sales</h4>
								<p class="category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55%  </span> increase in today sales.</p>
							</div>
							<div class="card-footer">
								<div class="stats">
									<i class="material-icons">access_time</i> updated 4 minutes ago
								</div>
							</div>
						</div>
					</div>
                </div>
                <pre class="prettyprint">
&lt;div class=&quot;col-md-6&quot;&gt;
	&lt;div class=&quot;card&quot;&gt;
		&lt;div class=&quot;card-header card-chart&quot; data-background-color=&quot;orange&quot;&gt;
			&lt;div class=&quot;ct-chart&quot; id=&quot;dailySalesChart&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;card-content&quot;&gt;
			&lt;h4 class=&quot;title&quot;&gt;Daily Sales&lt;/h4&gt;
			&lt;p class=&quot;category&quot;&gt;&lt;span class=&quot;text-success&quot;&gt;&lt;i class=&quot;fa fa-long-arrow-up&quot;&gt;&lt;/i&gt; 55%  &lt;/span&gt; increase in today sales.&lt;/p&gt;
		&lt;/div&gt;
		&lt;div class=&quot;card-footer&quot;&gt;
			&lt;div class=&quot;stats&quot;&gt;
				&lt;i class=&quot;material-icons&quot;&gt;access_time&lt;/i&gt; updated 4 minutes ago
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

// INFO: #dailySalesChart is initialised inside demo.js on method initDocumentationCharts
                </pre>


                <h4>Card Stats</h4>
                <div class="row">
					<div class="col-md-6">
						<div class="card card-stats">
							<div class="card-header" data-background-color="orange">
								<i class="material-icons">content_copy</i>
							</div>
							<div class="card-content">
								<p class="category">Used Space</p>
								<h3 class="title">49/50<small>GB</small></h3>
							</div>
							<div class="card-footer">
								<div class="stats">
									<i class="material-icons text-danger">warning</i> <a href="#pablo">Get More Space...</a>
								</div>
							</div>
						</div>
					</div>

					<div class="col-md-6">
						<div class="card card-stats">
							<div class="card-header" data-background-color="green">
								<i class="material-icons">store</i>
							</div>
							<div class="card-content">
								<p class="category">Revenue</p>
								<h3 class="title">$34,245</h3>
							</div>
							<div class="card-footer">
								<div class="stats">
									<i class="material-icons">date_range</i> Last 24 Hours
								</div>
							</div>
						</div>
					</div>
                </div>
                <pre class="prettyprint">
&lt;div class=&quot;card card-stats&quot;&gt;
	&lt;div class=&quot;card-header&quot; data-background-color=&quot;orange&quot;&gt;
		&lt;i class=&quot;material-icons&quot;&gt;content_copy&lt;/i&gt;
	&lt;/div&gt;
	&lt;div class=&quot;card-content&quot;&gt;
		&lt;p class=&quot;category&quot;&gt;Used Space&lt;/p&gt;
		&lt;h3 class=&quot;title&quot;&gt;49/50&lt;small&gt;GB&lt;/small&gt;&lt;/h3&gt;
	&lt;/div&gt;
	&lt;div class=&quot;card-footer&quot;&gt;
		&lt;div class=&quot;stats&quot;&gt;
			&lt;i class=&quot;material-icons text-danger&quot;&gt;warning&lt;/i&gt; &lt;a href=&quot;#pablo&quot;&gt;Get More Space...&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
                </pre>


				<h4>Card Nav-Tabs</h4>

                <div class="row">
					<div class="col-lg-8 col-md-12">
						<div class="card card-nav-tabs">
							<div class="card-header" data-background-color="red">
								<div class="nav-tabs-navigation">
									<div class="nav-tabs-wrapper">
										<span class="nav-tabs-title">Tasks:</span>
										<ul class="nav nav-tabs" data-tabs="tabs">
											<li class="active">
												<a href="#profile" data-toggle="tab">
													<i class="material-icons">bug_report</i>
													First
												<div class="ripple-container"></div></a>
											</li>
											<li class="">
												<a href="#messages" data-toggle="tab">
													<i class="material-icons">code</i>
													Second
												<div class="ripple-container"></div></a>
											</li>
											<li class="">
												<a href="#settings" data-toggle="tab">
													<i class="material-icons">cloud</i>
													Third
												<div class="ripple-container"></div></a>
											</li>
										</ul>
									</div>
								</div>
							</div>

							<div class="card-content">
								<div class="tab-content">
									<div class="tab-pane active" id="profile">
										First Tab
									</div>
									<div class="tab-pane" id="messages">
										Second Tab
									</div>
									<div class="tab-pane" id="settings">
										Third Tab
									</div>
								</div>
							</div>
						</div>
					</div>

                </div>
                <pre class="prettyprint">
&lt;div class=&quot;card card-nav-tabs&quot;&gt;
	&lt;div class=&quot;card-header&quot; data-background-color=&quot;red&quot;&gt;
		&lt;div class=&quot;nav-tabs-navigation&quot;&gt;
			&lt;div class=&quot;nav-tabs-wrapper&quot;&gt;
				&lt;span class=&quot;nav-tabs-title&quot;&gt;Tasks:&lt;/span&gt;
				&lt;ul class=&quot;nav nav-tabs&quot; data-tabs=&quot;tabs&quot;&gt;
					&lt;li class=&quot;active&quot;&gt;
						&lt;a href=&quot;#profile&quot; data-toggle=&quot;tab&quot;&gt;
							&lt;i class=&quot;material-icons&quot;&gt;bug_report&lt;/i&gt;
							First
						&lt;div class=&quot;ripple-container&quot;&gt;&lt;/div&gt;&lt;/a&gt;
					&lt;/li&gt;
					&lt;li class=&quot;&quot;&gt;
						&lt;a href=&quot;#messages&quot; data-toggle=&quot;tab&quot;&gt;
							&lt;i class=&quot;material-icons&quot;&gt;code&lt;/i&gt;
							Second
						&lt;div class=&quot;ripple-container&quot;&gt;&lt;/div&gt;&lt;/a&gt;
					&lt;/li&gt;
					&lt;li class=&quot;&quot;&gt;
						&lt;a href=&quot;#settings&quot; data-toggle=&quot;tab&quot;&gt;
							&lt;i class=&quot;material-icons&quot;&gt;cloud&lt;/i&gt;
							Third
						&lt;div class=&quot;ripple-container&quot;&gt;&lt;/div&gt;&lt;/a&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;div class=&quot;card-content&quot;&gt;
		&lt;div class=&quot;tab-content&quot;&gt;
			&lt;div class=&quot;tab-pane active&quot; id=&quot;profile&quot;&gt;
				First Tab
			&lt;/div&gt;
			&lt;div class=&quot;tab-pane&quot; id=&quot;messages&quot;&gt;
				Second Tab
			&lt;/div&gt;
			&lt;div class=&quot;tab-pane&quot; id=&quot;settings&quot;&gt;
				Third Tab
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;

&lt;/div&gt;

                </pre>
            </div> <!-- end cards row -->

			<!-- License Row -->
			<div class="tim-row" id="changing-colors">
				<h2 class="text-center">Changing Colors (SASS)</h2>
				<legend></legend>
				<p>You can change the default colors via variables from SASS:</p>

				<ol>
					<li>You can find the colors in assets/sass/material-dashboard/_variables.scss starting with line 28 where is the primary color set: <code>$brand-primary: $purple !default;</code>.
					<li>More colors can be found in assets/sass/material-kit/_colors.scss</li>
					<li>Change them with anything you want and save the <code>.scss</code> file, it will be automatically compiled by Angular.</li>
				</ol>

			</div>
			<div class="tim-row" id="api">
				<h2 class="text-center">How to setup Google API Keys</h2>
				<legend></legend>

				<ol>
					<li>
						<p>Go to
							<a href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a>
						</p>
					</li>
					<li><p>Scroll to the “Get an API key” Title and press the “Get a Key” Button</p></li>
					<li><p>Choose a name for your project then press on Create and Enable API</p></li>
					<li><p>Get the Key and place it in your project where is this script:
						<pre>&#x3C;script type=&#x22;text/javascript&#x22; src=&#x22;https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&#x22;&#x3E;&#x3C;/script&#x3E;</pre>
						</p>
					</li>
				</ol>

			</div>

			</div> <!-- end container -->
		 </div> <!--  end col-md-8 -->
	 </div> <!-- end row -->
 </div> <!-- end first container-->
</div> <!-- end section -->


    <footer class="footer footer-transparent">
        <div class="container">
            <nav class="pull-left">
                <ul>
					<li>
						<a href="http://www.creative-tim.com">
							Creative Tim
						</a>
					</li>
					<li>
						<a href="http://presentation.creative-tim.com">
						   About Us
						</a>
					</li>
					<li>
						<a href="http://blog.creative-tim.com">
						   Blog
						</a>
					</li>
					<li>
						<a href="http://www.creative-tim.com/license">
							Licenses
						</a>
					</li>
                </ul>
            </nav>
            <div class="social-area pull-right">
                <a class="btn btn-just-icon btn-twitter btn-simple" href="https://twitter.com/CreativeTim">
                    <i class="fa fa-twitter"></i>
                </a>
                <a class="btn btn-just-icon btn-facebook btn-simple" href="https://www.facebook.com/CreativeTim">
                    <i class="fa fa-facebook-square"></i>
                </a>
                <a class="btn btn-just-icon btn-google btn-simple" href="https://plus.google.com/+CreativetimPage">
                    <i class="fa fa-google-plus"></i>
                </a>
				<a class="btn btn-just-icon btn-instagram btn-simple" href="https://www.instagram.com/creativetimofficial">
                    <i class="fa fa-instagram"></i>
                </a>
            </div>
            <div class="copyright">
                &copy; <script>document.write(new Date().getFullYear())</script> Creative Tim, made with love
            </div>
        </div>
    </footer>


</body>
	<!--   Core JS Files   -->
	<script src="./js/jquery-3.2.1.min.js"></script>
	<script src="./js/bootstrap.min.js" type="text/javascript"></script>
	<script src="./js/material.min.js" type="text/javascript"></script>
	<script src="./js/arrive.min.js" type="text/javascript"></script>

	<!--  Charts Plugin -->
	<script src="./js/chartist.min.js"></script>

	<!--  Notifications Plugin    -->
	<script src="./js/bootstrap-notify.js"></script>

	<!-- Material Dashboard Angular 2 javascript methods -->
	<script src="./js/material-dashboard.js"></script>

	<!-- Material Dashboard Angular 2 DEMO methods, don't include it in your project! -->
	<script src="./js/demo.js"></script>

	<script type="text/javascript" src="./js/initMenu.js"></script>

	<script>
        var header_height;
        var fixed_section;
        var floating = false;

        $().ready(function(){
            suggestions_distance = $("#suggestions").offset();
            pay_height = $('.fixed-section').outerHeight();

			$(window).on('scroll', md.checkScrollForTransparentNavbar);
			demo.initDocumentationCharts();
        });
    </script>

</html>