mirror of
https://github.com/tabler/tabler.git
synced 2026-08-13 06:42:23 +04:00
codecalm
809 lines
21 KiB
HTML
809 lines
21 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<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">
|
|
|
|
<title>Cards design - tabler.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>
|
|
|
|
<!-- Dashboard Core -->
|
|
<link href="./assets/css/dashboard.css" rel="stylesheet" />
|
|
<script src="./assets/js/dashboard.js"></script>
|
|
|
|
|
|
<!-- c3.js Charts Plugin -->
|
|
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
|
|
<script src="./assets/plugins/charts-c3/plugin.js"></script>
|
|
|
|
|
|
</head>
|
|
<body class="">
|
|
|
|
<div class="page">
|
|
|
|
|
|
<div class="page-main">
|
|
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="navbar p-0">
|
|
<a class="navbar-brand" href="#">
|
|
<img src="./assets/images/logo.svg" class="navbar-brand-img" alt="tabler.io">
|
|
<span class="d-none d-lg-inline-block">Bootstrap</span>
|
|
</a>
|
|
<div class="nav order-lg-2">
|
|
<div class="nav-item">
|
|
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
|
|
</div>
|
|
<a class="nav-link icon">
|
|
<i class="fe fe-maximize"></i>
|
|
</a>
|
|
<div class="dropdown d-none d-md-flex">
|
|
<a class="nav-link icon" data-toggle="dropdown">
|
|
<i class="fe fe-message-square"></i>
|
|
<span class="badge badge-pill badge-danger">1</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
|
|
delectus dolore dolores maxime nesciunt qui quia totam.
|
|
</div>
|
|
</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="badge badge-pill badge-danger">10</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
|
|
delectus dolore dolores maxime nesciunt qui quia totam.
|
|
</div>
|
|
</div>
|
|
<div class="dropdown">
|
|
<a href="#" class="nav-link" data-toggle="dropdown">
|
|
<span class="avatar" style="background-image: url(assets/images/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">
|
|
<a class="dropdown-item" href="#">
|
|
<span>Profile</span>
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<span class="float-right"><span class="badge badge-primary">6</span></span>
|
|
<span>Inbox</span>
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<span>Message</span>
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Need help? </a>
|
|
<a class="dropdown-item" href="#">Sign out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
|
|
<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
|
|
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu mt-2 text-color" role="menu">
|
|
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
|
|
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
|
|
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-nav d-none d-lg-flex">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<ul class="nav nav-tabs">
|
|
|
|
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a href="./." class="nav-link"><i class="fe fe-home"></i> Home</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a href="javascript:void(0)" class="nav-link active"><i class="fe fe-box"></i> Interface</a>
|
|
|
|
|
|
<div class="nav-submenu nav">
|
|
|
|
|
|
|
|
<a href="./cards.html" class="nav-item active">Cards design</a>
|
|
|
|
|
|
|
|
<a href="./charts.html" class="nav-item ">Charts</a>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
|
|
|
|
|
|
<div class="nav-submenu nav">
|
|
|
|
|
|
|
|
<a href="./maps.html" class="nav-item ">Maps</a>
|
|
|
|
|
|
|
|
<a href="./icons.html" class="nav-item ">Icons</a>
|
|
|
|
|
|
|
|
<a href="./store.html" class="nav-item ">Store</a>
|
|
|
|
|
|
|
|
<a href="./blog.html" class="nav-item ">Blog</a>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
|
|
|
|
<a href="./profile.html" class="nav-link"><i class="fe fe-user"></i> Profile</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="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-3 ml-auto">
|
|
<form class="input-icon">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-content">
|
|
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">This is a standard card</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
This is standard card footer
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Built card</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-blue"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card blue</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-green"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card green</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-orange"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card orange</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-red"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card red</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-yellow"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card yellow</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-teal"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card teal</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status bg-purple"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card purple</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
<div class="card-status card-status-left bg-blue"></div>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card status on left side</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card card-collapsed">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Initial collapsed card</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">With additional fullscreen button</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Pannel with custom buttons</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
|
|
<a class="btn btn-secondary btn-sm">Action 1</a>
|
|
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card with search form</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
|
|
<form action="">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
|
|
<span class="input-group-btn ml-2">
|
|
<button class="btn btn-sm btn-default" type="submit">
|
|
<span class="fe fe-search"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card with alert</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-alert alert alert-success mb-0">
|
|
Adding action was successful
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
<h3 class="card-title">Card with alert</h3>
|
|
|
|
|
|
|
|
<div class="card-options">
|
|
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-alert alert alert-danger mb-0">
|
|
Adding action was failed
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</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=".">Advertise</a></li>
|
|
<li><a href=".">Help Center</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<ul class="list-unstyled mb-0">
|
|
<li><a href=".">Invite friends</a></li>
|
|
<li><a href=".">Tag photos</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<ul class="list-unstyled mb-0">
|
|
<li><a href=".">Stock photos</a></li>
|
|
<li><a href=".">Photobooks</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<ul class="list-unstyled mb-0">
|
|
<li><a href=".">Press Kit</a></li>
|
|
<li><a href=".">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mt-4 mt-lg-0">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequatur corporis debitis dolore doloribus esse.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row align-items-center flex-row-reverse">
|
|
<div class="col-auto ml-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.io</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |