tabler-ui

<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="Content-Language" content="en" /> <meta name="msapplication-TileColor" content="#2d89ef"> <meta name="theme-color" content="#4188c9"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <link rel="icon" href="./favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />  <title>Homepage - tabler.github.io - a responsive, flat and full featured admin template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext"> <script src="./assets/js/require.min.js"></script> <script> requirejs.config({ baseUrl: '.' }); </script>  <link href="./assets/css/dashboard.css" rel="stylesheet" /> <script src="./assets/js/dashboard.js"></script>  <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" /> <script src="./assets/plugins/charts-c3/plugin.js"></script>  <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" /> <script src="./assets/plugins/maps-google/plugin.js"></script>  <script src="./assets/plugins/input-mask/plugin.js"></script> </head> <body class=""> <div class="page"> <div class="page-main"> <div class="header py-4"> <div class="container"> <div class="d-flex"> <a class="header-brand" href="./index.html"> <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo"> </a> <div class="d-flex order-lg-2 ml-auto"> <div class="nav-item d-none d-md-flex"> <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a> </div> <div class="dropdown d-none d-md-flex"> <a class="nav-link icon" data-toggle="dropdown"> <i class="fe fe-bell"></i> <span class="nav-unread"></span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span> <div> <strong>Nathan</strong> pushed new commit: Fix page load performance issue. <div class="small text-muted">10 minutes ago</div> </div> </a> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span> <div> <strong>Alice</strong> started new task: Tabler UI design. <div class="small text-muted">1 hour ago</div> </div> </a> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span> <div> <strong>Rose</strong> deployed new version of NodeJS REST Api V3 <div class="small text-muted">2 hours ago</div> </div> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a> </div> </div> <div class="dropdown"> <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"> <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span> <span class="ml-2 d-none d-lg-block"> <span class="text-default">Jane Pearson</span> <small class="text-muted d-block mt-1">Administrator</small> </span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-user"></i> Profile </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-settings"></i> Settings </a> <a class="dropdown-item" href="#"> <span class="float-right"><span class="badge badge-primary">6</span></span> <i class="dropdown-icon fe fe-mail"></i> Inbox </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-send"></i> Message </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-help-circle"></i> Need help? </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-log-out"></i> Sign out </a> </div> </div> </div> <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse"> <span class="header-toggler-icon"></span> </a> </div> </div> </div> <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-3 ml-auto"> <form class="input-icon my-3 my-lg-0"> <input type="search" class="form-control header-search" placeholder="Search…" tabindex="1"> <div class="input-icon-addon"> <i class="fe fe-search"></i> </div> </form> </div> <div class="col-lg order-lg-first"> <ul class="nav nav-tabs border-0 flex-column flex-lg-row"> <li class="nav-item"> <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a> </li> <li class="nav-item"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="./cards.html" class="dropdown-item ">Cards design</a> <a href="./charts.html" class="dropdown-item ">Charts</a> <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a> </div> </li> <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="./maps.html" class="dropdown-item ">Maps</a> <a href="./icons.html" class="dropdown-item ">Icons</a> <a href="./store.html" class="dropdown-item ">Store</a> <a href="./blog.html" class="dropdown-item ">Blog</a> <a href="./carousel.html" class="dropdown-item ">Carousel</a> </div> </li> <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="./profile.html" class="dropdown-item ">Profile</a> <a href="./login.html" class="dropdown-item ">Login</a> <a href="./register.html" class="dropdown-item ">Register</a> <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a> <a href="./400.html" class="dropdown-item ">400 error</a> <a href="./401.html" class="dropdown-item ">401 error</a> <a href="./403.html" class="dropdown-item ">403 error</a> <a href="./404.html" class="dropdown-item ">404 error</a> <a href="./500.html" class="dropdown-item ">500 error</a> <a href="./503.html" class="dropdown-item ">503 error</a> <a href="./email.html" class="dropdown-item ">Email</a> <a href="./empty.html" class="dropdown-item ">Empty page</a> <a href="./rtl.html" class="dropdown-item ">RTL mode</a> </div> </li> <li class="nav-item dropdown"> <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a> </li> <li class="nav-item"> <a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a> </li> <li class="nav-item"> <a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a> </li> </ul> </div> </div> </div> </div> <div class="my-3 my-md-5">       <div class="container"> <div class="page-header"> <div> <h1 class="page-title">Dashboard</h1> <div class="page-description"> <ul class="list-inline list-inline-dots m-0"> <li class="list-inline-item">Section 500</li> <li class="list-inline-item">English learning French</li> <li class="list-inline-item"> <a href="javascript:void(0)">United states</a> </li> <li class="list-inline-item">7 students</li> </ul> </div> </div> </div> <div class="row row-cards"> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <article class="media"> <div class="mr-3"> <div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div> </div> <div class="media-body"> <div class="content"> <p class="h5"> John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> </div> <nav class="d-flex text-muted"> <a href="#" class="icon mr-3"> <i class="fe fe-repeat"></i> </a> <a href="#" class="icon mr-3"> <i class="fe fe-twitter"></i> 24 </a> <a href="#" class="icon mr-3"> <i class="fe fe-heart"></i> 43 </a> <a href="" class="text-muted ml-auto"> 5 notes </a> </nav> </div> </article> </div> </div> <div class="card"> <div class="card-body"> <article class="media"> <div class="mr-3"> <div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div> </div> <div class="media-body"> <div class="content"> <p class="h5"> John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> </div> <nav class="d-flex text-muted"> <a href="#" class="icon mr-3"> <i class="fe fe-repeat"></i> </a> <a href="#" class="icon mr-3"> <i class="fe fe-twitter"></i> 24 </a> <a href="#" class="icon mr-3"> <i class="fe fe-heart"></i> 43 </a> <a href="" class="text-muted ml-auto"> 5 notes </a> </nav> </div> </article> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <article class="media"> <div class="mr-3"> <div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div> </div> <div class="media-body"> <div class="content"> <p class="h5"> John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> <figure> <img src="demo/photos/casey-horner-339165-500.jpg" alt="" class="rounded"> </figure> </div> <nav class="d-flex text-muted"> <a href="#" class="icon mr-3"> <i class="fe fe-repeat"></i> </a> <a href="#" class="icon mr-3"> <i class="fe fe-twitter"></i> 24 </a> <a href="#" class="icon mr-3"> <i class="fe fe-heart"></i> 43 </a> <a href="" class="text-muted ml-auto"> 5 notes </a> </nav> </div> </article> </div> </div> </div> <div class="col-lg-8"> <div class="card"> <div class="card-header"> <h3 class="card-title">HTTP Request</h3> </div> <div class="card-body"> <div class="row"> <div class="form-group col-sm-4 col-md-2"> <label class="form-label"> Method <span class="form-required">*</span> </label> <select class="custom-select"> <option value="GET">GET</option> <option value="POST">POST</option> <option value="PUT">PUT</option> <option value="HEAD">HEAD</option> <option value="DELETE">DELETE</option> <option value="PATCH">PATCH</option> </select> </div> <div class="form-group col-sm-8 col-md-10"> <label class="form-label"> URL <span class="form-required">*</span> </label> <input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest"> </div> </div> <div class="form-label">Assertions</div> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th class="pl-0">Source</th> <th>Property</th> <th>Comparison</th> <th class="pr-0">Target</th> </tr> </thead> <tr> <td class="pl-0"> <select class="custom-select"> <option value="STATUS_CODE" selected>Status code</option> <option value="JSON_BODY">JSON body</option> <option value="HEADERS">Headers</option> <option value="TEXT_BODY">Text body</option> <option value="RESPONSE_TIME">Response time</option> </select> </td> <td> <input type="text" class="form-control"></td> <td> <select class="custom-select"> <option value="EQUALS" selected>Equals</option> <option value="NOT_EQUALS">Not equals</option> <option value="HAS_KEY">Has key</option> <option value="NOT_HAS_KEY">Not has key</option> <option value="HAS_VALUE">Has value</option> <option value="NOT_HAS_VALUE">Not has value</option> <option value="IS_EMPTY">Is empty</option> <option value="NOT_EMPTY">Is not empty</option> <option value="GREATER_THAN">Greater than</option> <option value="LESS_THAN">Less than</option> </select> </td> <td class="pr-0"> <input type="text" class="form-control" value="200"> </td> </tr> <tr> <td class="pl-0"> <select class="custom-select"> <option value="STATUS_CODE">Status code</option> <option value="JSON_BODY" selected>JSON body</option> <option value="HEADERS">Headers</option> <option value="TEXT_BODY">Text body</option> <option value="RESPONSE_TIME">Response time</option> </select> </td> <td> <input type="text" class="form-control" value="parameters.alt.type"> </td> <td> <select class="custom-select"> <option value="EQUALS">Equals</option> <option value="NOT_EQUALS">Not equals</option> <option value="HAS_KEY">Has key</option> <option value="NOT_HAS_KEY">Not has key</option> <option value="HAS_VALUE" selected>Has value</option> <option value="NOT_HAS_VALUE">Not has value</option> <option value="IS_EMPTY">Is empty</option> <option value="NOT_EMPTY">Is not empty</option> <option value="GREATER_THAN">Greater than</option> <option value="LESS_THAN">Less than</option> </select> </td> <td class="pr-0"> <input type="text" class="form-control" value="string"> </td> </tr> <tr> <td class="pl-0"> <select class="custom-select"> <option value="STATUS_CODE">Status code</option> <option value="JSON_BODY">JSON body</option> <option value="HEADERS">Headers</option> <option value="TEXT_BODY">Text body</option> <option value="RESPONSE_TIME" selected>Response time</option> </select> </td> <td> <input type="text" class="form-control"></td> <td> <select class="custom-select"> <option value="EQUALS">Equals</option> <option value="NOT_EQUALS">Not equals</option> <option value="HAS_KEY">Has key</option> <option value="NOT_HAS_KEY">Not has key</option> <option value="HAS_VALUE">Has value</option> <option value="NOT_HAS_VALUE">Not has value</option> <option value="IS_EMPTY">Is empty</option> <option value="NOT_EMPTY">Is not empty</option> <option value="GREATER_THAN">Greater than</option> <option value="LESS_THAN" selected>Less than</option> </select> </td> <td class="pr-0"> <input type="text" class="form-control" value="500"> </td> </tr> <tr> <td class="pl-0"> <select class="custom-select"> <option value="STATUS_CODE">Status code</option> <option value="JSON_BODY">JSON body</option> <option value="HEADERS" selected>Headers</option> <option value="TEXT_BODY">Text body</option> <option value="RESPONSE_TIME">Response time</option> </select> </td> <td> <input type="text" class="form-control" value="content-type"> </td> <td> <select class="custom-select"> <option value="EQUALS" selected>Equals</option> <option value="NOT_EQUALS">Not equals</option> <option value="HAS_KEY">Has key</option> <option value="NOT_HAS_KEY">Not has key</option> <option value="HAS_VALUE">Has value</option> <option value="NOT_HAS_VALUE">Not has value</option> <option value="IS_EMPTY">Is empty</option> <option value="NOT_EMPTY">Is not empty</option> <option value="GREATER_THAN">Greater than</option> <option value="LESS_THAN">Less than</option> </select> </td> <td class="pr-0"> <input type="text" class="form-control" value="application/json; charset=UTF-8"> </td> </tr> </table> </div> </div> <div class="card-footer text-right"> <button type="submit" class="btn btn-primary">Make request</button> </div> </div> </div> <div class="col-12"></div> <div class="col-md-3"> <div class="card p-3"> <div class="d-flex align-items-center"> <span class="stamp stamp-md bg-blue mr-3"> <i class="fa fa-eur"></i> </span> <div> <h4 class="m-0"><a href="javascript:void(0)">132 <small>Sales</small></a></h4> <small class="text-muted">12 waiting payments</small> </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3"> <div class="d-flex align-items-center"> <span class="stamp stamp-md bg-green mr-3"> <i class="fa fa-shopping-bag"></i> </span> <div> <h4 class="m-0"><a href="javascript:void(0)">78 <small>Orders</small></a></h4> <small class="text-muted">32 shipped</small> </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3"> <div class="d-flex align-items-center"> <span class="stamp stamp-md bg-red mr-3"> <i class="fa fa-user"></i> </span> <div> <h4 class="m-0"><a href="javascript:void(0)">1,352 <small>Members</small></a></h4> <small class="text-muted">163 registered today</small> </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3"> <div class="d-flex align-items-center"> <span class="stamp stamp-md bg-yellow mr-3"> <i class="fa fa-comments"></i> </span> <div> <h4 class="m-0"><a href="javascript:void(0)">132 <small>Comments</small></a></h4> <small class="text-muted">16 waiting</small> </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3 px-4"> <div> Total revenue </div> <div class="py-4 m-0 text-center h1 text-green">$14,320</div> <div class="d-flex"> <small class="text-muted">Income</small> <div class="ml-auto"> <i class="fa fa-caret-up text-green"></i> 4% </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3 px-4"> <div> Order status </div> <div class="py-4 m-0 text-center h1 text-red">738</div> <div class="d-flex"> <small class="text-muted">New order</small> <div class="ml-auto"> <i class="fa fa-caret-down text-red"></i> 10% </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3 px-4"> <div> Income status </div> <div class="py-4 m-0 text-center h1 text-blue">$3,205</div> <div class="d-flex"> <small class="text-muted">New income</small> <div class="ml-auto"> 0% </div> </div> </div> </div> <div class="col-md-3"> <div class="card p-3 px-4"> <div> Customer status </div> <div class="py-4 m-0 text-center h1 text-yellow">118</div> <div class="d-flex"> <small class="text-muted">New users</small> <div class="ml-auto"> <i class="fa fa-caret-up text-green"></i> 3% </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="card "> <div class="card-body p-4"> <div class="row"> <div class="col-auto"> <div class="stamp stamp-md bg-yellow"> <i class="fe fe-hard-drive"></i> </div> </div> <div class="col text-right"> <div class="small text-muted">Capacity</div> <div class="h4 m-0">105GB</div> </div> </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="card "> <div class="card-body p-4"> <div class="row"> <div class="col-auto"> <div class="stamp stamp-md bg-green"> <i class="fe fe-dollar-sign"></i> </div> </div> <div class="col text-right"> <div class="small text-muted">Revenue</div> <div class="h4 m-0">$1,345</div> </div> </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="card "> <div class="card-body p-4"> <div class="row"> <div class="col-auto"> <div class="stamp stamp-md bg-red"> <i class="fe fe-alert-circle"></i> </div> </div> <div class="col text-right"> <div class="small text-muted">Errors</div> <div class="h4 m-0">23</div> </div> </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="card "> <div class="card-body p-4"> <div class="row"> <div class="col-auto"> <div class="stamp stamp-md bg-blue"> <i class="fe fe-twitter"></i> </div> </div> <div class="col text-right"> <div class="small text-muted">Followers</div> <div class="h4 m-0">1685</div> </div> </div> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-body"> <div class="card"> <div class="card-status bg-blue"></div> <div class="card-body"> <h4 class="mb-3">HTML & CSS lessons</h4> <div class="row"> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 6 Dec 2017</div> </div> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> Warsaw, Poland</div> </div> </div> </div> </div> <div class="card"> <div class="card-status bg-red"></div> <div class="card-body"> <h4 class="mb-3">HTML & CSS lessons</h4> <div class="row"> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 5 Jun 2019</div> </div> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> London, UK</div> </div> </div> </div> </div> <div class="card"> <div class="card-status bg-yellow"></div> <div class="card-body"> <h4 class="mb-3">HTML & CSS lessons</h4> <div class="row"> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 22 Oct 2018</div> </div> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> Barcelona, Spain</div> </div> </div> </div> </div> <div class="card"> <div class="card-status bg-green"></div> <div class="card-body"> <h4 class="mb-3">Smashing Magazine Conference</h4> <div class="row"> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 11 Dec 2018</div> </div> <div class="col-auto"> <div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> Santa Crus, Spain</div> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-8"> <form class="card" action=""> <div class="card-header"> <h3 class="card-title">Create new classroom</h3> </div> <div class="card-body"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">Name of Class</label> <input type="text" class="form-control" placeholder="e.g. English Class" /> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">Section</label> <input type="text" class="form-control" placeholder="e.g. English" /> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">Target Language (L1)</label> <select class="form-control custom-select"> <option value="english">English</option> </select> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">Target Language (L2)</label> <select class="form-control custom-select"> <option value="french">French</option> </select> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">Home Country</label> <select class="form-control custom-select"> <option value="french">United States</option> </select> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">School</label> <input type="text" class="form-control" placeholder="Where do you teach?" /> </div> </div> <div class="col-sm-12"> <div class="form-group"> <label class="form-label">What kind of classroom would you like to connect with?</label> <input type="text" class="form-control" placeholder="Where do you teach?" /> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">Which tools would you like to use?</label> <select class="form-control custom-select"> <option value="french">Blogging, Video Chat, Quizzes, +3 Others</option> </select> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="form-label">What Age Group are you going to teach?</label> <div> <label class="custom-control custom-radio"> <input type="radio" name="classroom-age" class="custom-control-input" checked> <span class="custom-control-indicator"></span> <span class="custom-control-description">K-12</span> </label> <label class="custom-control custom-radio"> <input type="radio" name="classroom-age" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Value</span> </label> </div> </div> </div> </div> </div> <div class="card-footer"> <div class="d-flex align-items-center"> <a href="javascript:void(0)" class="text-muted">Cancel</a> <button type="submit" class="btn btn-primary ml-auto">Create classroom</button> </div> </div> </form> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-body"> <h4 class="card-title"> Colors </h4> <div> <div class="d-inline-block bg-blue w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-azure w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-indigo w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-purple w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-pink w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-red w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-orange w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-yellow w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-lime w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-green w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-teal w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-cyan w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-gray w-6 h-6 rounded mr-1"></div> <div class="d-inline-block bg-gray-dark w-6 h-6 rounded mr-1"></div> </div> </div> </div> <div class="card"> <div class="card-header"> <h3 class="card-title text-center">December 2017</h3> </div> <div class="card-body p-3"> <table class="table table-calendar"> <tbody> <tr> <th>Mo</th> <th>Tu</th> <th>We</th> <th>Th</th> <th>Fr</th> <th>Sa</th> <th>Su</th> </tr> <tr> <td class="text-muted">27</td> <td class="text-muted">28</td> <td class="text-muted">29</td> <td class="text-muted">30</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><a href="javascript:void(0)" class="table-calendar-link">4</a></td> <td>5</td> <td><a href="javascript:void(0)" class="table-calendar-link">6</a></td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td><a href="javascript:void(0)" class="table-calendar-link">12</a></td> <td>13</td> <td>14</td> <td><a href="javascript:void(0)">15</a></td> <td>16</td> <td>17</td> </tr> <tr> <td>18</td> <td><a href="javascript:void(0)" class="table-calendar-link">19</a></td> <td><a href="javascript:void(0)" class="table-calendar-link">20</a></td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td class="text-muted">1</td> </tr> </tbody> </table> </div> <ul class="list-group card-list-group"> <li class="list-group-item list-group-item-red"> <a href="javascript:void(0)" class="text-inherit">Cras justo odio</a> <span class="float-right text-muted">16 Dec</span> </li> <li class="list-group-item list-group-item-blue"> <a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a> <span class="float-right text-muted">22 Dec</span> </li> <li class="list-group-item list-group-item-red"> <a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a> <span class="float-right text-muted">29 Dec</span> </li> </ul> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-body"> <h3 class="card-title">Browsers traffic</h3> <div> <div id="chart-browsers" style="height: 15rem"></div> </div> </div> <table class="table card-table"> <tbody> <tr> <td width="1"><i class="browser browser-chrome"></i></td> <td>Google Chrome</td> <td class="text-right"><span class="text-muted">23%</span></td> </tr> <tr> <td><i class="browser browser-firefox"></i></td> <td>Mozila Firefox</td> <td class="text-right"><span class="text-muted">15%</span></td> </tr> <tr> <td><i class="browser browser-safari"></i></td> <td>Apple Safari</td> <td class="text-right"><span class="text-muted">7%</span></td> </tr> <tr> <td><i class="browser browser-opera"></i></td> <td>Opera mini</td> <td class="text-right"><span class="text-muted">23%</span></td> </tr> <tr> <td><i class="browser browser-edge"></i></td> <td>Microsoft edge</td> <td class="text-right"><span class="text-muted">9%</span></td> </tr> </tbody> </table> </div> <script> require(['c3', 'jquery'], function (c3) { var chart = c3.generate({ bindto: '#chart-browsers', data: { columns: [ ['Chrome', 36], ['Firefox', 5], ['Safari', 9], ['Edge', 20], ['Opera', 30], ], colors: { Chrome: '{"hex"=>"#5eba00", "name"=>"Green"}', Firefox: '{"hex"=>"#fd9644", "name"=>"Orange"}', Safari: '{"hex"=>"#467fcf", "name"=>"Blue"}', Edge: '{"hex"=>"#45aaf2", "name"=>"Azure"}', Opera: '{"hex"=>"#e74c3c", "name"=>"Red"}', }, type: 'donut'