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>Profile - 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 active" 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 active">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="row"> <div class="col-lg-4"> <div class="card card-profile"> <div class="card-header" style="background-image: url(demo/photos/eberhard-grossgasteiger-311213-500.jpg);"></div> <div class="card-body text-center"> <img class="card-profile-img" src="demo/faces/male/16.jpg"> <h3 class="mb-3">Peter Richards</h3> <p class="mb-4"> Big belly rude boy, million dollar hustler. Unemployed. </p> <button class="btn btn-outline-primary btn-sm"> <span class="fa fa-twitter"></span> Follow </button> </div> </div> <div class="card"> <div class="card-body"> <div class="media"> <span class="avatar avatar-xxl mr-5" style="background-image: url(demo/faces/male/21.jpg)"></span> <div class="media-body"> <h4 class="m-0">Juan Hernandez</h4> <p class="text-muted mb-0">Webdeveloper</p> <ul class="social-links list-inline mb-0 mt-2"> <li class="list-inline-item"> <a href="javascript:void(0)" title="Facebook" data-toggle="tooltip"><i class="fa fa-facebook"></i></a> </li> <li class="list-inline-item"> <a href="javascript:void(0)" title="Twitter" data-toggle="tooltip"><i class="fa fa-twitter"></i></a> </li> <li class="list-inline-item"> <a href="javascript:void(0)" title="1234567890" data-toggle="tooltip"><i class="fa fa-phone"></i></a> </li> <li class="list-inline-item"> <a href="javascript:void(0)" title="@skypename" data-toggle="tooltip"><i class="fa fa-skype"></i></a> </li> </ul> </div> </div> </div> </div> <div class="card"> <div class="card-header"> <h3 class="card-title">My Profile</h3> </div> <div class="card-body"> <form> <div class="row"> <div class="col-auto"> <span class="avatar avatar-xl" style="background-image: url(demo/faces/female/9.jpg)"></span> </div> <div class="col"> <div class="form-group"> <label class="form-label">Email-Address</label> <input class="form-control" placeholder="your-email@domain.com"/> </div> </div> </div> <div class="form-group"> <label class="form-label">Bio</label> <textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea> </div> <div class="form-group"> <label class="form-label">Email-Address</label> <input class="form-control" placeholder="your-email@domain.com"/> </div> <div class="form-group"> <label class="form-label">Password</label> <input type="password" class="form-control" value="password"/> </div> <div class="form-footer"> <button class="btn btn-primary btn-block">Save</button> </div> </form> </div> </div> </div> <div class="col-lg-8"> <div class="card"> <div class="card-header"> <div class="input-group"> <input type="text" class="form-control" placeholder="Message"> <div class="input-group-append"> <button type="button" class="btn btn-secondary"> <i class="fe fe-camera"></i> </button> </div> </div> </div> <ul class="list-group card-list-group"> <li class="list-group-item py-5"> <div class="media"> <div class="media-object avatar avatar-md mr-4" style="background-image: url(demo/faces/male/16.jpg)"></div> <div class="media-body"> <div class="media-heading"> <small class="float-right text-muted">4 min</small> <h5>Peter Richards</h5> </div> <div> Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div> <ul class="media-list"> <li class="media mt-4"> <div class="media-object avatar mr-4" style="background-image: url(demo/faces/female/17.jpg)"></div> <div class="media-body"> <strong>Debra Beck: </strong> Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. </div> </li> <li class="media mt-4"> <div class="media-object avatar mr-4" style="background-image: url(demo/faces/male/32.jpg)"></div> <div class="media-body"> <strong>Jack Ruiz: </strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </div> </li> </ul> </div> </div> </li> <li class="list-group-item py-5"> <div class="media"> <div class="media-object avatar avatar-md mr-4" style="background-image: url(demo/faces/male/16.jpg)"></div> <div class="media-body"> <div class="media-heading"> <small class="float-right text-muted">12 min</small> <h5>Peter Richards</h5> </div> <div> Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div> </li> <li class="list-group-item py-5"> <div class="media"> <div class="media-object avatar avatar-md mr-4" style="background-image: url(demo/faces/male/16.jpg)"></div> <div class="media-body"> <div class="media-heading"> <small class="float-right text-muted">34 min</small> <h5>Peter Richards</h5> </div> <div> Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </div> <ul class="media-list"> <li class="media mt-4"> <div class="media-object avatar mr-4" style="background-image: url(demo/faces/male/26.jpg)"></div> <div class="media-body"> <strong>Wayne Holland: </strong> Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. </div> </li> </ul> </div> </div> </li> </ul> </div> <form class="card"> <div class="card-body"> <h3 class="card-title">Edit Profile</h3> <div class="row"> <div class="col-md-5"> <div class="form-group"> <label class="form-label">Company</label> <input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc."> </div> </div> <div class="col-sm-6 col-md-3"> <div class="form-group"> <label class="form-label">Username</label> <input type="text" class="form-control" placeholder="Username" value="michael23"> </div> </div> <div class="col-sm-6 col-md-4"> <div class="form-group"> <label class="form-label">Email address</label> <input type="email" class="form-control" placeholder="Email"> </div> </div> <div class="col-sm-6 col-md-6"> <div class="form-group"> <label class="form-label">First Name</label> <input type="text" class="form-control" placeholder="Company" value="Chet"> </div> </div> <div class="col-sm-6 col-md-6"> <div class="form-group"> <label class="form-label">Last Name</label> <input type="text" class="form-control" placeholder="Last Name" value="Faker"> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="form-label">Address</label> <input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia"> </div> </div> <div class="col-sm-6 col-md-4"> <div class="form-group"> <label class="form-label">City</label> <input type="text" class="form-control" placeholder="City" value="Melbourne"> </div> </div> <div class="col-sm-6 col-md-3"> <div class="form-group"> <label class="form-label">Postal Code</label> <input type="number" class="form-control" placeholder="ZIP Code"> </div> </div> <div class="col-md-5"> <div class="form-group"> <label class="form-label">Country</label> <select class="form-control custom-select"> <option value="">Germany</option> </select> </div> </div> <div class="col-md-12"> <div class="form-group mb-0"> <label class="form-label">About Me</label> <textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme You doubt I'll bother, reading into it I'll probably won't, left to my own devices But that's the difference in our opinions.</textarea> </div> </div> </div> </div> <div class="card-footer text-right"> <button type="submit" class="btn btn-primary">Update Profile</button> </div> </form> </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-6 col-md-3"> <ul class="list-unstyled mb-0"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> </ul> </div> <div class="col-6 col-md-3"> <ul class="list-unstyled mb-0"> <li><a href="#">Third link</a></li> <li><a href="#">Fourth link</a></li> </ul> </div> <div class="col-6 col-md-3"> <ul class="list-unstyled mb-0"> <li><a href="#">Fifth link</a></li> <li><a href="#">Sixth link</a></li> </ul> </div> <div class="col-6 col-md-3"> <ul class="list-unstyled mb-0"> <li><a href="#">Other link</a></li> <li><a href="#">Last link</a></li> </ul> </div> </div> </div> <div class="col-lg-4 mt-4 mt-lg-0"> Premium and Open Source dashboard template with responsive and high quality UI. For Free! </div> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="row align-items-center flex-row-reverse"> <div class="col-auto ml-lg-auto"> <div class="row align-items-center"> <div class="col-auto"> <ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li> <li class="list-inline-item"><a href="./faq.html">FAQ</a></li> </ul> </div> <div class="col-auto"> <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a> </div> </div> </div> <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center"> Copyright © 2018 <a href=".">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved. </div> </div> </div> </footer> </div> </body> </html>