Files
tabler/demo/profile.html
T
2020-04-11 22:37:19 +02:00

896 lines
44 KiB
HTML

<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.5
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
* Licensed under MIT (https://tabler.io/license)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Profile - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<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"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- Libs CSS -->
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
<link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
Action
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
<path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
<line x1="16" y1="5" x2="19" y2="8" />
</svg>
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
Separated link</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
<line x1="12" y1="12" x2="20" y2="7.5" />
<line x1="12" y1="12" x2="12" y2="21" />
<line x1="12" y1="12" x2="4" y2="7.5" />
<line x1="16" y1="5.25" x2="8" y2="9.75" />
</svg>
</span>
<span class="nav-link-title">
User Interface
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
</div>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./400.html" class="dropdown-item">400 page</a>
<a href="./401.html" class="dropdown-item">401 page</a>
<a href="./403.html" class="dropdown-item">403 page</a>
<a href="./404.html" class="dropdown-item">404 page</a>
<a href="./500.html" class="dropdown-item">500 page</a>
<a href="./503.html" class="dropdown-item">503 page</a>
<a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="9 11 12 14 20 6" />
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
</svg>
</span>
<span class="nav-link-title">
Form elements
</span>
</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
</svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item active" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="4" y="4" width="6" height="5" rx="2" />
<rect x="4" y="13" width="6" height="7" rx="2" />
<rect x="14" y="4" width="6" height="7" rx="2" />
<rect x="14" y="15" width="6" height="5" rx="2" />
</svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="14 3 14 8 19 8" />
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
<line x1="9" y1="9" x2="10" y2="9" />
<line x1="9" y1="13" x2="15" y2="13" />
<line x1="9" y1="17" x2="15" y2="17" />
</svg>
</span>
<span class="nav-link-title">
Docs
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/countup.html" >
Countup
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Profile
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-3">Emmy Levet</h2>
<p class="mb-4">
Big belly rude boy, million dollar hustler. Unemployed.
</p>
<button class="btn btn-outline-primary btn-sm">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
<path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
</svg>
Follow
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="media">
<span class="avatar avatar-xl" style="background-image: url(./static/avatars/002f.jpg)"></span>
<div class="media-body ml-4">
<h3>Flossi Uttley</h3>
<p class="text-muted mb-0">Engineer I</p>
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" title="Facebook" data-toggle="tooltip">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
<path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
</svg>
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
<path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
</svg>
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
</svg>
</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 mb-3">
<div class="col-auto">
<span class="avatar avatar-lg" style="background-image: url(static/avatars/004f.jpg)"></span>
</div>
<div class="col">
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
</div>
</div>
<div class="mb-2">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="mb-2">
<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">
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
<circle cx="12" cy="13" r="3" />
</svg>
</a>
</div>
</div>
<ul class="list-group card-list-group">
<li class="list-group-item py-4">
<div class="d-flex">
<div>
<span class="avatar mr-3" style="background-image: url(./static/avatars/000f.jpg)"></span>
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">4 min</small>
<h4>Emmy Levet</h4>
</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="list-unstyled">
<li class="d-flex mt-4">
<div>
<span class="avatar mr-3" style="background-image: url(./static/avatars/002f.jpg)"></span>
</div>
<div class="flex-fill">
<strong>Kellie Skingley: </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="d-flex mt-4">
<div>
<span class="avatar mr-3">HS</span>
</div>
<div class="flex-fill">
<strong>Haskel Shelper: </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-4">
<div class="d-flex">
<div>
<span class="avatar mr-3" style="background-image: url(./static/avatars/006m.jpg)"></span>
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">12 min</small>
<h4>Lorry Mion</h4>
</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-4">
<div class="d-flex">
<div>
<span class="avatar mr-3" style="background-image: url(./static/avatars/009m.jpg)"></span>
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">34 min</small>
<h4>Geoffry Flaunders</h4>
</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="list-unstyled">
<li class="d-flex mt-4">
<div>
<span class="avatar mr-3" style="background-image: url(./static/avatars/001f.jpg)"></span>
</div>
<div class="flex-fill">
<strong>Maryjo Lebarree: </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="mb-2">
<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="mb-2">
<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="mb-2">
<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="mb-2">
<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="mb-2">
<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="mb-2">
<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="mb-2">
<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="mb-2">
<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="mb-2">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-2 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>
<footer class="footer footer-transparent">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>