1134 lines
80 KiB
HTML
1134 lines
80 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Mirrored from technext.github.io/concept/pages/media-object.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:44 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">
|
|||
|
|
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
|
|||
|
|
<!-- 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">
|
|||
|
|
</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">
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- pageheader -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h2 class="pageheader-title">Media Objects</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">Pages</a></li>
|
|||
|
|
<li class="breadcrumb-item active" aria-current="page">Media Object</li>
|
|||
|
|
</ol>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end pageheader -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block">
|
|||
|
|
<h3 class="section-title">Bootstrap Media</h3>
|
|||
|
|
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/" target="_blank">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- basic media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Basic Example of Media</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="media">
|
|||
|
|
<img class="mr-3 user-avatar-lg rounded" src="../assets/images/avatar-1.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5>Media heading</h5>
|
|||
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end basic media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- nesting media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Nesting Media</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="media">
|
|||
|
|
<img class="mr-3 user-avatar-lg rounded" src="../assets/images/avatar-2.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|||
|
|
<div class="media mt-3">
|
|||
|
|
<a class="pr-3" href="#">
|
|||
|
|
<img class="mr-2 user-avatar-lg rounded" src="../assets/images/avatar-3.jpg" alt="Generic placeholder image" ></a>
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Top-aligned media</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="media">
|
|||
|
|
<img class="mr-3 user-avatar-lg rounded" src="../assets/images/avatar-4.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0">Top aligned media</h5>
|
|||
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|||
|
|
<p>Donec sed odio dm sociis natoque penat lorem ippum dolor sait maettempus viverra turpis. Fusce condimentum nuncac nisi dis parturient montes, nascetur ridiculus mus.</p>
|
|||
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solliciturus ondimentum nunc ac sit ametm nisi vulputate frinue felis in faucibus.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end nesting media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- center aligned media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Center-aligned media</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="media">
|
|||
|
|
<img class="align-self-center user-avatar-lg mr-3 rounded" src="../assets/images/avatar-5.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0">Center-aligned media</h5>
|
|||
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|||
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end center aligned media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- bootom aligne media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Bottom-aligned media</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="media">
|
|||
|
|
<img class="align-self-end mr-3 user-avatar-lg rounded" src="../assets/images/avatar-4.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0">Bottom-aligned media</h5>
|
|||
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|||
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end bootom aligne media -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- order -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Order</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="media">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0 mb-1">Media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|||
|
|
</div>
|
|||
|
|
<img class="mr-3 user-avatar-lg rounded" src="../assets/images/avatar-2.jpg" alt="Generic placeholder image">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end order -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- media list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<h5 class="card-header">Media List</h5>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<ul class="list-unstyled">
|
|||
|
|
<li class="media">
|
|||
|
|
<img class=" mr-3 user-avatar-lg rounded" src="../assets/images/avatar-3.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="media my-4">
|
|||
|
|
<img class=" mr-3 user-avatar-lg rounded" src="../assets/images/avatar-4.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="media">
|
|||
|
|
<img class=" mr-3 user-avatar-lg rounded" src="../assets/images/avatar-2.jpg" alt="Generic placeholder image">
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end media list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- media user -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block">
|
|||
|
|
<h3 class="section-title">Media User </h3>
|
|||
|
|
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/" target="_blank">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end media user -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- user avatar list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .card -->
|
|||
|
|
<div class="card card-fluid">
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h5 class="card-title mb-2"> User Avatar </h5>
|
|||
|
|
<a href="#" class="btn-account" role="button">
|
|||
|
|
<span class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="user-avatar-lg rounded-circle">
|
|||
|
|
</span>
|
|||
|
|
<div class="account-summary">
|
|||
|
|
<h5 class="account-name">John Abraham</h5>
|
|||
|
|
<span class="account-description">Administrator</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
<hr>
|
|||
|
|
<h5 class="card-title mb-2"> Sizing </h5>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg"> </div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-md"> </div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-sm"> </div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-xs"> </div>
|
|||
|
|
<hr>
|
|||
|
|
<h5 class="card-title mb-2">With badge </h5>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge online"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge idle"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge busy"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge offline"></span>
|
|||
|
|
</div>
|
|||
|
|
<hr>
|
|||
|
|
<h5 class="card-title mb-2"> Badge indicator </h5>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator online">
|
|||
|
|
<i class="fa fa-check"></i>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator idle">
|
|||
|
|
<i class="fa fa-minus"></i>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator busy">
|
|||
|
|
<i class="fa fa-times"></i>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator offline"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card -->
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end user avatar list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- grouping list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card card-fluid">
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h5 class="card-title mb-2"> Grouping </h5>
|
|||
|
|
<div class="avatar-group">
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg"> </div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg"> </div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg"> </div>
|
|||
|
|
<div class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg"> </div>
|
|||
|
|
</div>
|
|||
|
|
<hr>
|
|||
|
|
<h5 class="card-title mb-2"> Anchor </h5>
|
|||
|
|
<a href="#" class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge online"></span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge idle"></span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge busy"></span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="user-avatar">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge offline"></span>
|
|||
|
|
</a>
|
|||
|
|
<hr>
|
|||
|
|
<h5 class="card-title mb-2"> Anchor group </h5>
|
|||
|
|
<div class="avatar-group">
|
|||
|
|
<a href="#" class="user-avatar user-avatar-lg">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="user-avatar user-avatar-lg">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="user-avatar user-avatar-lg">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="user-avatar user-avatar-lg">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<hr>
|
|||
|
|
<h5 class="card-title mb-2"> Dropdowns </h5>
|
|||
|
|
<div class="user-avatar user-avatar-lg dropdown">
|
|||
|
|
<a href="#" data-toggle="dropdown">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator online">
|
|||
|
|
<i class="fa fa-check"></i>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" class="dropdown-item">Online</a>
|
|||
|
|
<a href="#" class="dropdown-item">Warning</a>
|
|||
|
|
<a href="#" class="dropdown-item">Busy</a>
|
|||
|
|
<a href="#" class="dropdown-item">Offline</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar user-avatar-lg dropdown">
|
|||
|
|
<a href="#" data-toggle="dropdown">
|
|||
|
|
<img src="../assets/images/avatar-2.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator idle">
|
|||
|
|
<i class="fa fa-minus"></i>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" class="dropdown-item">Online</a>
|
|||
|
|
<a href="#" class="dropdown-item">Warning</a>
|
|||
|
|
<a href="#" class="dropdown-item">Busy</a>
|
|||
|
|
<a href="#" class="dropdown-item">Offline</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar user-avatar-lg dropdown">
|
|||
|
|
<a href="#" data-toggle="dropdown">
|
|||
|
|
<img src="../assets/images/avatar-3.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator busy">
|
|||
|
|
<i class="fa fa-times"></i>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" class="dropdown-item">Online</a>
|
|||
|
|
<a href="#" class="dropdown-item">Warning</a>
|
|||
|
|
<a href="#" class="dropdown-item">Busy</a>
|
|||
|
|
<a href="#" class="dropdown-item">Offline</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-avatar user-avatar-lg dropdown">
|
|||
|
|
<a href="#" data-toggle="dropdown">
|
|||
|
|
<img src="../assets/images/avatar-4.jpg" alt="User Avatar" class="rounded-circle user-avatar-lg">
|
|||
|
|
<span class="avatar-badge has-indicator offline">
|
|||
|
|
<i class="fa fa-media-record"></i>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" class="dropdown-item">Online</a>
|
|||
|
|
<a href="#" class="dropdown-item">Warning</a>
|
|||
|
|
<a href="#" class="dropdown-item">Busy</a>
|
|||
|
|
<a href="#" class="dropdown-item">Offline</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end grouping list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- media user -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="section-block" id="badges">
|
|||
|
|
<h3 class="section-title">Media User </h3>
|
|||
|
|
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/" target="_blank">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</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-img-top">
|
|||
|
|
<img src="../assets/images/card-img-3.jpg" alt="" class=" img-fluid">
|
|||
|
|
</div>
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body pt-2">
|
|||
|
|
<!-- .media -->
|
|||
|
|
<div class="media mb-3">
|
|||
|
|
<!-- .user-avatar -->
|
|||
|
|
<a href="user-profile.html" class="user-avatar user-avatar-floated user-avatar-xl float-left mr-3">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-xl">
|
|||
|
|
</a>
|
|||
|
|
<!-- /.user-avatar -->
|
|||
|
|
<!-- .media-body -->
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h3 class="card-title mb-2 text-truncate">
|
|||
|
|
<a href="user-profile.html">John Abraham</a>
|
|||
|
|
</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted"> UI/UX Designer </h6>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.media-body -->
|
|||
|
|
<button class="btn btn-sm btn-secondary">
|
|||
|
|
<i class="fa fa-fw fa-plus"></i> Follow</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.media -->
|
|||
|
|
<!-- grid row -->
|
|||
|
|
<div class="row text-center">
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 54 </h6>
|
|||
|
|
<p class="metric-label"> Projects </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 53 </h6>
|
|||
|
|
<p class="metric-label"> Completed </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 2 </h6>
|
|||
|
|
<p class="metric-label"> On Going </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid row -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card card-fluid">
|
|||
|
|
<div class="card-img-top">
|
|||
|
|
<img src="../assets/images/card-img-3.jpg" alt="" class=" img-fluid">
|
|||
|
|
</div>
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body text-center">
|
|||
|
|
<!-- .user-avatar -->
|
|||
|
|
<a href="user-profile.html" class="user-avatar user-avatar-floated user-avatar-xl">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-xl">
|
|||
|
|
</a>
|
|||
|
|
<!-- /.user-avatar -->
|
|||
|
|
<h3 class="card-title mb-2">
|
|||
|
|
<a href="user-profile.html">John Abraham</a>
|
|||
|
|
</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted mb-3"> Copywriter </h6>
|
|||
|
|
<!-- grid row -->
|
|||
|
|
<div class="row">
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 54 </h6>
|
|||
|
|
<p class="metric-label"> Projects </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 53 </h6>
|
|||
|
|
<p class="metric-label"> Completed </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
<!-- grid column -->
|
|||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 2 </h6>
|
|||
|
|
<p class="metric-label"> On Going </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid column -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /grid row -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
|
|||
|
|
<div class="card card-fluid">
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body text-center">
|
|||
|
|
<!-- .user-avatar -->
|
|||
|
|
<a href="user-profile.html" class="user-avatar my-3">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-xl">
|
|||
|
|
</a>
|
|||
|
|
<!-- /.user-avatar -->
|
|||
|
|
<h3 class="card-title mb-2 text-truncate">
|
|||
|
|
<a href="user-profile.html">John Abraham </a>
|
|||
|
|
</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted mb-3"> Product Designer @CreativeDivision </h6>
|
|||
|
|
<!-- .skills -->
|
|||
|
|
<p class="skills">
|
|||
|
|
<a href="#" class="btn btn-xs btn-outline-secondary mt-1">react</a>
|
|||
|
|
<a href="#" class="btn btn-xs btn-outline-secondary mt-1">angular</a>
|
|||
|
|
<a href="#" class="btn btn-xs btn-outline-secondary mt-1">vue</a>
|
|||
|
|
<a href="#" class="btn btn-xs btn-outline-secondary mt-1">html5</a>
|
|||
|
|
<a href="#" class="btn btn-xs btn-outline-secondary mt-1">css3</a>
|
|||
|
|
<a href="#" class="btn btn-xs btn-warning circle mt-1">3+</a>
|
|||
|
|
</p>
|
|||
|
|
<!-- /.skills -->
|
|||
|
|
<p class="text-muted"> I make stunning and cool responsive web and app design which suitable for any project purpose for your business. </p>
|
|||
|
|
<p>
|
|||
|
|
<a href="#" class="btn btn-primary">View Profile
|
|||
|
|
<i class="fa fa-arrow-right ml-2"></i>
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end media user -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- media user list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card card-fluid">
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body text-center">
|
|||
|
|
<!-- .user-avatar -->
|
|||
|
|
<a href="user-profile.html" class="user-avatar user-avatar-xl my-3">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-xl">
|
|||
|
|
</a>
|
|||
|
|
<!-- /.user-avatar -->
|
|||
|
|
<h3 class="card-title mb-2 text-truncate">
|
|||
|
|
<a href="user-profile.html">Beni Arisandi</a>
|
|||
|
|
</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted mb-3"> Product Designer @CreativeDivision </h6>
|
|||
|
|
<p>
|
|||
|
|
<a href="#" class="btn btn-primary circle">View Profile
|
|||
|
|
<i class="fa fa-arrow-right ml-2"></i>
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
<!-- .card-footer -->
|
|||
|
|
<footer class="card-footer p-0">
|
|||
|
|
<!-- .card-footer-item -->
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 54 </h6>
|
|||
|
|
<p class="metric-label"> Projects </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- .card-footer-item -->
|
|||
|
|
<!-- /.card-footer-item -->
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 53 </h6>
|
|||
|
|
<p class="metric-label"> Completed </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- .card-footer-item -->
|
|||
|
|
<!-- /.card-footer-item -->
|
|||
|
|
<div class="card-footer-item card-footer-item-bordered">
|
|||
|
|
<!-- .metric -->
|
|||
|
|
<div class="metric">
|
|||
|
|
<h6 class="metric-value"> 2 </h6>
|
|||
|
|
<p class="metric-label"> On Going </p>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.metric -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-footer-item -->
|
|||
|
|
</footer>
|
|||
|
|
<!-- /.card-footer -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12">
|
|||
|
|
<div class="card card-fluid">
|
|||
|
|
<!-- .card-body -->
|
|||
|
|
<div class="card-body">
|
|||
|
|
<!-- .media -->
|
|||
|
|
<div class="media align-items-center">
|
|||
|
|
<!-- .user-avatar -->
|
|||
|
|
<a href="user-profile.html" class="user-avatar user-avatar-xl mr-3">
|
|||
|
|
<img src="../assets/images/avatar-1.jpg" alt="User Avatar" class="rounded-circle user-avatar-xl">
|
|||
|
|
</a>
|
|||
|
|
<!-- /.user-avatar -->
|
|||
|
|
<!-- .media-body -->
|
|||
|
|
<div class="media-body">
|
|||
|
|
<h3 class="card-title mb-2 text-truncate">
|
|||
|
|
<a href="user-profile.html">Beni Arisandi</a>
|
|||
|
|
</h3>
|
|||
|
|
<h6 class="card-subtitle text-muted"> UI/UX Designer </h6>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.media-body -->
|
|||
|
|
<button type="button" class="btn btn-primary">
|
|||
|
|
<i class="fa fa-fw fa-plus"></i> Follow</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.media -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.card-body -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- end media user list -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
|
|||
|
|
</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/media-object.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:45 GMT -->
|
|||
|
|
</html>
|