--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon.png">
+ <link rel="icon" type="image/png" href="img/favicon.png">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+ <title>Material Kit 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" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+ <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
+
+ <!-- CSS Files -->
+ <link href="/roojs1/css-bootstrap/bootstrap.min.css" rel="stylesheet" />
+ <link href="css/material-kit.css" rel="stylesheet"/>
+
+ <!-- CSS Just for demo purpose, don't include it in your project -->
+ <link href="css/demo.css" rel="stylesheet" />
+
+</head>
+
+<body class="index-page">
+<!-- Navbar -->
+<nav class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-index">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a href="http://www.creative-tim.com">
+ <div class="logo-container">
+ <div class="logo">
+ <img src="img/logo.png" alt="Creative Tim Logo" rel="tooltip" title="<b>Material Kit</b> was Designed & Coded with care by the staff from <b>Creative Tim</b>" data-placement="bottom" data-html="true">
+ </div>
+ <div class="brand">
+ Creative Tim
+ </div>
+
+
+ </div>
+ </a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="navigation-index">
+ <ul class="nav navbar-nav navbar-right">
+ <li>
+ <a href="components-documentation.html" target="_blank">
+ <i class="material-icons">dashboard</i> Components
+ </a>
+ </li>
+ <li>
+ <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank">
+ <i class="material-icons">unarchive</i> Upgrade to PRO
+ </a>
+ </li>
+ <li>
+ <a rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank" class="btn btn-white btn-simple btn-just-icon">
+ <i class="fa fa-twitter"></i>
+ </a>
+ </li>
+ <li>
+ <a rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" class="btn btn-white btn-simple btn-just-icon">
+ <i class="fa fa-facebook-square"></i>
+ </a>
+ </li>
+ <li>
+ <a rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" class="btn btn-white btn-simple btn-just-icon">
+ <i class="fa fa-instagram"></i>
+ </a>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+</nav>
+<!-- End Navbar -->
+
+<div class="wrapper">
+ <div class="header header-filter" style="background-image: url('img/bg2.jpeg');">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
+ <div class="brand">
+ <h1>Material Kit.</h1>
+ <h3>A Badass Bootstrap UI Kit based on Material Design.</h3>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="main main-raised">
+ <div class="section section-basic">
+ <div class="container">
+ <div class="title">
+ <h2>Basic Elements</h2>
+ </div>
+
+ <div id="buttons">
+ <div class="title">
+ <h3>Buttons <br />
+ <small>Pick your style</small>
+ </h3>
+ </div>
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
+ <button class="btn btn-primary">Default</button>
+ <button class="btn btn-primary btn-round">Round</button>
+ <button class="btn btn-primary btn-round">
+ <i class="material-icons">favorite</i> With Icon
+ </button>
+ <button class="btn btn-primary btn-fab btn-fab-mini btn-round">
+ <i class="material-icons">favorite</i>
+ </button>
+ <button class="btn btn-primary btn-simple">Simple</button>
+ </div>
+ </div>
+ <div class="title">
+ <h3><small>Pick your size</small></h3>
+ </div>
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
+ <button class="btn btn-primary btn-xs">x-Small</button>
+ <button class="btn btn-primary btn-sm">Small</button>
+ <button class="btn btn-primary">Regular</button>
+ <button class="btn btn-primary btn-lg">Large</button>
+ </div>
+ </div>
+
+ <div class="title">
+ <h3><small> Pick your color </small></h3>
+ </div>
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
+ <button class="btn">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>
+ </div>
+ </div>
+ <div class="title">
+ <h3>Links</h3>
+ </div>
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
+ <button class="btn btn-simple">Default</button>
+ <button class="btn btn-simple btn-primary ">Primary</button>
+ <button class="btn btn-simple btn-info">Info</button>
+ <button class="btn btn-simple btn-success">Success</button>
+ <button class="btn btn-simple btn-warning">Warning</button>
+ <button class="btn btn-simple btn-danger">Danger</button>
+ </div>
+ </div>
+ </div>
+
+ <div id="inputs">
+ <div class="title">
+ <h3>Inputs</h3>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-3">
+ <div class="form-group">
+ <input type="text" value="" placeholder="Regular" class="form-control" />
+ </div>
+ </div>
+
+ <div class="col-sm-3">
+ <div class="form-group label-floating">
+ <label class="control-label">With Floating Label</label>
+ <input type="email" class="form-control">
+ </div>
+ </div>
+
+ <div class="col-sm-3">
+ <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-3">
+ <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-3">
+ <div class="input-group">
+ <span class="input-group-addon">
+ <i class="material-icons">group</i>
+ </span>
+ <input type="text" class="form-control" placeholder="With Material Icons">
+ </div>
+ </div>
+
+ <div class="col-sm-3">
+ <div class="input-group">
+ <span class="input-group-addon">
+ <i class="fa fa-group"></i>
+ </span>
+ <input type="text" class="form-control" placeholder="With Font Awesome Icons">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="space-70"></div>
+
+ <div id="checkRadios">
+ <div class="row">
+ <div class="col-sm-3">
+ <div class="title">
+ <h3>Checkboxes</h3>
+ </div>
+
+ <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>
+
+ </div>
+
+ <div class="col-sm-3">
+ <div class="title">
+ <h3>Radio Buttons</h3>
+ </div>
+
+ <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>
+ </div>
+
+ <div class="col-sm-3">
+ <div class="title">
+ <h3>Toggle Buttons</h3>
+ </div>
+
+ <div class="togglebutton">
+ <label>
+ <input type="checkbox" checked="">
+ Toggle is on
+ </label>
+ </div>
+
+ <div class="togglebutton">
+ <label>
+ <input type="checkbox">
+ Toggle is off
+ </label>
+ </div>
+ </div>
+
+ <div class="col-sm-3">
+ <div class="title">
+ <h3>Sliders</h3>
+ </div>
+
+ <div id="sliderRegular" class="slider"></div>
+ <div id="sliderDouble" class="slider slider-info"></div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="section section-navbars">
+ <div class="container" id="menu-dropdown">
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Menu</h3>
+ </div>
+
+ <nav class="navbar navbar-default">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar">
+ <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="#">Menu</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu dropdown-menu-right">
+ <li class="dropdown-header">Dropdown header</li>
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ <li class="divider"></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ </div>
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Menu with Icons</h3>
+ </div>
+
+ <nav class="navbar navbar-info">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-icons">
+ <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="#">Icons</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-icons">
+ <ul class="nav navbar-nav navbar-right">
+ <li>
+ <a href="#pablo"><i class="material-icons">email</i></a>
+ </li>
+ <li>
+ <a href="#pablo"><i class="material-icons">face</i></a>
+ </li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="material-icons">settings</i>
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu dropdown-menu-right">
+ <li class="dropdown-header">Dropdown header</li>
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ <li class="divider"></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ </div>
+ </div>
+ <div class="title">
+ <h3>Navigation</h3>
+ </div>
+ </div>
+
+ <div id="navbar">
+ <div class="navigation-example">
+
+ <!-- Navbar Primary -->
+ <nav class="navbar navbar-primary">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-primary">
+ <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">Primary Color</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-primary">
+ <ul class="nav navbar-nav navbar-right">
+ <li class="active">
+ <a href="#pablo">
+ <i class="material-icons">explore</i>
+ Discover
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="material-icons">account_circle</i>
+ Profile
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="material-icons">settings</i>
+ Settings
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <!-- End Navbar Primary -->
+
+ <!-- Navbar Info -->
+ <nav class="navbar navbar-info">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-info">
+ <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">Info Color</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-info">
+ <ul class="nav navbar-nav navbar-right">
+ <li class="active">
+ <a href="#pablo" >
+ Discover
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ Profile
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ Settings
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <!-- End Navbar Info -->
+
+ <!-- Navbar Success -->
+ <nav class="navbar navbar-success">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-success">
+ <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="#">Success Color</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-success">
+ <ul class="nav navbar-nav navbar-right">
+ <li class="active">
+ <a href="#pablo">
+ <i class="material-icons">explore</i>
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="material-icons">account_circle</i>
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="material-icons">settings</i>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <!-- End Navbar Success -->
+
+ <!-- Navbar Warning -->
+ <nav class="navbar navbar-warning">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-warning">
+ <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">Warning Color</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-warning">
+ <ul class="nav navbar-nav navbar-right">
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-facebook-square"></i>
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-twitter"></i>
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-google-plus"></i>
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-instagram"></i>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <!-- End Navbar Warning -->
+
+ <!-- Navbar Danger -->
+ <nav class="navbar navbar-danger">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-danger">
+ <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">Danger Color</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-danger">
+ <ul class="nav navbar-nav navbar-right">
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-facebook-square"></i> Share
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-twitter"></i> Tweet
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-pinterest"></i> Pin
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <!-- End Navbar Danger -->
+
+ <!-- Navbar Transparent -->
+ <nav class="navbar navbar-transparent">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-transparent">
+ <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">Transparent</a>
+ </div>
+
+ <div class="collapse navbar-collapse" id="example-navbar-transparent">
+ <ul class="nav navbar-nav navbar-right">
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-facebook-square"></i>
+ Facebook
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-twitter"></i>
+ Twitter
+ </a>
+ </li>
+ <li>
+ <a href="#pablo">
+ <i class="fa fa-instagram"></i> Instagram
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <!-- End Navbar Transparent-->
+ </div>
+ </div>
+ </div>
+ <!-- End .section-navbars -->
+
+ <div class="section section-tabs">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Tabs with Icons on Card</h3>
+ </div>
+
+ <!-- Tabs with icons on Card -->
+ <div class="card card-nav-tabs">
+ <div class="header header-success">
+ <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
+ <div class="nav-tabs-navigation">
+ <div class="nav-tabs-wrapper">
+ <ul class="nav nav-tabs" data-tabs="tabs">
+ <li class="active">
+ <a href="#profile" data-toggle="tab">
+ <i class="material-icons">face</i>
+ Profile
+ </a>
+ </li>
+ <li>
+ <a href="#messages" data-toggle="tab">
+ <i class="material-icons">chat</i>
+ Messages
+ </a>
+ </li>
+ <li>
+ <a href="#settings" data-toggle="tab">
+ <i class="material-icons">build</i>
+ Settings
+ </a>
+
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="content">
+ <div class="tab-content text-center">
+ <div class="tab-pane active" id="profile">
+ <p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
+ </div>
+ <div class="tab-pane" id="messages">
+ <p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+ </div>
+ <div class="tab-pane" id="settings">
+ <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- End Tabs with icons on Card -->
+
+ </div>
+
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Tabs on Plain Card</h3>
+ </div>
+
+ <!-- Tabs on Plain Card -->
+ <div class="card card-nav-tabs card-plain">
+ <div class="header header-danger">
+ <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
+ <div class="nav-tabs-navigation">
+ <div class="nav-tabs-wrapper">
+ <ul class="nav nav-tabs" data-tabs="tabs">
+ <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
+ <li><a href="#updates" data-toggle="tab">Updates</a></li>
+ <li><a href="#history" data-toggle="tab">History</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="content">
+ <div class="tab-content text-center">
+ <div class="tab-pane active" id="home">
+ <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
+ </div>
+ <div class="tab-pane" id="updates">
+ <p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
+ </div>
+ <div class="tab-pane" id="history">
+ <p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- End Tabs on plain Card -->
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <!-- End Section Tabs -->
+
+ <div class="section section-pagination">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Progress Bars</h3>
+ </div>
+
+ <div class="progress progress-line-primary">
+ <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
+ <span class="sr-only">60% Complete</span>
+ </div>
+ </div>
+
+ <div class="progress progress-line-info">
+ <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+ <span class="sr-only">60% Complete</span>
+ </div>
+ </div>
+
+ <div class="progress progress-line-danger">
+ <div class="progress-bar progress-bar-success" style="width: 35%">
+ <span class="sr-only">35% Complete (success)</span>
+ </div>
+ <div class="progress-bar progress-bar-warning" style="width: 20%">
+ <span class="sr-only">20% Complete (warning)</span>
+ </div>
+ <div class="progress-bar progress-bar-danger" style="width: 10%">
+ <span class="sr-only">10% Complete (danger)</span>
+ </div>
+ </div>
+
+ <br />
+ <div class="title">
+ <h3>Navigation Pills</h3>
+ </div>
+
+ <ul class="nav nav-pills" role="tablist">
+ <!--
+ color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
+ -->
+ <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>
+ <li>
+ <a href="#payments" role="tab" data-toggle="tab">
+ <i class="material-icons">attach_money</i>
+ Payments
+ </a>
+ </li>
+ </ul>
+
+ </div>
+
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Pagination</h3>
+ </div>
+
+ <ul class="pagination pagination-primary">
+ <!--
+ color-classes: "pagination-primary", "pagination-info", "pagination-success", "pagination-warning", "pagination-danger"
+ -->
+ <li><a href="javascript:void(0);">1</a></li>
+ <li><a href="javascript:void(0);">...</a></li>
+ <li><a href="javascript:void(0);">5</a></li>
+ <li><a href="javascript:void(0);">6</a></li>
+ <li class="active"><a href="javascript:void(0);">7</a></li>
+ <li><a href="javascript:void(0);">8</a></li>
+ <li><a href="javascript:void(0);">9</a></li>
+ <li><a href="javascript:void(0);">...</a></li>
+ <li><a href="javascript:void(0);">12</a></li>
+ </ul>
+
+ <ul class="pagination pagination-info">
+ <li><a href="javascript:void(0);">< prev</a></li>
+ <li><a href="javascript:void(0);">1</a></li>
+ <li><a href="javascript:void(0);">2</a></li>
+ <li class="active"><a href="javascript:void(0);">3</a></li>
+ <li><a href="javascript:void(0);">4</a></li>
+ <li><a href="javascript:void(0);">5</a></li>
+ <li><a href="javascript:void(0);">next ></a></li>
+ </ul>
+
+ <div class="title">
+ <h3>Labels </h3>
+ </div>
+ <span class="label label-default">Default</span>
+ <span class="label label-primary">Primary</span>
+ <span class="label label-info">Info</span>
+ <span class="label label-success">Success</span>
+ <span class="label label-warning">Warning</span>
+ <span class="label label-danger">Danger</span>
+ </div>
+ </div>
+
+ <div class="space"></div>
+
+ <div class="title">
+ <h3>Notifications</h3>
+ </div>
+ </div>
+ </div>
+
+ <div class="section section-notifications" id="notifications">
+ <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 © 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>
+ <div class="clearfix"></div>
+ </div><!-- end notifications -->
+
+ <div class="section">
+ <div class="container tim-container">
+ <div class="title">
+ <h2>Typography</h2>
+ </div>
+ <div id="typography">
+ <div class="row">
+ <div class="tim-typo">
+ <h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
+ </div>
+ <div class="tim-typo">
+ <h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
+ </div>
+ <div class="tim-typo">
+ <h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
+ </div>
+ <div class="tim-typo">
+ <h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
+ </div>
+ <div class="tim-typo">
+ <h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
+ </div>
+ <div class="tim-typo">
+ <h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
+ </div>
+ <div class="tim-typo">
+ <p><span class="tim-note">Paragraph</span>
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Quote</span>
+ <blockquote>
+ <p>
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
+ </p>
+ <small>
+ Kanye West, Musician
+ </small>
+ </blockquote>
+ </div>
+
+ <div class="tim-typo">
+ <span class="tim-note">Muted Text</span>
+ <p class="text-muted">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
+ </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Primary Text</span>
+ <p class="text-primary">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Info Text</span>
+ <p class="text-info">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Success Text</span>
+ <p class="text-success">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Warning Text</span>
+ <p class="text-warning">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
+ </p>
+ </div>
+ <div class="tim-typo">
+ <span class="tim-note">Danger Text</span>
+ <p class="text-danger">
+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+ </div>
+ <div class="tim-typo">
+ <h2><span class="tim-note">Small Tag</span>
+ Header with small subtitle <br>
+ <small>Use "small" tag for the headers</small>
+ </h2>
+ </div>
+ </div>
+ </div>
+
+ <div class="space-50"></div>
+
+ <div id="images">
+ <div class="title">
+ <h2>Images</h2>
+ </div>
+ <br>
+ <div class="row">
+ <div class="col-sm-2">
+ <h4>Rounded Image</h4>
+ <img src="img/avatar.jpg" alt="Rounded Image" class="img-rounded img-responsive">
+ </div>
+ <div class="col-sm-2 col-sm-offset-1">
+ <h4>Circle Image</h4>
+ <img src="img/avatar.jpg" alt="Circle Image" class="img-circle img-responsive">
+ </div>
+ <div class="col-sm-2 col-sm-offset-1">
+ <h4>Rounded Raised</h4>
+ <img src="img/avatar.jpg" alt="Raised Image" class="img-rounded img-responsive img-raised">
+ </div>
+
+ <div class="col-sm-2 col-sm-offset-1">
+ <h4>Circle Raised</h4>
+ <img src="img/avatar.jpg" alt="Thumbnail Image" class="img-circle img-raised img-responsive">
+ </div>
+ </div>
+ <div class="row">
+
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="section" id="javascriptComponents">
+ <div class="container">
+ <div class="title">
+ <h2>Javascript components</h2>
+ </div>
+
+ <div class="row" id="modals">
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Modal</h3>
+ </div>
+
+ <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+ </button>
+ </div>
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Popovers</h3>
+ </div>
+
+ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="Popover on left" data-content="Here will be some very useful information about his popover.<br> Here will be some very useful information about his popover." data-container="body">On left</button>
+
+ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover." data-container="body">On top</button>
+
+ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="Here will be some very useful information about his popover." data-container="body">On bottom</button>
+
+ <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="Popover on right" data-content="Here will be some very useful information about his popover." data-container="body">On right</button>
+
+ </div>
+ <br /><br />
+
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Datepicker</h3>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="form-group label-static">
+ <label class="control-label">Datepicker</label>
+ <input type="text" class="datepicker form-control" value="03/12/2016" />
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="col-md-6">
+ <div class="title">
+ <h3>Tooltips</h3>
+ </div>
+
+ <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-container="body">On left</button>
+
+ <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-container="body">On top</button>
+
+ <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-container="body">On bottom</button>
+
+ <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right" data-container="body">On right</button>
+
+ <div class="clearfix"></div><br><br>
+ </div>
+
+ <div class="title">
+ <h3>Carousel</h3>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="section" id="carousel">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2">
+
+ <!-- Carousel Card -->
+ <div class="card card-raised card-carousel">
+ <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+ <div class="carousel slide" data-ride="carousel">
+
+ <!-- Indicators -->
+ <ol class="carousel-indicators">
+ <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+ </ol>
+
+ <!-- Wrapper for slides -->
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="img/bg2.jpeg" alt="Awesome Image">
+ <div class="carousel-caption">
+ <h4><i class="material-icons">location_on</i> Yellowstone National Park, United States</h4>
+ </div>
+ </div>
+ <div class="item">
+ <img src="img/bg3.jpeg" alt="Awesome Image">
+ <div class="carousel-caption">
+ <h4><i class="material-icons">location_on</i> Somewhere Beyond, United States</h4>
+ </div>
+ </div>
+ <div class="item">
+ <img src="img/bg4.jpeg" alt="Awesome Image">
+ <div class="carousel-caption">
+ <h4><i class="material-icons">location_on</i> Yellowstone National Park, United States</h4>
+ </div>
+ </div>
+ </div>
+
+ <!-- Controls -->
+ <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+ <i class="material-icons">keyboard_arrow_left</i>
+ </a>
+ <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+ <i class="material-icons">keyboard_arrow_right</i>
+ </a>
+ </div>
+ </div>
+ </div>
+ <!-- End Carousel Card -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="section">
+ <div class="container text-center">
+ <div class="row">
+ <div class="col-md-8 col-md-offset-2 text-center">
+ <h2>Completed with examples</h2>
+ <h4>The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</h4>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="section section-full-screen section-signup" style="background-image: url('img/city.jpg'); background-size: cover; background-position: top center; min-height: 700px;">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-4 col-md-offset-4">
+ <div class="card card-signup">
+ <form class="form" method="" action="">
+ <div class="header header-primary text-center">
+ <h4>Sign Up</h4>
+ <div class="social-line">
+ <a href="#pablo" class="btn btn-simple btn-just-icon">
+ <i class="fa fa-facebook-square"></i>
+ </a>
+ <a href="#pablo" class="btn btn-simple btn-just-icon">
+ <i class="fa fa-twitter"></i>
+ </a>
+ <a href="#pablo" class="btn btn-simple btn-just-icon">
+ <i class="fa fa-google-plus"></i>
+ </a>
+ </div>
+ </div>
+ <p class="text-divider">Or Be Classical</p>
+ <div class="content">
+
+ <div class="input-group">
+ <span class="input-group-addon">
+ <i class="material-icons">face</i>
+ </span>
+ <input type="text" class="form-control" placeholder="First Name...">
+ </div>
+
+ <div class="input-group">
+ <span class="input-group-addon">
+ <i class="material-icons">email</i>
+ </span>
+ <input type="text" class="form-control" placeholder="Email...">
+ </div>
+
+ <div class="input-group">
+ <span class="input-group-addon">
+ <i class="material-icons">lock_outline</i>
+ </span>
+ <input type="password" placeholder="Password..." class="form-control" />
+ </div>
+
+ <!-- If you want to add a checkbox to this form, uncomment this code
+
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="optionsCheckboxes" checked>
+ Subscribe to newsletter
+ </label>
+ </div> -->
+ </div>
+ <div class="footer text-center">
+ <a href="#pablo" class="btn btn-simple btn-primary btn-lg">Get Started</a>
+ </div>
+ </form>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-md-12 text-center">
+ <a href="examples/signup-page.html" class="btn btn-simple btn-primary btn-lg" target="_blank">View Signup Page</a>
+ </div>
+
+ <div class="space-50"></div>
+ <div class="section section-examples">
+ <div class="container-fluid text-center">
+ <div class="row">
+ <div class="col-md-6">
+ <a href="examples/landing-page.html" target="_blank">
+ <img src="img/landing.jpg" alt="Rounded Image" class="img-rounded img-raised img-responsive">
+ <button class="btn btn-simple btn-primary btn-lg">View Landing Page</button>
+ </a>
+ </div>
+ <div class="col-md-6">
+ <a href="examples/profile-page.html" target="_blank">
+ <img src="img/profile.jpg" alt="Rounded Image" class="img-rounded img-raised img-responsive">
+ <button class="btn btn-simple btn-primary btn-lg">View Profile Page</button>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="section section-download">
+ <div class="container">
+ <div class="row text-center">
+ <div class="col-md-8 col-md-offset-2">
+ <h2>Do you love this UI Kit?</h2>
+ <h4>Cause if you do, it can be yours for FREE. Hit the button below to navigate to Creative Tim where you can find the kit. Start a new project or give an old Bootstrap project a new look!</h4>
+ </div>
+ <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4">
+ <a href="http://www.creative-tim.com/product/material-kit" class="btn btn-primary btn-lg">
+ <i class="material-icons">cloud_download</i> Free Download
+ </a>
+ </div>
+ </div>
+
+ <br><br>
+
+ <div class="row text-center">
+ <div class="col-md-8 col-md-offset-2">
+ <h2>Want more?</h2>
+ <h4>We've just launched <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank">Material Kit PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
+ </div>
+ <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4">
+ <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" class="btn btn-upgrade btn-lg" target="_blank">
+ <i class="material-icons">unarchive</i> Upgrade to PRO
+ </a>
+ </div>
+ </div>
+
+ <div class="row sharing-area text-center">
+ <h3>Thank you for supporting us!</h3>
+ <a href="#" class="btn btn-twitter">
+ <i class="fa fa-twitter"></i>
+ Tweet
+ </a>
+ <a href="#" class="btn btn-facebook">
+ <i class="fa fa-facebook-square"></i>
+ Share
+ </a>
+ <a href="#" class="btn btn-google-plus">
+ <i class="fa fa-google-plus"></i>
+ Share
+ </a>
+ <a href="#" class="btn btn-github">
+ <i class="fa fa-github"></i>
+ Star
+ </a>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <footer class="footer">
+ <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="copyright pull-right">
+ © 2016, made with <i class="material-icons">favorite</i> by Creative Tim for a better web.
+ </div>
+ </div>
+ </footer>
+</div>
+
+<!-- Sart Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+ <i class="material-icons">clear</i>
+ </button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
+ </p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default btn-simple">Nice Button</button>
+ <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+</div>
+<!-- End Modal -->
+
+
+</body>
+ <!-- Core JS Files -->
+ <script src="js/jquery.min.js" type="text/javascript"></script>
+ <script src="js/bootstrap.min.js" type="text/javascript"></script>
+ <script src="js/material.min.js"></script>
+
+ <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
+ <script src="js/nouislider.min.js" type="text/javascript"></script>
+
+ <!-- Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
+ <script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
+
+ <!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
+ <script src="js/material-kit.js" type="text/javascript"></script>
+
+ <script type="text/javascript">
+
+ $().ready(function(){
+ // the body of this function is in material-kit.js
+ materialKit.initSliders();
+ window_width = $(window).width();
+
+ if (window_width >= 992){
+ big_image = $('.wrapper > .header');
+
+ $(window).on('scroll', materialKitDemo.checkScrollForParallax);
+ }
+
+ });
+ </script>
+</html>
projects / bootswatch / blobdiff