mirror of https://github.com/ColorlibHQ/gentelella
2190 lines
156 KiB
HTML
Executable File
2190 lines
156 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<!-- Meta, title, CSS, favicons, etc. -->
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<title>Gentelella Alela! | </title>
|
||
|
||
<!-- Bootstrap -->
|
||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Font Awesome -->
|
||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||
<!-- NProgress -->
|
||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||
<!-- iCheck -->
|
||
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
|
||
<!-- bootstrap-progressbar -->
|
||
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
|
||
<!-- PNotify -->
|
||
<link href="../vendors/pnotify/dist/pnotify.css" rel="stylesheet">
|
||
<link href="../vendors/pnotify/dist/pnotify.buttons.css" rel="stylesheet">
|
||
<link href="../vendors/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">
|
||
|
||
<!-- Custom Theme Style -->
|
||
<link href="../build/css/custom.css" rel="stylesheet">
|
||
<link href="../build/css/style-extra-bs4.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body class="nav-md">
|
||
<div class="body">
|
||
<div class="main_container container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-2 col-md-2 left_col">
|
||
<div class="left_col">
|
||
<div class="navbar nav_title" style="border: 0;">
|
||
<a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
|
||
</div>
|
||
|
||
<div class="clearfix"></div>
|
||
|
||
<!-- menu profile quick info -->
|
||
<div class="profile clearfix">
|
||
<div class="profile_pic">
|
||
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
|
||
</div>
|
||
<div class="profile_info">
|
||
<span>Welcome,</span>
|
||
<h2>John Doe</h2>
|
||
</div>
|
||
</div>
|
||
<!-- /menu profile quick info -->
|
||
|
||
<br/>
|
||
|
||
<!-- sidebar menu -->
|
||
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
|
||
<div class="menu_section">
|
||
<h3>General</h3>
|
||
<ul class="nav side-menu">
|
||
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="index.html">Dashboard</a></li>
|
||
<li><a href="index2.html">Dashboard2</a></li>
|
||
<li><a href="index3.html">Dashboard3</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="form.html">General Form</a></li>
|
||
<li><a href="form_advanced.html">Advanced Components</a></li>
|
||
<li><a href="form_validation.html">Form Validation</a></li>
|
||
<li><a href="form_wizards.html">Form Wizard</a></li>
|
||
<li><a href="form_upload.html">Form Upload</a></li>
|
||
<li><a href="form_buttons.html">Form Buttons</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-desktop"></i> UI Elements <span
|
||
class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="general_elements.html">General Elements</a></li>
|
||
<li><a href="media_gallery.html">Media Gallery</a></li>
|
||
<li><a href="typography.html">Typography</a></li>
|
||
<li><a href="icons.html">Icons</a></li>
|
||
<li><a href="widgets.html">Widgets</a></li>
|
||
<li><a href="invoice.html">Invoice</a></li>
|
||
<li><a href="inbox.html">Inbox</a></li>
|
||
<li><a href="calendar.html">Calendar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="tables.html">Tables</a></li>
|
||
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span
|
||
class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="chartjs.html">Chart JS</a></li>
|
||
<li><a href="chartjs2.html">Chart JS2</a></li>
|
||
<li><a href="morisjs.html">Moris JS</a></li>
|
||
<li><a href="echarts.html">ECharts</a></li>
|
||
<li><a href="other_charts.html">Other Charts</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
|
||
<li><a href="fixed_footer.html">Fixed Footer</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="menu_section">
|
||
<h3>Live On</h3>
|
||
<ul class="nav side-menu">
|
||
<li><a><i class="fa fa-bug"></i> Additional Pages <span
|
||
class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="e_commerce.html">E-commerce</a></li>
|
||
<li><a href="projects.html">Projects</a></li>
|
||
<li><a href="project_detail.html">Project Detail</a></li>
|
||
<li><a href="contacts.html">Contacts</a></li>
|
||
<li><a href="profile.html">Profile</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="page_403.html">403 Error</a></li>
|
||
<li><a href="page_404.html">404 Error</a></li>
|
||
<li><a href="page_500.html">500 Error</a></li>
|
||
<li><a href="plain_page.html">Plain Page</a></li>
|
||
<li><a href="login.html">Login Page</a></li>
|
||
<li><a href="pricing_tables.html">Pricing Tables</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span
|
||
class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li><a href="#level1_1">Level One</a></li>
|
||
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
|
||
<ul class="nav child_menu">
|
||
<li class="sub_menu"><a href="level2.html">Level Two</a>
|
||
</li>
|
||
<li><a href="#level2_1">Level Two</a>
|
||
</li>
|
||
<li><a href="#level2_2">Level Two</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#level1_2">Level One</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span
|
||
class="label label-success pull-right">Coming Soon</span></a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- /sidebar menu -->
|
||
|
||
<!-- /menu footer buttons -->
|
||
<div class="sidebar-footer col-lg-2 hidden-small">
|
||
<a data-toggle="tooltip" data-placement="top" title="Settings">
|
||
<span class="fa fa-cog" aria-hidden="true"></span>
|
||
</a>
|
||
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
|
||
<span class="fa fa-arrows-alt" aria-hidden="true"></span>
|
||
</a>
|
||
<a data-toggle="tooltip" data-placement="top" title="Lock">
|
||
<span class="fa fa-eye-slash" aria-hidden="true"></span>
|
||
</a>
|
||
<a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
|
||
<span class="fa fa-power-off" aria-hidden="true"></span>
|
||
</a>
|
||
</div>
|
||
<!-- /menu footer buttons -->
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-10 col-md-12 right_col_wrapper">
|
||
<div class="row">
|
||
<!-- top navigation -->
|
||
<div class="col-lg-12 top_nav">
|
||
<div class="nav_menu">
|
||
<nav>
|
||
<div class="nav toggle">
|
||
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
|
||
</div>
|
||
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<li class="">
|
||
<a href="javascript:;" class="user-profile dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<img src="images/img.jpg" alt="">John Doe
|
||
<span class=" fa fa-angle-down"></span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-usermenu pull-right">
|
||
<li><a href="javascript:;"> Profile</a></li>
|
||
<li>
|
||
<a href="javascript:;">
|
||
<span class="badge bg-red pull-right">50%</span>
|
||
<span>Settings</span>
|
||
</a>
|
||
</li>
|
||
<li><a href="javascript:;">Help</a></li>
|
||
<li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log
|
||
Out</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li role="presentation" class="dropdown">
|
||
<a href="javascript:;" class="dropdown-toggle info-number"
|
||
data-toggle="dropdown"
|
||
aria-expanded="false">
|
||
<i class="fa fa-envelope-o"></i>
|
||
<span class="badge bg-green">6</span>
|
||
</a>
|
||
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
|
||
<li>
|
||
<a>
|
||
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div class="text-center">
|
||
<a>
|
||
<strong>See All Alerts</strong>
|
||
<i class="fa fa-angle-right"></i>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<!-- /top navigation -->
|
||
|
||
<!-- page content -->
|
||
<div class="col-lg-12 right_col" role="main">
|
||
<div class="">
|
||
<div class="page-title row">
|
||
<div class="col-sm-6 col-12 text-left">
|
||
<h3>General Elements</h3>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-12 text-right">
|
||
<div class="row">
|
||
<div class="offset-xl-7 col-xl-5 col-lg-12 col-md-12 col-sm-5 col-12 form-group pull-right top_search mt-3">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" placeholder="Search for...">
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-light" type="button">Go!</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-bars"></i> Tabs
|
||
<small>Float left</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
|
||
<div class="" role="tabpanel" data-example-id="togglable-tabs">
|
||
<ul id="myTab" class="nav nav-tabs " role="tablist">
|
||
<li role="presentation" class="nav-item"><a href="#tab_content1"
|
||
class="nav-link active"
|
||
id="home-tab"
|
||
role="tab"
|
||
data-toggle="tab"
|
||
aria-expanded="true">Home</a>
|
||
</li>
|
||
<li role="presentation" class="nav-item"><a href="#tab_content2"
|
||
class="nav-link"
|
||
role="tab"
|
||
id="profile-tab"
|
||
data-toggle="tab"
|
||
aria-expanded="false">Profile</a>
|
||
</li>
|
||
<li role="presentation" class="nav-item"><a href="#tab_content3"
|
||
class="nav-link"
|
||
role="tab"
|
||
id="profile-tab2"
|
||
data-toggle="tab"
|
||
aria-expanded="false">Profile</a>
|
||
</li>
|
||
</ul>
|
||
<div id="myTabContent" class="tab-content">
|
||
<div role="tabpanel" class="tab-pane fade active show in"
|
||
id="tab_content1"
|
||
aria-labelledby="home-tab">
|
||
<p>Raw denim you probably haven't heard of them jean shorts
|
||
Austin.
|
||
Nesciunt tofu stumptown aliqua, retro synth master cleanse.
|
||
Mustache
|
||
cliche tempor, williamsburg carles vegan helvetica.
|
||
Reprehenderit
|
||
butcher retro keffiyeh dreamcatcher
|
||
synth. Cosby sweater eu banh mi, qui irure terr.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane fade" id="tab_content2"
|
||
aria-labelledby="profile-tab">
|
||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
|
||
single-origin coffee squid. Exercitation +1 labore velit,
|
||
blog
|
||
sartorial PBR leggings next level wes anderson artisan four
|
||
loko
|
||
farm-to-table craft beer twee. Qui photo
|
||
booth letterpress, commodo enim craft beer mlkshk
|
||
aliquip</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane fade" id="tab_content3"
|
||
aria-labelledby="profile-tab">
|
||
<p>xxFood truck fixie locavore, accusamus mcsweeney's marfa
|
||
nulla
|
||
single-origin coffee squid. Exercitation +1 labore velit,
|
||
blog
|
||
sartorial PBR leggings next level wes anderson artisan four
|
||
loko
|
||
farm-to-table craft beer twee. Qui photo
|
||
booth letterpress, commodo enim craft beer mlkshk </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-bars"></i> Tabs
|
||
<small>Float right</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<div class="" role="tabpanel" data-example-id="togglable-tabs">
|
||
<ul id="myTab1" class="nav nav-tabs right justify-content-end"
|
||
role="tablist">
|
||
<li role="presentation" class="nav-item"><a href="#tab_content11"
|
||
class="active nav-link"
|
||
id="home-tabb"
|
||
role="tab"
|
||
data-toggle="tab"
|
||
aria-controls="home"
|
||
aria-expanded="true">Home</a>
|
||
</li>
|
||
<li role="presentation" class="nav-item"><a href="#tab_content22"
|
||
class="nav-link"
|
||
role="tab"
|
||
id="profile-tabb"
|
||
data-toggle="tab"
|
||
aria-controls="profile"
|
||
aria-expanded="false">Profile</a>
|
||
</li>
|
||
<li role="presentation" class="nav-item"><a href="#tab_content33"
|
||
class="nav-link"
|
||
role="tab"
|
||
id="profile-tabb3"
|
||
data-toggle="tab"
|
||
aria-controls="profile"
|
||
aria-expanded="false">Profile</a>
|
||
</li>
|
||
</ul>
|
||
<div id="myTabContent2" class="tab-content">
|
||
<div role="tabpanel" class="tab-pane fade active show in"
|
||
id="tab_content11"
|
||
aria-labelledby="home-tab">
|
||
<p>Raw denim you probably haven't heard of them jean shorts
|
||
Austin.
|
||
Nesciunt tofu stumptown aliqua, retro synth master cleanse.
|
||
Mustache
|
||
cliche tempor, williamsburg carles vegan helvetica.
|
||
Reprehenderit
|
||
butcher retro keffiyeh dreamcatcher
|
||
synth. Cosby sweater eu banh mi, qui irure terr.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane fade" id="tab_content22"
|
||
aria-labelledby="profile-tab">
|
||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
|
||
single-origin coffee squid. Exercitation +1 labore velit,
|
||
blog
|
||
sartorial PBR leggings next level wes anderson artisan four
|
||
loko
|
||
farm-to-table craft beer twee. Qui photo
|
||
booth letterpress, commodo enim craft beer mlkshk
|
||
aliquip</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane fade" id="tab_content33"
|
||
aria-labelledby="profile-tab">
|
||
<p>xxFood truck fixie locavore, accusamus mcsweeney's marfa
|
||
nulla
|
||
single-origin coffee squid. Exercitation +1 labore velit,
|
||
blog
|
||
sartorial PBR leggings next level wes anderson artisan four
|
||
loko
|
||
farm-to-table craft beer twee. Qui photo
|
||
booth letterpress, commodo enim craft beer mlkshk </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-bars"></i> Tabs
|
||
<small>Center</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<div class="" role="tabpanel" data-example-id="togglable-tabs">
|
||
<ul id="myTab2"
|
||
class="nav nav-tabs right justify-content-center"
|
||
role="tablist">
|
||
<li role="presentation" class="nav-item"><a href="#tab_content12"
|
||
class="nav-link active"
|
||
id="home-tabbb"
|
||
role="tab"
|
||
data-toggle="tab"
|
||
aria-controls="home"
|
||
aria-expanded="true">Home</a>
|
||
</li>
|
||
<li role="presentation" class="nav-item"><a href="#tab_content221"
|
||
class="nav-link"
|
||
role="tab"
|
||
id="profile-tabbb"
|
||
data-toggle="tab"
|
||
aria-controls="profile"
|
||
aria-expanded="false">Profile</a>
|
||
</li>
|
||
<li role="presentation" class="nav-item"><a href="#tab_content331"
|
||
class="nav-link"
|
||
role="tab"
|
||
id="profile-tabbb3"
|
||
data-toggle="tab"
|
||
aria-controls="profile"
|
||
aria-expanded="false">Profile</a>
|
||
</li>
|
||
</ul>
|
||
<div id="myTabContent3" class="tab-content">
|
||
<div role="tabpanel" class="tab-pane fade active show in"
|
||
id="tab_content12"
|
||
aria-labelledby="home-tab">
|
||
<p>Raw denim you probably haven't heard of them jean shorts
|
||
Austin.
|
||
Nesciunt tofu stumptown aliqua, retro synth master cleanse.
|
||
Mustache
|
||
cliche tempor, williamsburg carles vegan helvetica.
|
||
Reprehenderit
|
||
butcher retro keffiyeh dreamcatcher
|
||
synth. Cosby sweater eu banh mi, qui irure terr.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane fade" id="tab_content221"
|
||
aria-labelledby="profile-tab">
|
||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
|
||
single-origin coffee squid. Exercitation +1 labore velit,
|
||
blog
|
||
sartorial PBR leggings next level wes anderson artisan four
|
||
loko
|
||
farm-to-table craft beer twee. Qui photo
|
||
booth letterpress, commodo enim craft beer mlkshk
|
||
aliquip</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane fade" id="tab_content331"
|
||
aria-labelledby="profile-tab">
|
||
<p>xxFood truck fixie locavore, accusamus mcsweeney's marfa
|
||
nulla
|
||
single-origin coffee squid. Exercitation +1 labore velit,
|
||
blog
|
||
sartorial PBR leggings next level wes anderson artisan four
|
||
loko
|
||
farm-to-table craft beer twee. Qui photo
|
||
booth letterpress, commodo enim craft beer mlkshk </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-bars"></i> Vertical Tabs
|
||
<small>Float left</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox ">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
<div class="row">
|
||
<div class="col-md-3 col-sm-2 col-3">
|
||
<!-- required for floating -->
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs tabs-left flex-column" role="tablist">
|
||
<li class="nav-item"><a class="nav-link active" href="#home"
|
||
data-toggle="tab">Home</a>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="#profile"
|
||
data-toggle="tab">Profile</a>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="#messages"
|
||
data-toggle="tab">Messages</a>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="#settings"
|
||
data-toggle="tab">Settings</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-9 col-sm-10 col-9">
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home">
|
||
<p class="lead">Home tab</p>
|
||
<p>Raw denim you probably haven't heard of them jean shorts
|
||
Austin.
|
||
Nesciunt tofu stumptown aliqua, retro synth master
|
||
cleanse.
|
||
Mustache
|
||
cliche tempor, williamsburg carles vegan helvetica.
|
||
Reprehenderit
|
||
butcher retro keffiyeh dreamcatcher
|
||
synth. Cosby sweater eu banh mi, qui irure terr.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile">Profile Tab.</div>
|
||
<div class="tab-pane" id="messages">Messages Tab.</div>
|
||
<div class="tab-pane" id="settings">Settings Tab.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-bars"></i> Vertical Tabs
|
||
<small>Float right</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
<div class="row">
|
||
<div class="col-md-9 col-sm-9 col-9">
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home-r">
|
||
<p class="lead">Home tab</p>
|
||
<p>Raw denim you probably haven't heard of them jean shorts
|
||
Austin.
|
||
Nesciunt tofu stumptown aliqua, retro synth master
|
||
cleanse.
|
||
Mustache
|
||
cliche tempor, williamsburg carles vegan helvetica.
|
||
Reprehenderit
|
||
butcher retro keffiyeh dreamcatcher
|
||
synth. Cosby sweater eu banh mi, qui irure terr.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile-r">Profile Tab.</div>
|
||
<div class="tab-pane" id="messages-r">Messages Tab.</div>
|
||
<div class="tab-pane" id="settings-r">Settings Tab.</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-sm-3 col-3">
|
||
<!-- required for floating -->
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs flex-column tabs-right">
|
||
<li class="nav-item"><a class="active nav-link" href="#home-r"
|
||
data-toggle="tab">Home</a>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="#profile-r"
|
||
data-toggle="tab">Profile</a>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="#messages-r"
|
||
data-toggle="tab">Messages</a>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="#settings-r"
|
||
data-toggle="tab">Settings</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-align-left"></i> Collapsible / Accordion
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<!-- start accordion -->
|
||
<div class="accordion" id="accordion" role="tablist"
|
||
aria-multiselectable="true">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<a class="panel-heading" role="tab" id="headingOne"
|
||
data-toggle="collapse"
|
||
data-parent="#accordion" href="#collapseOne"
|
||
aria-expanded="true"
|
||
aria-controls="collapseOne">
|
||
<h4 class="card-title">Collapsible Group Items #1</h4>
|
||
</a>
|
||
<div id="collapseOne" class="panel-collapse collapse in"
|
||
role="tabpanel"
|
||
aria-labelledby="headingOne">
|
||
<div class="panel-body">
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">1</th>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">2</th>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<a class="panel-heading collapsed" role="tab" id="headingTwo"
|
||
data-toggle="collapse" data-parent="#accordion"
|
||
href="#collapseTwo"
|
||
aria-expanded="false" aria-controls="collapseTwo">
|
||
<h4 class="card-title">Collapsible Group Items #2</h4>
|
||
</a>
|
||
<div id="collapseTwo" class="panel-collapse collapse"
|
||
role="tabpanel"
|
||
aria-labelledby="headingTwo">
|
||
<div class="panel-body">
|
||
<p><strong>Collapsible Item 2 data</strong>
|
||
</p>
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high
|
||
life
|
||
accusamus
|
||
terry richardson ad squid. 3 wolf moon officia aute, non
|
||
cupidatat
|
||
skateboard dolor brunch. Food truck quinoa nesciunt
|
||
laborum
|
||
eiusmod.
|
||
Brunch 3 wolf moon tempor,
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<a class="panel-heading collapsed" role="tab" id="headingThree"
|
||
data-toggle="collapse" data-parent="#accordion"
|
||
href="#collapseThree"
|
||
aria-expanded="false" aria-controls="collapseThree">
|
||
<h4 class="card-title">Collapsible Group Items #3</h4>
|
||
</a>
|
||
<div id="collapseThree" class="panel-collapse collapse"
|
||
role="tabpanel"
|
||
aria-labelledby="headingThree">
|
||
<div class="panel-body">
|
||
<p><strong>Collapsible Item 3 data</strong>
|
||
</p>
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high
|
||
life
|
||
accusamus
|
||
terry richardson ad squid. 3 wolf moon officia aute, non
|
||
cupidatat
|
||
skateboard dolor brunch. Food truck quinoa nesciunt
|
||
laborum
|
||
eiusmod.
|
||
Brunch 3 wolf moon tempor
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end of accordion -->
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-align-left"></i> Collapsible / Accordion
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<!-- start accordion -->
|
||
<div class="accordion" id="accordion1" role="tablist"
|
||
aria-multiselectable="true">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<a class="card-title" role="tab" id="headingOne1"
|
||
data-toggle="collapse"
|
||
data-parent="#accordion1" href="#collapseOne1"
|
||
aria-expanded="true"
|
||
aria-controls="collapseOne">
|
||
<h4 class="card-title">Collapsible Group Item #1</h4>
|
||
</a>
|
||
<div id="collapseOne1" class="panel-collapse collapse in"
|
||
role="tabpanel"
|
||
aria-labelledby="headingOne">
|
||
<div class="panel-body">
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">1</th>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">2</th>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<a class="card-title collapsed" role="tab" id="headingTwo1"
|
||
data-toggle="collapse" data-parent="#accordion1"
|
||
href="#collapseTwo1"
|
||
aria-expanded="false" aria-controls="collapseTwo">
|
||
<h4 class="card-title">Collapsible Group Item #2</h4>
|
||
</a>
|
||
<div id="collapseTwo1" class="panel-collapse collapse"
|
||
role="tabpanel"
|
||
aria-labelledby="headingTwo">
|
||
<div class="panel-body">
|
||
<p><strong>Collapsible Item 2 data</strong>
|
||
</p>
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high
|
||
life
|
||
accusamus
|
||
terry richardson ad squid. 3 wolf moon officia aute, non
|
||
cupidatat
|
||
skateboard dolor brunch. Food truck quinoa nesciunt
|
||
laborum
|
||
eiusmod.
|
||
Brunch 3 wolf moon tempor,
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<a class="card-title collapsed" role="tab" id="headingThree1"
|
||
data-toggle="collapse" data-parent="#accordion1"
|
||
href="#collapseThree1"
|
||
aria-expanded="false" aria-controls="collapseThree">
|
||
<h4 class="card-title">Collapsible Group Item #3</h4>
|
||
</a>
|
||
<div id="collapseThree1" class="panel-collapse collapse"
|
||
role="tabpanel"
|
||
aria-labelledby="headingThree">
|
||
<div class="panel-body">
|
||
<p><strong>Collapsible Item 3 data</strong>
|
||
</p>
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high
|
||
life
|
||
accusamus
|
||
terry richardson ad squid. 3 wolf moon officia aute, non
|
||
cupidatat
|
||
skateboard dolor brunch. Food truck quinoa nesciunt
|
||
laborum
|
||
eiusmod.
|
||
Brunch 3 wolf moon tempor
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end of accordion -->
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>Tooltips
|
||
<small>Hover to view</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<p>Add small overlays of content for housing secondary information.</p>
|
||
<!-- start pop-over -->
|
||
<div class="bs-example-popovers">
|
||
<button type="button" class="btn btn-light" data-container="body"
|
||
data-toggle="popover" data-placement="left"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||
data-original-title="" title="">
|
||
Left
|
||
</button>
|
||
<button type="button" class="btn btn-light" data-container="body"
|
||
data-toggle="popover" data-placement="top"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||
data-original-title="" title="">
|
||
Top
|
||
</button>
|
||
<button type="button" class="btn btn-light" data-container="body"
|
||
data-toggle="popover" data-placement="bottom"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Bottom
|
||
</button>
|
||
<button type="button" class="btn btn-light" data-container="body"
|
||
data-toggle="popover" data-placement="right"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Right
|
||
</button>
|
||
</div>
|
||
<!-- end pop-over -->
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>Tooltips
|
||
<small>Hover to view</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<p>Hover over the links below to see tooltips:</p>
|
||
|
||
<button type="button" class="btn btn-light" data-toggle="tooltip"
|
||
data-placement="left" title="Tooltip left">Tooltip left
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-light" data-toggle="tooltip"
|
||
data-placement="top" title="Tooltip top">Tooltip top
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-light" data-toggle="tooltip"
|
||
data-placement="bottom" title="Tooltip bottom">Tooltip bottom
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-light" data-toggle="tooltip"
|
||
data-placement="right" title="Tooltip right">Tooltip right
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-light" data-toggle="tooltip"
|
||
data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||
Tooltip with HTML
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>Daily active users
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
<ul class="list-unstyled timeline">
|
||
<li>
|
||
<div class="block">
|
||
<div class="tags">
|
||
<a href="" class="tag">
|
||
<span>Entertainment</span>
|
||
</a>
|
||
</div>
|
||
<div class="block_content">
|
||
<h2 class="title">
|
||
<a>Who Needs Sundance When You’ve
|
||
Got Crowdfunding?</a>
|
||
</h2>
|
||
<div class="byline">
|
||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||
</div>
|
||
<p class="excerpt">Film festivals used to be do-or-die
|
||
moments
|
||
for movie
|
||
makers. They were where you met the producers that could
|
||
fund your
|
||
project, and if the buyers liked your flick, they’d pay
|
||
to
|
||
Fast-forward and… <a>Read More</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="block">
|
||
<div class="tags">
|
||
<a href="" class="tag">
|
||
<span>Entertainment</span>
|
||
</a>
|
||
</div>
|
||
<div class="block_content">
|
||
<h2 class="title">
|
||
<a>Who Needs Sundance When You’ve
|
||
Got Crowdfunding?</a>
|
||
</h2>
|
||
<div class="byline">
|
||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||
</div>
|
||
<p class="excerpt">Film festivals used to be do-or-die
|
||
moments
|
||
for movie
|
||
makers. They were where you met the producers that could
|
||
fund your
|
||
project, and if the buyers liked your flick, they’d pay
|
||
to
|
||
Fast-forward and… <a>Read More</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="block">
|
||
<div class="tags">
|
||
<a href="" class="tag">
|
||
<span>Entertainment</span>
|
||
</a>
|
||
</div>
|
||
<div class="block_content">
|
||
<h2 class="title">
|
||
<a>Who Needs Sundance When You’ve
|
||
Got Crowdfunding?</a>
|
||
</h2>
|
||
<div class="byline">
|
||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||
</div>
|
||
<p class="excerpt">Film festivals used to be do-or-die
|
||
moments
|
||
for movie
|
||
makers. They were where you met the producers that could
|
||
fund your
|
||
project, and if the buyers liked your flick, they’d pay
|
||
to
|
||
Fast-forward and… <a>Read More</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>Daily active users
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<div class="bs-example" data-example-id="simple-jumbotron">
|
||
<div class="jumbotron">
|
||
<h1>Hello, world!</h1>
|
||
<p>This is a simple hero unit, a simple jumbotron-style component
|
||
for
|
||
calling
|
||
extra attention to featured content or information.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-chevron-down"></i> Dropdowns
|
||
<small>Multiple dropdown designs</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<p>Gentelella provides you with several dropdown designs for your
|
||
choosing.</p>
|
||
<ul class="nav nav-pills" role="tablist">
|
||
<li role="presentation"><a href="#">Regular link</a>
|
||
</li>
|
||
<li role="presentation" class="dropdown">
|
||
<a id="drop4" href="#" class="dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" role="button" aria-expanded="false">
|
||
Dropdown
|
||
<span class="caret"></span>
|
||
</a>
|
||
<ul id="menu6" class="dropdown-menu animated fadeInDown"
|
||
role="menu">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Action</a>
|
||
</li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Another
|
||
action</a>
|
||
</li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Something
|
||
else
|
||
here</a>
|
||
</li>
|
||
<li role="presentation" class="divider"></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Separated
|
||
link</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li role="presentation" class="dropdown">
|
||
<a id="drop5" href="#" class="dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" role="button" aria-expanded="false">
|
||
Dropdown
|
||
<span class="caret"></span>
|
||
</a>
|
||
<ul id="menu2" class="dropdown-menu animated fadeInDown" role="menu"
|
||
aria-labelledby="drop5">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Action</a>
|
||
</li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Another
|
||
action</a>
|
||
</li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Something
|
||
else
|
||
here</a>
|
||
</li>
|
||
<li role="presentation" class="divider"></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Separated
|
||
link</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li role="presentation" class="dropdown">
|
||
<a id="drop6" href="#" class="dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" role="button" aria-expanded="false">
|
||
Dropdown
|
||
<span class="caret"></span>
|
||
</a>
|
||
<ul id="menu3" class="dropdown-menu animated fadeInDown" role="menu"
|
||
aria-labelledby="drop6">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Action</a>
|
||
</li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Another
|
||
action</a>
|
||
</li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Something
|
||
else
|
||
here</a>
|
||
</li>
|
||
<li role="presentation" class="divider"></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1"
|
||
href="https://twitter.com/fat">Separated
|
||
link</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-square-o"></i> Modals</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<!-- modals -->
|
||
<!-- Large modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal"
|
||
data-target=".bs-example-modal-lg">Large modal
|
||
</button>
|
||
|
||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||
<button type="button" class="close"
|
||
data-dismiss="modal"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h4>Text in a modal</h4>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl
|
||
consectetur et.
|
||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus
|
||
dolor
|
||
auctor.</p>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent
|
||
commodo
|
||
cursus magna, vel scelerisque nisl consectetur et. Donec
|
||
sed
|
||
odio
|
||
dui. Donec ullamcorper nulla non metus auctor
|
||
fringilla.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light"
|
||
data-dismiss="modal">
|
||
Close
|
||
</button>
|
||
<button type="button" class="btn btn-primary">Save changes
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Small modal -->
|
||
<button type="button" class="btn btn-primary" data-toggle="modal"
|
||
data-target=".bs-example-modal-sm">Small modal
|
||
</button>
|
||
|
||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="myModalLabel2">Modal title</h4>
|
||
<button type="button" class="close" data-dismiss="modal"
|
||
aria-label="Close"><span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h4>Text in a modal</h4>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl
|
||
consectetur et.
|
||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus
|
||
dolor
|
||
auctor.</p>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent
|
||
commodo
|
||
cursus magna, vel scelerisque nisl consectetur et. Donec
|
||
sed
|
||
odio
|
||
dui. Donec ullamcorper nulla non metus auctor
|
||
fringilla.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light"
|
||
data-dismiss="modal">
|
||
Close
|
||
</button>
|
||
<button type="button" class="btn btn-primary">Save changes
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /modals -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-bell"></i> Notifications
|
||
<small>Styled & Custom notifications</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<p>Regular notifications</p>
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Regular Success',
|
||
text: 'That thing that you were trying to do worked!',
|
||
type: 'success',
|
||
styling: 'bootstrap3'
|
||
});">Success
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'New Thing',
|
||
text: 'Just to let you know, something happened.',
|
||
type: 'info',
|
||
styling: 'bootstrap3'
|
||
});">Info
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Regular Notice',
|
||
text: 'Check me out! I\'m a notice.',
|
||
styling: 'bootstrap3'
|
||
});">Notice
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Oh No!',
|
||
text: 'Something terrible happened.',
|
||
type: 'error',
|
||
styling: 'bootstrap3'
|
||
});">Error
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Oh No!',
|
||
text: 'Something terrible happened.',
|
||
type: 'info',
|
||
styling: 'bootstrap3',
|
||
addclass: 'dark'
|
||
});">Dark
|
||
</button>
|
||
|
||
<hr/>
|
||
|
||
<p>Sticky notifications.. these wont close unless user closes them.</p>
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Sticky Success',
|
||
text: 'Sticky success... I\'m not even gonna make a joke.',
|
||
type: 'success',
|
||
hide: false,
|
||
styling: 'bootstrap3'
|
||
});">Success
|
||
</button>
|
||
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Sticky Info',
|
||
text: 'Sticky Info... I\'m not even gonna make a joke.',
|
||
type: 'info',
|
||
hide: false,
|
||
styling: 'bootstrap3'
|
||
});">Info
|
||
</button>
|
||
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Sticky Warning',
|
||
text: 'Sticky Warning... I\'m not even gonna make a joke.',
|
||
hide: false,
|
||
styling: 'bootstrap3'
|
||
});">Warning
|
||
</button>
|
||
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Sticky Danger',
|
||
text: 'Sticky Danger... I\'m not even gonna make a joke.',
|
||
type: 'error',
|
||
hide: false,
|
||
styling: 'bootstrap3'
|
||
});">Error
|
||
</button>
|
||
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Sticky Success',
|
||
text: 'Sticky success... I\'m not even gonna make a joke.',
|
||
type: 'info',
|
||
hide: false,
|
||
styling: 'bootstrap3',
|
||
addclass: 'dark'
|
||
});">Dark
|
||
</button>
|
||
|
||
<hr/>
|
||
|
||
<button class="btn btn-light source" onclick="new PNotify({
|
||
title: 'Non-Blocking Notice',
|
||
type: 'info',
|
||
text: 'When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.',
|
||
nonblock: {
|
||
nonblock: true
|
||
},
|
||
styling: 'bootstrap3',
|
||
addclass: 'dark'
|
||
});">Non-Blocking Notice
|
||
</button>
|
||
|
||
<hr/>
|
||
|
||
<div id="antoox">
|
||
<div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<button class="btn btn-light source" onclick="new TabbedNotification({
|
||
title: 'Tabbed Notificat',
|
||
text: 'Sticky success... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
|
||
type: 'success',
|
||
sound: false
|
||
})">Success
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new TabbedNotification({
|
||
title: 'Tabbed Notificat',
|
||
text: 'Custom Info... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.',
|
||
type: 'info',
|
||
sound: false
|
||
})">Info
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new TabbedNotification({
|
||
title: 'Tabbed Notificat',
|
||
text: 'Custom Warning... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
|
||
type: 'warning',
|
||
sound: false
|
||
})">Warning
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new TabbedNotification({
|
||
title: 'Custom Notification error',
|
||
text: 'Custom Error... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
|
||
type: 'error',
|
||
sound: false
|
||
})">Error
|
||
</button>
|
||
|
||
<button class="btn btn-light source" onclick="new TabbedNotification({
|
||
title: 'Tabbed notification dark',
|
||
text: 'Custom Dark... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
|
||
type: 'dark',
|
||
sound: false
|
||
})">Dark
|
||
</button>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>Pop Overs
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content bs-example-popovers">
|
||
|
||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert"
|
||
aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking
|
||
too
|
||
good.
|
||
</div>
|
||
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert"
|
||
aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking
|
||
too
|
||
good.
|
||
</div>
|
||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert"
|
||
aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking
|
||
too
|
||
good.
|
||
</div>
|
||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert"
|
||
aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking
|
||
too
|
||
good.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2><i class="fa fa-align-left"></i> Progress bar
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<p>Bootstrap progress bar with animated loading bar, add right to .progress
|
||
to
|
||
align
|
||
right</p>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="progress right">
|
||
<div class="progress-bar progress-bar-danger"
|
||
data-transitiongoal="25"></div>
|
||
</div>
|
||
<div class="progress right">
|
||
<div class="progress-bar progress-bar-warning"
|
||
data-transitiongoal="45"></div>
|
||
</div>
|
||
<div class="progress right">
|
||
<div class="progress-bar progress-bar-info"
|
||
data-transitiongoal="65"></div>
|
||
</div>
|
||
<div class="progress right">
|
||
<div class="progress-bar progress-bar-success"
|
||
data-transitiongoal="95"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-danger"
|
||
data-transitiongoal="25"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-warning"
|
||
data-transitiongoal="45"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-info"
|
||
data-transitiongoal="65"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-success"
|
||
data-transitiongoal="95"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-sm-12">
|
||
<ul class="verticle_bars list-inline row">
|
||
<li class="col-lg-3">
|
||
<div class="progress progress-striped vertical progress_wide bottom">
|
||
<div class="progress-bar progress-bar-danger"
|
||
role="progressbar"
|
||
data-transitiongoal="25"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress progress-striped vertical progress_wide bottom">
|
||
<div class="progress-bar progress-bar-warning"
|
||
role="progressbar"
|
||
data-transitiongoal="45"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical progress_wide bottom">
|
||
<div class="progress-bar progress-bar-info"
|
||
role="progressbar"
|
||
data-transitiongoal="65"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical progress_wide bottom">
|
||
<div class="progress-bar progress-bar-success"
|
||
role="progressbar"
|
||
data-transitiongoal="85"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-6 col-sm-12 fixed_height_200">
|
||
<ul class="verticle_bars list-inline row">
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical bottom">
|
||
<div class="progress-bar progress-bar-success"
|
||
role="progressbar"
|
||
data-transitiongoal="85"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical bottom">
|
||
<div class="progress-bar progress-bar-info"
|
||
role="progressbar"
|
||
data-transitiongoal="65"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical bottom">
|
||
<div class="progress-bar progress-bar-warning"
|
||
role="progressbar"
|
||
data-transitiongoal="45"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical bottom">
|
||
<div class="progress-bar progress-bar-danger"
|
||
role="progressbar"
|
||
data-transitiongoal="25"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 col-sm-12">
|
||
<ul class="verticle_bars list-inline row">
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical progress_wide">
|
||
<div class="progress-bar progress-bar-danger progress-bar-striped"
|
||
role="progressbar" data-transitiongoal="25"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical progress_wide">
|
||
<div class="progress-bar progress-bar-warning progress-bar-striped"
|
||
role="progressbar" data-transitiongoal="45"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical progress_wide">
|
||
<div class="progress-bar progress-bar-info"
|
||
role="progressbar"
|
||
data-transitiongoal="65"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical progress_wide">
|
||
<div class="progress-bar progress-bar-success"
|
||
role="progressbar"
|
||
data-transitiongoal="85"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-6 col-sm-12 fixed_height_200">
|
||
<ul class="verticle_bars list-inline row">
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical">
|
||
<div class="progress-bar progress-bar-success"
|
||
role="progressbar"
|
||
data-transitiongoal="85"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical">
|
||
<div class="progress-bar progress-bar-info"
|
||
role="progressbar"
|
||
data-transitiongoal="65"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical">
|
||
<div class="progress-bar progress-bar-warning"
|
||
role="progressbar"
|
||
data-transitiongoal="45"></div>
|
||
</div>
|
||
</li>
|
||
<li class="col-lg-3">
|
||
<div class="progress vertical">
|
||
<div class="progress-bar progress-bar-danger"
|
||
role="progressbar"
|
||
data-transitiongoal="25"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Start to do list -->
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>To Do List
|
||
<small>Sample tasks</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
|
||
<div class="">
|
||
<ul class="to_do">
|
||
<li>
|
||
<p>
|
||
<input type="checkbox" class="flat"> Schedule meeting with
|
||
new
|
||
client
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<input type="checkbox" class="flat"> Create email address
|
||
for
|
||
new intern
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<input type="checkbox" class="flat"> Have IT fix the network
|
||
printer</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<input type="checkbox" class="flat"> Copy backups to offsite
|
||
location
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<input type="checkbox" class="flat"> Food truck fixie
|
||
locavors
|
||
mcsweeney
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>
|
||
<input type="checkbox" class="flat"> Food truck fixie
|
||
locavors
|
||
mcsweeney
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End to do list -->
|
||
<div class="col-md-6 col-sm-6 col-12">
|
||
<div class="x_panel">
|
||
<div class="x_title">
|
||
<h2>Daily active users
|
||
<small>Sessions</small>
|
||
</h2>
|
||
<ul class="nav navbar-right panel_toolbox">
|
||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
|
||
role="button"
|
||
aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Settings 1</a>
|
||
</li>
|
||
<li><a href="#">Settings 2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="close-link"><i class="fa fa-close"></i></a>
|
||
</li>
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div class="x_content">
|
||
<ul class="list-unstyled msg_list">
|
||
<li>
|
||
<a>
|
||
<span class="image">
|
||
<img src="images/img.jpg" alt="img"/>
|
||
</span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="image">
|
||
<img src="images/img.jpg" alt="img"/>
|
||
</span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="image">
|
||
<img src="images/img.jpg" alt="img"/>
|
||
</span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="image">
|
||
<img src="images/img.jpg" alt="img"/>
|
||
</span>
|
||
<span>
|
||
<span>John Smith</span>
|
||
<span class="time">3 mins ago</span>
|
||
</span>
|
||
<span class="message">
|
||
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /page content -->
|
||
|
||
<!-- footer content -->
|
||
<footer class="col-lg-12">
|
||
<div class="pull-right">
|
||
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
|
||
</div>
|
||
<div class="clearfix"></div>
|
||
</footer>
|
||
<!-- /footer content -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="custom_notifications" class="custom-notifications dsp_none">
|
||
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
|
||
</ul>
|
||
<div class="clearfix"></div>
|
||
<div id="notif-group" class="tabbed_notifications"></div>
|
||
</div>
|
||
|
||
<!-- jQuery -->
|
||
<script src="../vendors/jquery/dist/jquery.min.js"></script>
|
||
<!-- Popper -->
|
||
<script src="../vendors/popper/popper.min.js"></script>
|
||
<!-- Bootstrap -->
|
||
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
|
||
<!-- FastClick -->
|
||
<script src="../vendors/fastclick/lib/fastclick.js"></script>
|
||
<!-- NProgress -->
|
||
<script src="../vendors/nprogress/nprogress.js"></script>
|
||
<!-- bootstrap-progressbar -->
|
||
<script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
|
||
<!-- iCheck -->
|
||
<script src="../vendors/iCheck/icheck.min.js"></script>
|
||
<!-- PNotify -->
|
||
<script src="../vendors/pnotify/dist/pnotify.js"></script>
|
||
<script src="../vendors/pnotify/dist/pnotify.buttons.js"></script>
|
||
<script src="../vendors/pnotify/dist/pnotify.nonblock.js"></script>
|
||
|
||
<!-- Custom Theme Scripts -->
|
||
<script src="../build/js/custom.min.js"></script>
|
||
|
||
</body>
|
||
</html> |