Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity
Files
a0dd18c65a8034521fef6db492697a23e6b5cb6c
tabler/demo/profile.html
codecalm 12070b763b tabler build - 21.12
2019-12-21 00:41:17 +01:00

653 lines
38 KiB
HTML
Raw Blame History

<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version v1.0.0-alpha
* @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"/>
<meta http-equiv="Content-Language" content="en"/>
<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"/>
<title>Profile - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
<style>
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="wrapper">
<aside class="sidebar sidebar-dark">
<!-- Sidebar logo -->
<a href=".." class="sidebar-brand">
<img src="../img/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
<img src="../img/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
</a>
<div class="sidebar-content">
<div>
<!-- Sidebar menu -->
<ul class="sidebar-nav">
<li class="sidebar-nav-title">Navigation</li>
<li class="sidebar-nav-item">
<a href="./index.html" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span class="nav-text">Dashboard</span>
<span class="badge bg-blue"></span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./form-elements.html" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
<span class="nav-text">Form elements</span>
<span class="badge bg-red">New</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
<span class="nav-text">Error pages</span>
</a>
<ul class="sidebar-subnav">
<li class="sidebar-nav-item">
<a href="./400.html" class="sidebar-nav-link">
<span>400 page</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./401.html" class="sidebar-nav-link">
<span>401 page</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./403.html" class="sidebar-nav-link">
<span>403 page</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./404.html" class="sidebar-nav-link">
<span>404 page</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./500.html" class="sidebar-nav-link">
<span>500 page</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./503.html" class="sidebar-nav-link">
<span>503 page</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./maintenance.html" class="sidebar-nav-link">
<span>Maintenance page</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-nav-item">
<a href="./" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
<span class="nav-text">Base</span>
</a>
<ul class="sidebar-subnav">
<li class="sidebar-nav-item">
<a href="./buttons.html" class="sidebar-nav-link">
<span>Buttons</span>
<span class="badge bg-green">New</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./cards.html" class="sidebar-nav-link">
<span>Cards</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./calendar.html" class="sidebar-nav-link">
<span>Calendar</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./users.html" class="sidebar-nav-link">
<span>Users</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./gallery.html" class="sidebar-nav-link">
<span>Gallery</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-nav-item">
<a href="./charts.html" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
<span class="nav-text">Charts</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./layouts.html" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
<span class="nav-text">Layouts</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<span class="nav-text">Extra</span>
</a>
<ul class="sidebar-subnav">
<li class="sidebar-nav-item">
<a href="./invoice.html" class="sidebar-nav-link">
<span>Invoice</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-nav-item">
<a href="./docs/index.html" class="sidebar-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span class="nav-text">Documentation</span>
</a>
<ul class="sidebar-subnav">
<li class="sidebar-nav-item">
<a href="./docs/index.html" class="sidebar-nav-link">
<span>index</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/alerts.html" class="sidebar-nav-link">
<span>Alerts</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/autosize.html" class="sidebar-nav-link">
<span>Autosize</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/avatars.html" class="sidebar-nav-link">
<span>Avatars</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/badges.html" class="sidebar-nav-link">
<span>Badges</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/breadcrumb.html" class="sidebar-nav-link">
<span>Breadcrumb</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/buttons.html" class="sidebar-nav-link">
<span>Buttons</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/cards.html" class="sidebar-nav-link">
<span>Cards</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/carousel.html" class="sidebar-nav-link">
<span>Carousel</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/colors.html" class="sidebar-nav-link">
<span>Colors</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/cursors.html" class="sidebar-nav-link">
<span>Cursors</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/charts.html" class="sidebar-nav-link">
<span>Charts</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/divider.html" class="sidebar-nav-link">
<span>Divider</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/empty.html" class="sidebar-nav-link">
<span>Empty states</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/flags.html" class="sidebar-nav-link">
<span>Flags</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/form-elements.html" class="sidebar-nav-link">
<span>Form elements</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/form-helpers.html" class="sidebar-nav-link">
<span>Form helpers</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/input-mask.html" class="sidebar-nav-link">
<span>Form input mask</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/progress.html" class="sidebar-nav-link">
<span>Progress</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/ribbons.html" class="sidebar-nav-link">
<span>Ribbons</span>
<span class="badge bg-green">New</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/spinners.html" class="sidebar-nav-link">
<span>Spinners</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/steps.html" class="sidebar-nav-link">
<span>Steps</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/tables.html" class="sidebar-nav-link">
<span>Tables</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/tabs.html" class="sidebar-nav-link">
<span>Tabs</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/timelines.html" class="sidebar-nav-link">
<span>Timelines</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/toasts.html" class="sidebar-nav-link">
<span>Toasts</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/tooltips.html" class="sidebar-nav-link">
<span>Tooltips</span>
</a>
</li>
<li class="sidebar-nav-item">
<a href="./docs/typography.html" class="sidebar-nav-link">
<span>Typography</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="mt-auto">
<a href="#" class="btn btn-primary btn-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Logout
</a>
</div>
</div>
</aside>
<div class="content">
<header class="topnav topbar">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<div class="navbar-search d-none d-xl-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control form-control-light" placeholder="Search&hellip;">
</div>
</form>
</div>
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar avatar-sm" style="background-image: url(../img/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block leading-none">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card card-profile">
<div class="card-header" style="background-image: url(./img/photos/1194d63fe36a8670.jpg);"></div>
<div class="card-body text-center">
<img class="card-profile-img" src="img/avatars/000f.jpg">
<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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
Follow
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="media">
<span class="avatar avatar-xl" style="background-image: url(./img/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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></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(img/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">
<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-4">
<div class="media">
<div class="media-object avatar avatar-md mr-4" style="background-image: url(img/avatars/000f.jpg)"></div>
<div class="media-body">
<div class="media-heading">
<small class="float-right text-muted">4 min</small>
<h4 class="font-semibold">Emmy Levet</h4 class="font-semibold">
</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(img/avatars/002f.jpg)"></div>
<div class="media-body">
<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="media mt-4">
<div class="media-object avatar mr-4" style="background-image: url()"></div>
<div class="media-body">
<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="media">
<div class="media-object avatar avatar-md mr-4" style="background-image: url(img/avatars/000f.jpg)"></div>
<div class="media-body">
<div class="media-heading">
<small class="float-right text-muted">12 min</small>
<h4 class="font-semibold">Emmy Levet</h4 class="font-semibold">
</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="media">
<div class="media-object avatar avatar-md mr-4" style="background-image: url(img/avatars/000f.jpg)"></div>
<div class="media-body">
<div class="media-heading">
<small class="float-right text-muted">34 min</small>
<h4 class="font-semibold">Emmy Levet</h4 class="font-semibold">
</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(img/avatars/001f.jpg)"></div>
<div class="media-body">
<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>
</main>
</div>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js?1576885231"></script>
<script>
document.body.style.display = 'block';
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink