1456 lines
106 KiB
HTML
1456 lines
106 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Mirrored from technext.github.io/concept/pages/cards.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:28 GMT -->
|
|||
|
|
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
|
|||
|
|
<head>
|
|||
|
|
<!-- Required meta tags -->
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|||
|
|
<!-- Bootstrap CSS -->
|
|||
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
|
|||
|
|
<link href="../assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="../assets/libs/css/style.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css">
|
|||
|
|
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- main wrapper -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="dashboard-main-wrapper">
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- navbar -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="dashboard-header">
|
|||
|
|
<nav class="navbar navbar-expand-lg bg-white fixed-top">
|
|||
|
|
<a class="navbar-brand" href="../index.html">Concept</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
|||
|
|
<ul class="navbar-nav ml-auto navbar-right-top">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<div id="custom-search" class="top-search-bar">
|
|||
|
|
<input class="form-control" type="text" placeholder="Search..">
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown notification">
|
|||
|
|
<a class="nav-link nav-icons" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-fw fa-bell"></i> <span class="indicator"></span></a>
|
|||
|
|
<ul class="dropdown-menu dropdown-menu-right notification-dropdown">
|
|||
|
|
<li>
|
|||
|
|
<div class="notification-title"> Notification</div>
|
|||
|
|
<div class="notification-list">
|
|||
|
|
<div class="list-group">
|
|||
|
|
<a href="#" class="list-group-item list-group-item-action active">
|
|||
|
|
<div class="notification-info">
|
|||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-2.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Jeremy Rakestraw</span>accepted your invitation to join the team.
|
|||
|
|
<div class="notification-date">2 min ago</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|||
|
|
<div class="notification-info">
|
|||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-3.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">
|
|||
|
|
John Abraham</span>is now following you
|
|||
|
|
<div class="notification-date">2 days ago</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|||
|
|
<div class="notification-info">
|
|||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-4.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Monaan Pechi</span> is watching your main repository
|
|||
|
|
<div class="notification-date">2 min ago</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|||
|
|
<div class="notification-info">
|
|||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-5.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Jessica Caruso</span>accepted your invitation to join the team.
|
|||
|
|
<div class="notification-date">2 min ago</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<div class="list-footer"> <a href="#">View all notifications</a></div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown connection">
|
|||
|
|
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-th"></i> </a>
|
|||
|
|
<ul class="dropdown-menu dropdown-menu-right connection-dropdown">
|
|||
|
|
<li class="connection-list">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|||
|
|
<a href="#" class="connection-item"><img src="../assets/images/github.png" alt="" > <span>Github</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|||
|
|
<a href="#" class="connection-item"><img src="../assets/images/dribbble.png" alt="" > <span>Dribbble</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|||
|
|
<a href="#" class="connection-item"><img src="../assets/images/dropbox.png" alt="" > <span>Dropbox</span></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|||
|
|
<a href="#" class="connection-item"><img src="../assets/images/bitbucket.png" alt=""> <span>Bitbucket</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|||
|
|
<a href="#" class="connection-item"><img src="../assets/images/mail_chimp.png" alt="" ><span>Mail chimp</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|||
|
|
<a href="#" class="connection-item"><img src="../assets/images/slack.png" alt="" > <span>Slack</span></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<div class="conntection-footer"><a href="#">More</a></div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown nav-user">
|
|||
|
|
<a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/avatar-1.jpg" alt="" class="user-avatar-md rounded-circle"></a>
|
|||
|
|
<div class="dropdown-menu dropdown-menu-right nav-user-dropdown" aria-labelledby="navbarDropdownMenuLink2">
|
|||
|
|
<div class="nav-user-info">
|
|||
|
|
<h5 class="mb-0 text-white nav-user-name">
|
|||
|
|
John Abraham</h5>
|
|||
|
|
<span class="status"></span><span class="ml-2">Available</span>
|
|||
|
|
</div>
|
|||
|
|
<a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a>
|
|||
|
|
<a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a>
|
|||
|
|
<a class="dropdown-item" href="#"><i class="fas fa-power-off mr-2"></i>Logout</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end navbar -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- left sidebar -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="nav-left-sidebar sidebar-dark">
|
|||
|
|
<div class="menu-list">
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|||
|
|
<a class="d-xl-none d-lg-none" href="#">Dashboard</a>
|
|||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|||
|
|
<ul class="navbar-nav flex-column">
|
|||
|
|
<li class="nav-divider">
|
|||
|
|
Menu
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item ">
|
|||
|
|
<a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle"></i>Dashboard <span class="badge badge-success">6</span></a>
|
|||
|
|
<div id="submenu-1" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="index.html" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2">E-Commerce</a>
|
|||
|
|
<div id="submenu-1-2" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../index.html">E Commerce Dashboard</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../ecommerce-product.html">Product List</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../ecommerce-product-single.html">Product Single</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../ecommerce-product-checkout.html">Product Checkout</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../dashboard-finance.html">Finance</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../dashboard-sales.html">Sales</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-1" aria-controls="submenu-1-1">Infulencer</a>
|
|||
|
|
<div id="submenu-1-1" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../dashboard-influencer.html">Influencer</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../influencer-finder.html">Influencer Finder</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="../influencer-profile.html">Influencer Profile</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2"><i class="fa fa-fw fa-rocket"></i>UI Elements</a>
|
|||
|
|
<div id="submenu-2" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="cards.html">Cards <span class="badge badge-secondary">New</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="general.html">General</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="carousel.html">Carousel</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="listgroup.html">List Group</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="typography.html">Typography</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="accordions.html">Accordions</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="tabs.html">Tabs</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a>
|
|||
|
|
<div id="submenu-3" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="chart-c3.html">C3 Charts</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="chart-chartist.html">Chartist Charts</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="chart-charts.html">Chart</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="chart-morris.html">Morris</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="chart-sparkline.html">Sparkline</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="chart-gauge.html">Guage</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item ">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-4" aria-controls="submenu-4"><i class="fab fa-fw fa-wpforms"></i>Forms</a>
|
|||
|
|
<div id="submenu-4" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="form-elements.html">Form Elements</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="form-validation.html">Parsely Validations</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="multiselect.html">Multiselect</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-5" aria-controls="submenu-5"><i class="fas fa-fw fa-table"></i>Tables</a>
|
|||
|
|
<div id="submenu-5" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="general-table.html">General Tables</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="data-tables.html">Data Tables</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-divider">
|
|||
|
|
Features
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file"></i>Pages</a>
|
|||
|
|
<div id="submenu-6" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="invoice.html">Invoice</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="blank-page.html">Blank Page</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="blank-page-header.html">Blank Page Header</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="login.html">Login</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="404-page.html">404 page</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="sign-up.html">Sign up Page</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="forgot-password.html">Forgot Password</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="pricing.html">Pricing Tables</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="timeline.html">Timeline</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="calendar.html">Calendar</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="sortable-nestable-lists.html">Sortable/Nestable List</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="widgets.html">Widgets</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="media-object.html">Media Objects</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="cropper-image.html">Cropper</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="color-picker.html">Color Picker</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox"></i>Apps <span class="badge badge-secondary">New</span></a>
|
|||
|
|
<div id="submenu-7" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="inbox.html">Inbox</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="email-details.html">Email Detail</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="email-compose.html">Email Compose</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="message-chat.html">Message Chat</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-columns"></i>Icons</a>
|
|||
|
|
<div id="submenu-8" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="icon-fontawesome.html">FontAwesome Icons</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="icon-material.html">Material Icons</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="icon-simple-lineicon.html">Simpleline Icon</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="icon-themify.html">Themify Icon</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="icon-flag.html">Flag Icons</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="icon-weather.html">Weather Icon</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-9" aria-controls="submenu-9"><i class="fas fa-fw fa-map-marker-alt"></i>Maps</a>
|
|||
|
|
<div id="submenu-9" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="map-google.html">Google Maps</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="map-vector.html">Vector Maps</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-10" aria-controls="submenu-10"><i class="fas fa-f fa-folder"></i>Menu Level</a>
|
|||
|
|
<div id="submenu-10" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#">Level 1</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-11" aria-controls="submenu-11">Level 2</a>
|
|||
|
|
<div id="submenu-11" class="collapse submenu" style="">
|
|||
|
|
<ul class="nav flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#">Level 1</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#">Level 2</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#">Level 3</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end left sidebar -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- wrapper -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="dashboard-wrapper">
|
|||
|
|
<div class="container-fluid dashboard-content">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-10">
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- pageheader -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="page-header" id="top">
|
|||
|
|
<h2 class="pageheader-title">Cards </h2>
|
|||
|
|
<p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
|
|||
|
|
<div class="page-breadcrumb">
|
|||
|
|
<nav aria-label="breadcrumb">
|
|||
|
|
<ol class="breadcrumb">
|
|||
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
|
|||
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">UI Elements</a></li>
|
|||
|
|
<li class="breadcrumb-item active" aria-current="page">Cards</li>
|
|||
|
|
</ol>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end pageheader -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- overview -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="page-section" id="overview">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<h2>Overview</h2>
|
|||
|
|
<p class="lead">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
|
|||
|
|
<ul class="list-unstyled arrow">
|
|||
|
|
<li>Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</li>
|
|||
|
|
<li>Additional card with action button like dropdown on right side.</li>
|
|||
|
|
<li>Card with tabs.</li>
|
|||
|
|
<li>Card with buttons on top header. </li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end overview -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- simple cards -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="cards">
|
|||
|
|
<h3 class="section-title">Cards</h3>
|
|||
|
|
<p>Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
|||
|
|
<p class="card-text">Lorem ipsum dolor sit amet loreim nsectetur adipiscing elit. Fusce vel elementum eros. </p>
|
|||
|
|
<a href="#" class="card-link">Card link</a>
|
|||
|
|
<a href="#" class="card-link">Another link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title border-bottom pb-2">Card title - Bottom Line</h3>
|
|||
|
|
<p class="card-text">Vestibulumin augue posuere congue.</p>
|
|||
|
|
<p class="card-text">Peneit amet, porta semper nisi. Simple card title bottom line</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<h3>Card Small Descriptions</h3>
|
|||
|
|
<p>The generated Lorem Ipsum is therefore always free from repetition</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end simple cards -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- image cards -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="image-card">
|
|||
|
|
<h3 class="section-title">Card Images</h3>
|
|||
|
|
<p>Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="card-img-top img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">Vestibuluimis in faucibus orci luctus et ultrices posuere cubilia Curis ipsum in augue posuere congue.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="card-img-top img-fluid p-2" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">Faucibus orci luctus et ultrices lorem posuere cubilia Cuquis ipsum in augue posuere congue.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<h3 class="card-title mb-2">Card title</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted">Lorem ipusm dolro sit amet</h6>
|
|||
|
|
</div>
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.</p>
|
|||
|
|
<a href="#" class="card-link">Card link</a>
|
|||
|
|
<a href="#" class="card-link">Another link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted mb-3">Lorem ipusm dolro sit amet</h6>
|
|||
|
|
<img class="img-fluid mb-4" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<p class="card-text">Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum.</p>
|
|||
|
|
<a href="#" class="card-link">Card link</a>
|
|||
|
|
<a href="#" class="card-link">Another link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">Faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.</p>
|
|||
|
|
<p class="text-muted">Last updated 3 mins ago</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis ipsum in augue posuere congue.</p>
|
|||
|
|
<p class="text-muted">Last updated 3 mins ago</p>
|
|||
|
|
</div>
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card text-white">
|
|||
|
|
<img class="card-img" src="../assets/images/card-img.jpg" alt="Card image">
|
|||
|
|
<div class="card-img-overlay">
|
|||
|
|
<h3 class="card-title text-white">Card title</h3>
|
|||
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|||
|
|
<p class="card-text">Last updated 3 mins ago</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end image cards -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- card header footer -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="headerfooter">
|
|||
|
|
<h3 class="section-title">Card Header and footer</h3>
|
|||
|
|
<p>Add an optional header and/or footer within a card.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
Card Header
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ppsum in augue posuere congue.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer d-flex text-muted">
|
|||
|
|
Card Footer
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
Card Header
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer d-flex text-muted">
|
|||
|
|
Card Footer
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
Quote
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<blockquote class="blockquote mb-0">
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|||
|
|
<footer class="blockquote-footer">Someone famous in
|
|||
|
|
<cite title="Source Title">Source Title</cite>
|
|||
|
|
</footer>
|
|||
|
|
</blockquote>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="cardaction">
|
|||
|
|
<h3 class="section-title">Card Actions</h3>
|
|||
|
|
<p>Add an optional header and/or footer within a card and also add action.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header d-flex">
|
|||
|
|
<h4 class="mb-0">Card Header</h4>
|
|||
|
|
<div class="dropdown ml-auto">
|
|||
|
|
<a class="toolbar" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fab fa-mixcloud"></i> </a>
|
|||
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink5">
|
|||
|
|
<a class="dropdown-item" href="#">Action</a>
|
|||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header d-flex">
|
|||
|
|
<h4 class="mb-0">Card Header</h4>
|
|||
|
|
<div class="dropdown ml-auto">
|
|||
|
|
<a class="toolbar" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a>
|
|||
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
|
|||
|
|
<a class="dropdown-item" href="#">Action</a>
|
|||
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|||
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header d-flex">
|
|||
|
|
<h4 class="card-header-title">Card Header</h4>
|
|||
|
|
<select class="custom-select ml-auto w-auto">
|
|||
|
|
<option selected>Select</option>
|
|||
|
|
<option value="1">One</option>
|
|||
|
|
<option value="2">Two</option>
|
|||
|
|
<option value="3">Three</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header d-flex">
|
|||
|
|
<h4 class="card-header-title">Card Header</h4>
|
|||
|
|
<div class="toolbar ml-auto">
|
|||
|
|
<a href="#" class="btn btn-primary btn-sm ">CSV</a>
|
|||
|
|
<a href="#" class="btn btn-light btn-sm">PDF</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-126 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header d-flex">
|
|||
|
|
<h4 class="card-header-title ">Card Header</h4>
|
|||
|
|
<div class="toolbar card-toolbar-tabs ml-auto">
|
|||
|
|
<ul class="nav nav-pills" id="pills-tab" role="tablist">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="tab-content mb-3" id="pills-tabContent">
|
|||
|
|
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Some quick example text to build on the card title and make up the bulk of the card's content.</div>
|
|||
|
|
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Some quick example text to build on the card title and make up the bulk of the card's content.</div>
|
|||
|
|
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Some quick example text to build on the card title and make up the bulk of the card's content.</div>
|
|||
|
|
</div>
|
|||
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end card header footer -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- card footer link -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="cardfooterlink">
|
|||
|
|
<h3 class="section-title">Card Footer Link<span class="badge badge-secondary ml-3">New</span></h3>
|
|||
|
|
<p>Add an optional header and/or footer within a card.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
Card Header
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Vestibulum ante ipsum orci luctus et ultrices posuere cger quis ipsum in augue posuere congue.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer p-0 text-center">
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Card Link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
Card Header
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer p-0 text-center d-flex justify-content-center">
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Card Link</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Another Link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
Card Header
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<p class="card-text">Quisque faucibus, massa non consectetur lacininulla varius nisl, quis ornare diam nulla quis odio.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer p-0 text-center d-flex justify-content-center ">
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Save</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Edit</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Delete</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end card footer link -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- card navigaion -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="c-nav">
|
|||
|
|
<h3 class="section-title">Card Navigation</h3>
|
|||
|
|
<p>Add some navigation to a card’s header (or block) with Bootstrap’s nav components.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header tab-regular">
|
|||
|
|
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link active" id="card-tab-1" data-toggle="tab" href="#card-1" role="tab" aria-controls="card-1" aria-selected="true">Card Tab 1</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" id="card-tab-2" data-toggle="tab" href="#card-2" role="tab" aria-controls="card-2" aria-selected="false">Card Tab 2</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" id="card-tab-3" data-toggle="tab" href="#card-3" role="tab" aria-controls="card-3" aria-selected="false">Card Tab 3</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="tab-content" id="myTabContent">
|
|||
|
|
<div class="tab-pane fade show active" id="card-1" role="tabpanel" aria-labelledby="card-tab-1">
|
|||
|
|
<p>Etiam odio eraturabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapieestas sit amet risus eu, interdum sodales metus. </p>
|
|||
|
|
<p>
|
|||
|
|
Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tinci consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur titor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="card-2" role="tabpanel" aria-labelledby="card-tab-2">
|
|||
|
|
<p>Donec vitae tellus sapieniam odio erat egestas sit amet risus euCurabitur scelerisque leo at lectus mollisac dictum lectus fermentuminterdum sodales metus. </p>
|
|||
|
|
<p>
|
|||
|
|
Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="card-3" role="tabpanel" aria-labelledby="card-tab-3">
|
|||
|
|
<p>Curabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapien. Etiam odio erat, egestas sit amet risus eu, interdum sodales metus. </p>
|
|||
|
|
<p>
|
|||
|
|
Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim. </p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header pills-regular">
|
|||
|
|
<ul class="nav nav-pills card-header-pills" id="myTab2" role="tablist">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link active" id="card-pills-1" data-toggle="tab" href="#card-pill-1" role="tab" aria-controls="card-1" aria-selected="true">Card Tab 1</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" id="card-pills-2" data-toggle="tab" href="#card-pill-2" role="tab" aria-controls="card-2" aria-selected="false">Card Tab 2</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" id="card-pills-3" data-toggle="tab" href="#card-pill-3" role="tab" aria-controls="card-3" aria-selected="false">Card Tab 3</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="tab-content" id="myTabContent2">
|
|||
|
|
<div class="tab-pane fade show active" id="card-pill-1" role="tabpanel" aria-labelledby="card-tab-1">
|
|||
|
|
<p>Curabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapien. Etiam odio erat, egestas sit amet risus eu, interdum sodales metus. </p>
|
|||
|
|
<p>
|
|||
|
|
Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="card-pill-2" role="tabpanel" aria-labelledby="card-tab-2">
|
|||
|
|
<p>Etiam libero metus, dapibus vel sollicitudin vel, cursus sit amet urna. Nam imperdiet sem et purus varius aliquam. </p>
|
|||
|
|
<p>
|
|||
|
|
Proin pulvinar diam tempor auctor egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane fade" id="card-pill-3" role="tabpanel" aria-labelledby="card-tab-3">
|
|||
|
|
<p>Donec vitae tellus sapietiam odio erat, egestas sit amet risus euabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. interdum sodales metus. </p>
|
|||
|
|
<p>
|
|||
|
|
Cras risus nisi, sollicitudin eget dui eu porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim. </p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end card navigaion -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- card masonary -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="masonary">
|
|||
|
|
<h3 class="section-title">Card Masonary</h3>
|
|||
|
|
<p>Cards can be organized into Masonry-like columns with just CSS by wrapping them in card-columns.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card-columns">
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="card-img-top" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title that wraps to a new line</h3>
|
|||
|
|
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card p-3">
|
|||
|
|
<blockquote class="blockquote mb-0 card-body">
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|||
|
|
<footer class="blockquote-footer">
|
|||
|
|
<small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small>
|
|||
|
|
</footer>
|
|||
|
|
</blockquote>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="card-img-top" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
|||
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card bg-primary text-white text-center p-3">
|
|||
|
|
<blockquote class="blockquote mb-0">
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
|||
|
|
<footer class="blockquote-footer text-white">
|
|||
|
|
<small> Someone famous in <cite title="Source Title">Source Title</cite> </small>
|
|||
|
|
</footer>
|
|||
|
|
</blockquote>
|
|||
|
|
</div>
|
|||
|
|
<div class="card text-center">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
|||
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="card-img" src="../assets/images/card-img.jpg" alt="Card image">
|
|||
|
|
</div>
|
|||
|
|
<div class="card p-3 text-right">
|
|||
|
|
<blockquote class="blockquote mb-0">
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|||
|
|
<footer class="blockquote-footer">
|
|||
|
|
<small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small>
|
|||
|
|
</footer>
|
|||
|
|
</blockquote>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
|||
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end card masonary -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- card list group -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="card-list">
|
|||
|
|
<h3 class="section-title">Card List Groups</h3>
|
|||
|
|
<p>Create lists of content in a card with a flush list group.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Kitchen Sink</h3>
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="list-group list-group-flush">
|
|||
|
|
<li class="list-group-item">Cras justo odio</li>
|
|||
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|||
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<a href="#" class="card-link">Card link</a>
|
|||
|
|
<a href="#" class="card-link">Another link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Kitchen Sink</h3>
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="list-group list-group-flush">
|
|||
|
|
<li class="list-group-item">Cras justo odio</li>
|
|||
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|||
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<a href="#" class="card-link">Card link</a>
|
|||
|
|
<a href="#" class="card-link">Another link</a>
|
|||
|
|
</div>
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-12 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h3 class="card-title">Card title</h3>
|
|||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="list-group list-group-flush">
|
|||
|
|
<li class="list-group-item">Cras justo odio</li>
|
|||
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|||
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|||
|
|
<li class="list-group-item">Cras justo odio</li>
|
|||
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|||
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|||
|
|
<li class="list-group-item">Cras justo odio</li>
|
|||
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|||
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="card-footer p-0 text-center d-flex justify-content-center">
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Card link</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<a href="#" class="card-link">Another link</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end card list group -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- card varience -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="card-variance">
|
|||
|
|
<h3 class="section-title"> Card Variance </h3>
|
|||
|
|
<p> Easily display grids of images, videos, text, and more. </p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<!-- .figure-caption -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<h6 class="figure-title"> Simple figure </h6>
|
|||
|
|
<p class="text-muted mb-0"> Give some text description </p>
|
|||
|
|
</figcaption>
|
|||
|
|
<!-- /.figure-caption -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure has-hoverable">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<!-- .figure-caption -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<h6 class="figure-title"> Hoverable figure </h6>
|
|||
|
|
<p class="text-muted mb-0"> Give some text description </p>
|
|||
|
|
</figcaption>
|
|||
|
|
<!-- /.figure-caption -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<!-- .figure-caption -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<h6 class="figure-title"><a href="#">Clickable title</a> </h6>
|
|||
|
|
<p class="text-muted mb-0"> Hit the title to view details </p>
|
|||
|
|
</figcaption>
|
|||
|
|
<!-- /.figure-caption -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-img">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<a href="#" class="img-link">
|
|||
|
|
<div class="tile tile-circle ">
|
|||
|
|
<span><i class="fas fa-circle text-primary fa-2x"></i></span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
<!-- .figure-caption -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<h6 class="figure-title"><a href="#">Zoom action</a></h6>
|
|||
|
|
<p class="text-muted mb-0"> Give some text description </p>
|
|||
|
|
</figcaption>
|
|||
|
|
<!-- /.figure-caption -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-img">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="figure-action">
|
|||
|
|
<a href="#" class="btn btn-block btn-sm btn-primary">Quick Action</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
<!-- .figure-caption -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<h6 class="figure-title"><a href="#">Call action</a> </h6>
|
|||
|
|
<p class="text-muted mb-0"> Give some text description </p>
|
|||
|
|
</figcaption>
|
|||
|
|
<!-- /.figure-caption -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-img">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="figure-tools">
|
|||
|
|
<a href="#" class="tile tile-circle tile-sm mr-auto">
|
|||
|
|
<span class="oi-data-transfer-download"></span></a>
|
|||
|
|
<span class="badge badge-danger">Illustration</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="figure-action">
|
|||
|
|
<a href="#" class="btn btn-block btn-sm btn-primary">Quick Action</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
<!-- .figure-caption -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<h6 class="figure-title"><a href="#">Figure tools</a></h6>
|
|||
|
|
<p class="text-muted mb-0"> Give some text description </p>
|
|||
|
|
</figcaption>
|
|||
|
|
<!-- /.figure-caption -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-img">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="figure-description">
|
|||
|
|
<h6 class="figure-title"> Figure description </h6>
|
|||
|
|
<p class="text-muted mb-0">
|
|||
|
|
<small>Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.</small>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="figure-tools">
|
|||
|
|
<a href="#" class="tile tile-circle tile-sm mr-auto"><span class="oi oi-data-transfer-download"></span></a>
|
|||
|
|
<span class="badge badge-warning">Gadget</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="figure-action">
|
|||
|
|
<a href="#" class="btn btn-block btn-sm btn-primary">Quick Action</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<ul class="list-inline d-flex text-muted mb-0">
|
|||
|
|
<li class="list-inline-item mr-auto">
|
|||
|
|
<span class="oi oi-paperclip"></span> 2MB </li>
|
|||
|
|
<li class="list-inline-item">
|
|||
|
|
<span class="oi oi-calendar"></span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-img">
|
|||
|
|
<img class="img-fluid" src="../assets/images/card-img.jpg" alt="Card image cap">
|
|||
|
|
<div class="figure-description">
|
|||
|
|
<h6 class="figure-title"> Long title text can be place here </h6>
|
|||
|
|
<p class="text-muted mb-0">
|
|||
|
|
<small>Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.</small>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="figure-tools">
|
|||
|
|
<a href="#" class="tile tile-circle tile-sm mr-auto"> </a>
|
|||
|
|
<span class="badge badge-danger">Social</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="figure-action">
|
|||
|
|
<a href="#" class="btn btn-block btn-sm btn-primary">Quick Action</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-attachment">
|
|||
|
|
<span class="fa-stack fa-lg">
|
|||
|
|
<i class="fa fa-square fa-stack-2x text-primary"></i>
|
|||
|
|
<i class="fa fa-file-pdf fa-stack-1x fa-inverse"></i>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<ul class="list-inline d-flex text-muted mb-0">
|
|||
|
|
<li class="list-inline-item text-truncate mr-auto">
|
|||
|
|
<span><i class="fas fa-file-pdf"></i></span> Attachment.pdf </li>
|
|||
|
|
<li class="list-inline-item">
|
|||
|
|
<a download href="../assets/images/card-img-1.jpg">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<i class="fas fa-download "></i></a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-figure">
|
|||
|
|
<!-- .card-figure -->
|
|||
|
|
<figure class="figure">
|
|||
|
|
<!-- .figure-img -->
|
|||
|
|
<div class="figure-attachment">
|
|||
|
|
<img src="../assets/images/card-img.jpg" alt="Card image cap" class="img-fluid"> </div>
|
|||
|
|
<!-- /.figure-img -->
|
|||
|
|
<figcaption class="figure-caption">
|
|||
|
|
<ul class="list-inline d-flex text-muted mb-0">
|
|||
|
|
<li class="list-inline-item text-truncate mr-auto">Image attachment </li>
|
|||
|
|
<li class="list-inline-item">
|
|||
|
|
<a href="../assets/images/card-img-1.jpg" download> <span><i class="fas fa-download "></i></span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="list-inline-item">
|
|||
|
|
<a href="#" class="btn btn-reset text-muted" title="More actions">
|
|||
|
|
<span class="fas fa-caret-down"></span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<!-- /.card-figure -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end card varience -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- sidebar nav fixed -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="sidebar-nav-fixed">
|
|||
|
|
<ul class="list-unstyled">
|
|||
|
|
<li><a href="#overview" class="active">Overview</a></li>
|
|||
|
|
<li><a href="#cards">Cards</a></li>
|
|||
|
|
<li><a href="#image-card">Card Images</a></li>
|
|||
|
|
<li><a href="#headerfooter">Header & Footer</a></li>
|
|||
|
|
<li><a href="#cardaction">Card Action<span class="badge badge-secondary ml-1">Fresh</span></a></li>
|
|||
|
|
<li><a href="#cardfooterlink">Card With Footer Link <span class="badge badge-secondary ml-1">New</span></a></li>
|
|||
|
|
<li><a href="#c-nav">Card Navigation</a></li>
|
|||
|
|
<li><a href="#masonary">Card Masonary</a></li>
|
|||
|
|
<li><a href="#card-list">Card List Group</a></li>
|
|||
|
|
<li><a href="#card-variance">Card Variance</a></li>
|
|||
|
|
<li><a href="#top">Back to Top</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end sidebar nav fixed -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- footer -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="footer">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
Copyright © 2018 Concept. All rights reserved. Dashboard by <a href="https://colorlib.com/wp/">Colorlib</a>.
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="text-md-right footer-links d-none d-sm-block">
|
|||
|
|
<a href="javascript: void(0);">About</a>
|
|||
|
|
<a href="javascript: void(0);">Support</a>
|
|||
|
|
<a href="javascript: void(0);">Contact Us</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end footer -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end main wrapper -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- Optional JavaScript -->
|
|||
|
|
<script src="../assets/vendor/jquery/jquery-3.3.1.min.js"></script>
|
|||
|
|
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
|
|||
|
|
<script src="../assets/vendor/slimscroll/jquery.slimscroll.js"></script>
|
|||
|
|
<script src='../assets/libs/js/main-js.js'></script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Mirrored from technext.github.io/concept/pages/cards.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:29 GMT -->
|
|||
|
|
</html>
|