material-kit
Version:
Material Kit, a Google Material Desgin. Coded by Creative Tim
1,046 lines (1,044 loc) • 72.2 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="./assets/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, shrink-to-fit=no' 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="./assets/css/material-kit.css?v=2.0.4" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="./assets/demo/demo.css" rel="stylesheet" />
</head>
<body class="index-page sidebar-collapse">
<nav class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="100" id="sectionsNav">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/index.html">
Material Kit </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="material-icons">apps</i> Components
</a>
<div class="dropdown-menu dropdown-with-icons">
<a href="./index.html" class="dropdown-item">
<i class="material-icons">layers</i> All Components
</a>
<a href="https://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item">
<i class="material-icons">content_paste</i> Documentation
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)" onclick="scrollToDownload()">
<i class="material-icons">cloud_download</i> Download
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank" data-original-title="Follow us on Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" data-original-title="Like us on Facebook">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" data-original-title="Follow us on Instagram">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header header-filter clear-filter purple-filter" data-parallax="true" style="background-image: url('./assets/img/bg2.jpg');">
<div class="container">
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<div class="brand">
<h1>Material Kit.</h1>
<h3>A Badass Bootstrap 4 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>
<!-- buttons -->
<div id="buttons" class="cd-section">
<div class="title">
<h3>Buttons
<br>
<small>Pick your style</small>
</h3>
</div>
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<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-round">
<i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary btn-link">Simple</button>
</div>
</div>
<div class="title">
<h3>
<small>Pick your size</small>
</h3>
</div>
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<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-10 ml-auto">
<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>
<button class="btn btn-rose">Rose</button>
</div>
</div>
</div>
<!-- end buttons -->
<div class="space-50"></div>
<!-- inputs -->
<div id="inputs">
<div class="title">
<h3>Inputs</h3>
</div>
<div class="row">
<div class="col-lg-3 col-sm-4">
<div class="form-group has-default">
<input type="text" class="form-control" placeholder="Regular">
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group">
<label for="exampleInput1" class="bmd-label-floating">With Floating Label</label>
<input type="email" class="form-control" id="exampleInput1">
<span class="bmd-help">We'll never share your email with anyone else.</span>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group has-success">
<label for="exampleInput2" class="bmd-label-floating">Success input</label>
<input type="text" class="form-control" id="exampleInput2">
<span class="form-control-feedback">
<i class="material-icons">done</i>
</span>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group has-danger">
<label for="exampleInput3" class="bmd-label-floating">Error input</label>
<input type="email" class="form-control" id="exampleInput3">
<span class="form-control-feedback">
<i class="material-icons">clear</i>
</span>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">group</i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Material Icons">
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-group"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Font Awesome Icons">
</div>
</div>
</div>
</div>
</div>
<!-- end inputs -->
<div class="space-70"></div>
<!-- textarea/checkbox/radio/toggle -->
<div id="checkRadios">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="title">
<h3>Checkboxes</h3>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value=""> Unchecked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked> Checked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled> Disabled unchecked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled checked> Disabled checked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="title">
<h3>Radio Buttons</h3>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> Radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked> Radio is on
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios11" value="option1" disabled> Disabled radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio1" id="exampleRadios21" value="option2" checked disabled> Disabled radio is on
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="title">
<h3>Toggle Buttons</h3>
</div>
<div class="togglebutton">
<label>
<input type="checkbox" checked="">
<span class="toggle"></span>
Toggle is on
</label>
</div>
<div class="togglebutton">
<label>
<input type="checkbox">
<span class="toggle"></span>
Toggle is off
</label>
</div>
</div>
</div>
</div>
<div class="space-70"></div>
<!-- progress/sliders -->
<div id="progress">
<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 progress-bar-primary" 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>
</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 class="page-item">
<a href="javascript:void(0);" class="page-link">1</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">...</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">5</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">6</a>
</li>
<li class="active page-item">
<a href="javascript:void(0);" class="page-link">7</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">8</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">9</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">...</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">12</a>
</li>
</ul>
<ul class="pagination pagination-info">
<li class="page-item">
<a href="javascript:void(0);" class="page-link"> prev</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">1</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">2</a>
</li>
<li class="active page-item">
<a href="javascript:void(0);" class="page-link">3</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">4</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">5</a>
</li>
<li class="page-item">
<a href="javascript:void(0);" class="page-link">next </a>
</li>
</ul>
</div>
</div>
</div>
<!-- end progress -->
<!-- sliders -->
<div id="sliders">
<div class="row">
<div class="col-md-6">
<div class="title">
<h3>Sliders</h3>
</div>
<div id="sliderRegular" class="slider"></div>
<div id="sliderDouble" class="slider slider-info"></div>
</div>
<div class="col-md-6 ml-auto">
<div class="title">
<h3>Badges </h3>
</div>
<span class="badge badge-pill badge-secondary">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-rose">Rose</span>
</div>
</div>
</div>
<!-- end sliders -->
</div>
</div>
<div class="section section-navbars cd-section" id="navigation">
<div class="container">
<!-- menu -->
<div class="row">
<div class="col-md-6">
<div class="title">
<h3>Menu</h3>
</div>
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="/presentation.html">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="active nav-item">
<a href="#pablo" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">Link</a>
</li>
<li class="dropdown nav-item">
<a href="#pablo" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#pablo" class="dropdown-item">Action</a>
<a href="#pablo" class="dropdown-item">Another action</a>
<a href="#pablo" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#pablo" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#pablo" class="dropdown-item">One more separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-md-6">
<div class="title">
<h3>Menu with Icons</h3>
</div>
<nav class="navbar navbar-expand-lg bg-info">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="/presentation.html">Icons</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#pablo" class="nav-link"><i class="material-icons">email</i></a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link"><i class="material-icons">face</i></a>
</li>
<li class="dropdown nav-item">
<a href="#pablo" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="material-icons">settings</i>
<b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#pablo" class="dropdown-item">Action</a>
<a href="#pablo" class="dropdown-item">Another action</a>
<a href="#pablo" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#pablo" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#pablo" class="dropdown-item">One more separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- end menu -->
<div class="title">
<h3>Navigation</h3>
</div>
</div>
<!-- navbar -->
<div id="navbar">
<div class="navigation-example" style="background-image: url('./assets/img//bg.jpg');">
<!-- rose navbar with search form -->
<nav class="navbar navbar-expand-lg bg-rose">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#0">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#pablo" class="nav-link">link</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">link</a>
</li>
</ul>
<form class="form-inline ml-auto">
<div class="form-group has-white">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-white btn-raised btn-fab btn-round">
<i class="material-icons">search</i>
</button>
</form>
</div>
</div>
</nav>
<!-- end rose navbar -->
<!-- info navbar -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#0">Info Color</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="active nav-item">
<a href="#pablo" class="nav-link">
Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Profile
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end info navbar -->
<!-- primary navbar -->
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#0">Primary Color</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="active nav-item">
<a href="#pablo" class="nav-link">
<i class="material-icons">explore</i> Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="material-icons">account_circle</i> Profile
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="material-icons">settings</i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end primary navbar -->
<!-- inverse navbar with notifications -->
<nav class="navbar navbar-inverse navbar-expand-lg bg-dark" role="navigation-demo">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-translate">
<a class="navbar-brand" href="#0">Navbar with notification</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#pablo" class="nav-link">
Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Wishlist
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="btn btn-rose btn-raised btn-fab btn-round" data-toggle="dropdown">
<i class="material-icons">email</i>
</a>
</li>
<li class="dropdown nav-item">
<a href="#pablo" class="profile-photo dropdown-toggle nav-link" data-toggle="dropdown">
<div class="profile-photo-small">
<img src="./assets/img/faces/avatar.jpg" alt="Circle Image" class="rounded-circle img-fluid">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#pablo" class="dropdown-item">Me</a>
<a href="#pablo" class="dropdown-item">Settings and other stuff</a>
<a href="#pablo" class="dropdown-item">Sign out</a>
</div>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-->
</nav>
<!-- end inverse navbar -->
<!-- default navbar with profile photo -->
<nav class="navbar navbar-default navbar-expand-lg" role="navigation-demo">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-translate">
<a class="navbar-brand" href="#0">Navbar with profile</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#pablo" class="nav-link">
Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Wishlist
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="btn btn-rose btn-raised btn-round " data-toggle="dropdown">
Register
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-->
</nav>
<!-- end default navbar -->
<!-- transparent navbar -->
<nav class="navbar navbar-transparent navbar-expand-lg">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#pablo">Transparent</a>
<button type="button" class="ml-auto navbar-toggler" data-toggle="collapse" data-target="#example-navbar-transparent">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-transparent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="fa fa-facebook-square"></i> Facebook
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="fa fa-twitter"></i> Twitter
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="fa fa-instagram"></i> Instagram
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end transparent navbar-->
</div>
</div>
<!-- end navbar -->
</div>
<div class="section section-tabs">
<div class="container">
<!-- nav tabs -->
<div id="nav-tabs">
<h3>Navigation Tabs</h3>
<div class="row">
<div class="col-md-6">
<h3>
<small>Tabs with Icons on Card</small>
</h3>
<!-- Tabs with icons on Card -->
<div class="card card-nav-tabs">
<div class="card-header card-header-primary">
<!-- 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="nav-item">
<a class="nav-link active" href="#profile" data-toggle="tab">
<i class="material-icons">face</i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages" data-toggle="tab">
<i class="material-icons">chat</i> Messages
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings" data-toggle="tab">
<i class="material-icons">build</i> Settings
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<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">
<h3>
<small>Tabs on Plain Card</small>
</h3>
<!-- Tabs on Plain Card -->
<div class="card card-nav-tabs card-plain">
<div class="card-header card-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="nav-item">
<a class="nav-link active" href="#home" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#updates" data-toggle="tab">Updates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history" data-toggle="tab">History</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<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>
</div>
<!-- end nav tabs -->
<div class="section section-white">
<div class="container">
<!-- nav pills -->
<div id="navigation-pills">
<div class="title">
<h3>Navigation Pills</h3>
</div>
<div class="title">
<h3>
<small>With Icons</small>
</h3>
</div>
<div class="row">
<div class="col-lg-6 col-md-8">
<ul class="nav nav-pills nav-pills-icons" role="tablist">
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
<li class="nav-item">
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
<i class="material-icons">schedule</i> Schedule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
<i class="material-icons">list</i> Tasks
</a>
</li>
</ul>
<div class="tab-content tab-space">
<div class="tab-pane active" id="dashboard-1">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br>
<br> Dramatically visualize customer directed convergence without revolutionary ROI.
</div>
<div class="tab-pane" id="schedule-1">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br>
<br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
<div class="tab-pane" id="tasks-1">
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
<br>
<br>Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-pills-icons flex-column" role="tablist">
<!--
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
-->
<li class="nav-item">
<a class="nav-link active" href="#dashboard-2" role="tab" data-toggle="tab">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule-2" role="tab" data-toggle="tab">
<i class="material-icons">schedule</i> Schedule
</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="tab-content">
<div class="tab-pane active" id="dashboard-2">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br>
<br> Dramatically visualize customer directed convergence without revolutionary ROI.
</div>
<div class="tab-pane" id="schedule-2">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br>
<br>Dramatically maintain clicks-and-mortar solutions without functional solutions.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end nav pills -->
</div>
</div>
<!-- notifications -->
<div class="section cd-section section-notifications" id="notifications">
<div class="container">
<div class="title">
<h3>Notifications</h3>
</div>
</div>
<div class="alert alert-info">
<div class="container">
<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">
<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">
<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">
<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">
<!-- typography -->
<div id="typography" class="cd-section">
<div class="title">
<h2>Typography</h2>
</div>
<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">
<h1 class="title">
<span class="tim-note">Header 1 Title</span>The Life of Material Kit </h1>
</div>
<div class="tim-typo">
<h2 class="title">
<span class="tim-note">Header 2 Title</span>The Life of Material Kit</h2>
</div>
<div class="tim-typo">
<h3 class="title">
<span class="tim-note">Header 3 Title</span>The Life of Material Kit</h3>
</div>
<div class="tim-typo">
<h4 class="title">
<span class="tim-note">Header 4 Title</span>The Life of Material Kit</h4>
</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