File: //proc/thread-self/cwd/school/html/ui-scrollspy.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- Custom CSS -->
<link href="../dist/css/style.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" data-navbarbg="skin6">
<nav class="navbar top-navbar navbar-expand-md">
<div class="navbar-header" data-logobg="skin6">
<!-- This is for the sidebar toggle which is visible on mobile only -->
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-brand">
<!-- Logo icon -->
<a href="index.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text -->
<span class="logo-text">
<!-- dark Logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Toggle which is visible on mobile only -->
<!-- ============================================================== -->
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
class="ti-more"></i></a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle pl-md-3 position-relative" href="javascript:void(0)"
id="bell" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span><i data-feather="bell" class="svg-icon"></i></span>
<span class="badge badge-primary notify-no rounded-circle">5</span>
</a>
<div class="dropdown-menu dropdown-menu-left mailbox animated bounceInDown">
<ul class="list-style-none">
<li>
<div class="message-center notifications position-relative">
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<div class="btn btn-danger rounded-circle btn-circle"><i
data-feather="airplay" class="text-white"></i></div>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Luanch Admin</h6>
<span class="font-12 text-nowrap d-block text-muted">Just see
the my new
admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:30 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-success text-white rounded-circle btn-circle"><i
data-feather="calendar" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Event today</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">Just
a reminder that you have event</span>
<span class="font-12 text-nowrap d-block text-muted">9:10 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-info rounded-circle btn-circle"><i
data-feather="settings" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Settings</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">You
can customize this template
as you want</span>
<span class="font-12 text-nowrap d-block text-muted">9:08 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-primary rounded-circle btn-circle"><i
data-feather="box" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Pavan kumar</h6> <span
class="font-12 text-nowrap d-block text-muted">Just
see the my admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:02 AM</span>
</div>
</a>
</div>
</li>
<li>
<a class="nav-link pt-3 text-center text-dark" href="javascript:void(0);">
<strong>Check all notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
</div>
</li>
<!-- End Notification -->
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="settings" class="svg-icon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<div class="customize-input">
<select
class="custom-select form-control bg-white custom-radius custom-shadow border-0">
<option selected>EN</option>
<option value="1">AB</option>
<option value="2">AK</option>
<option value="3">BE</option>
</select>
</div>
</a>
</li>
</ul>
<!-- ============================================================== -->
<!-- Right side toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-right">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<form>
<div class="customize-input">
<input class="form-control custom-shadow custom-radius border-0 bg-white"
type="search" placeholder="Search" aria-label="Search">
<i class="form-control-icon" data-feather="search"></i>
</div>
</form>
</a>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="../assets/images/users/profile-pic.jpg" alt="user" class="rounded-circle"
width="40">
<span class="ml-2 d-none d-lg-inline-block"><span>Hello,</span> <span
class="text-dark">Jason Doe</span> <i data-feather="chevron-down"
class="svg-icon"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="user"
class="svg-icon mr-2 ml-1"></i>
My Profile</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="credit-card"
class="svg-icon mr-2 ml-1"></i>
My Balance</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="mail"
class="svg-icon mr-2 ml-1"></i>
Inbox</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="settings"
class="svg-icon mr-2 ml-1"></i>
Account Setting</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="power"
class="svg-icon mr-2 ml-1"></i>
Logout</a>
<div class="dropdown-divider"></div>
<div class="pl-4 p-3"><a href="javascript:void(0)" class="btn btn-sm btn-info">View
Profile</a></div>
</div>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar" data-sidebarbg="skin6">
<!-- Sidebar scroll-->
<div class="scroll-sidebar" data-sidebarbg="skin6">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index.html"
aria-expanded="false"><i data-feather="home" class="feather-icon"></i><span
class="hide-menu">Dashboard</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Applications</span></li>
<li class="sidebar-item"> <a class="sidebar-link" href="ticket-list.html"
aria-expanded="false"><i data-feather="tag" class="feather-icon"></i><span
class="hide-menu">Ticket List
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-chat.html"
aria-expanded="false"><i data-feather="message-square" class="feather-icon"></i><span
class="hide-menu">Chat</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-calendar.html"
aria-expanded="false"><i data-feather="calendar" class="feather-icon"></i><span
class="hide-menu">Calendar</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Components</span></li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="file-text" class="feather-icon"></i><span
class="hide-menu">Forms </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><span
class="hide-menu"> Form Inputs
</span></a>
</li>
<li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><span
class="hide-menu"> Form Grids
</span></a>
</li>
<li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><span
class="hide-menu"> Checkboxes &
Radios
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
class="hide-menu">Tables </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><span
class="hide-menu"> Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><span
class="hide-menu"> Dark Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><span
class="hide-menu">
Sizing Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><span
class="hide-menu">
Coloured
Table Layout
</span></a>
</li>
<li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><span
class="hide-menu">
Basic
Datatables
Layout
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="bar-chart" class="feather-icon"></i><span
class="hide-menu">Charts </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><span
class="hide-menu"> Morris Chart
</span></a>
</li>
<li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><span
class="hide-menu"> ChartJs
</span></a>
</li>
<li class="sidebar-item"><a href="chart-knob.html" class="sidebar-link"><span
class="hide-menu">
Knob Chart
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="box" class="feather-icon"></i><span
class="hide-menu">UI Elements </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><span
class="hide-menu"> Buttons
</span></a>
</li>
<li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><span
class="hide-menu"> Modals </span></a>
</li>
<li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><span
class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><span
class="hide-menu"> Tooltip &
Popover</span></a></li>
<li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><span
class="hide-menu">Notification</span></a></li>
<li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><span
class="hide-menu">Progressbar</span></a></li>
<li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><span
class="hide-menu">Typography</span></a></li>
<li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><span
class="hide-menu">Bootstrap
UI</span></a></li>
<li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><span
class="hide-menu">Breadcrumb</span></a></li>
<li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><span
class="hide-menu">List
Media</span></a></li>
<li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><span
class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><span
class="hide-menu">
Carousel</span></a></li>
<li class="sidebar-item"><a href="ui-scrollspy.html" class="sidebar-link"><span
class="hide-menu">
Scrollspy</span></a></li>
<li class="sidebar-item"><a href="ui-toasts.html" class="sidebar-link"><span
class="hide-menu"> Toasts</span></a>
</li>
<li class="sidebar-item"><a href="ui-spinner.html" class="sidebar-link"><span
class="hide-menu"> Spinner </span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="ui-cards.html"
aria-expanded="false"><i data-feather="sidebar" class="feather-icon"></i><span
class="hide-menu">Cards
</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Authentication</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="lock" class="feather-icon"></i><span
class="hide-menu">Login
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link"
href="authentication-register1.html" aria-expanded="false"><i data-feather="lock"
class="feather-icon"></i><span class="hide-menu">Register
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="feather" class="feather-icon"></i><span
class="hide-menu">Icons
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><span
class="hide-menu"> Fontawesome Icons </span></a></li>
<li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><span
class="hide-menu"> Simple Line Icons </span></a></li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="crosshair" class="feather-icon"></i><span
class="hide-menu">Multi
level
dd</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.1</span></a>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.2</span></a>
</li>
<li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)"
aria-expanded="false"><span class="hide-menu">Menu 1.3</span></a>
<ul aria-expanded="false" class="collapse second-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.1</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.2</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.3</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.4</span></a></li>
</ul>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.4</span></a></li>
</ul>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Extra</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="../../docs/docs.html"
aria-expanded="false"><i data-feather="edit-3" class="feather-icon"></i><span
class="hide-menu">Documentation</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="log-out" class="feather-icon"></i><span
class="hide-menu">Logout</span></a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="row">
<div class="col-7 align-self-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Scrollspy</h4>
<div class="d-flex align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item"><a href="index.html" class="text-muted">Home</a></li>
<li class="breadcrumb-item text-muted active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</div>
<div class="col-5 align-self-center">
<div class="customize-input float-right">
<select class="custom-select custom-select-set form-control bg-white border-0 custom-shadow custom-radius">
<option selected>Aug 19</option>
<option value="1">July 19</option>
<option value="2">Jun 19</option>
</select>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- First Card with Navbar -->
<!-- ============================================================== -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Scrollspy with Navbar</h4>
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand text-muted" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Third with Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0"
class="position-relative mt-2" style="height: 200px; overflow: auto;">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they
sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles
cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo
jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et
cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard
aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles.
Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes
anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn
adipisicing craft beer vice keytar deserunt.</p>
<h4 id="one">First item</h4>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle
rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in
magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork.
Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in,
sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">Second item</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats
sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft
beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master
cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed
nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi
sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.
Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<h4 id="three">Third item</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they
sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles
cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo
jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et
cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth
id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't
heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before
they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur
keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray
laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- Second Card with Nested Nav -->
<!-- ============================================================== -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Scollspy with Nested Nav</h4>
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light flex-column">
<a class="navbar-brand text-muted" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0"
class="position-relative mt-4" style="height: 300px;overflow: auto;">
<h4 id="item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco
duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur
ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat
enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod
consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip
nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut
eiusmod cupidatat elit dolore.</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem
et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem
ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit
proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua
commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu
commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
excepteur minim exercitation minim minim commodo adipisicing exercitation
officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint
dolor elit cillum anim et fugiat.</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum
sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa
incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint
elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum
esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non
consequat eiusmod velit incididunt.</p>
<h4 id="item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor.
Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua.
Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim
Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco
deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum
mollit labore officia laborum excepteur commodo non commodo dolor excepteur
commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
</p>
<h4 id="item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis.
Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute
tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit
fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident
nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do
laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore
nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt
irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt
ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor
excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure
proident ipsum esse qui.</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate
minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim
commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur
nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat
et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur
tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet
officia.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- Third Card with List Group -->
<!-- ============================================================== -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Scrollspy with List-group</h4>
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="position-relative mt-2" style="height: 200px; overflow: auto;">
<h4 id="list-item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco
duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur
ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat
enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod
consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip
nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut
eiusmod cupidatat elit dolore.</p>
<h4 id="list-item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor.
Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua.
Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim
Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco
deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum
mollit labore officia laborum excepteur commodo non commodo dolor excepteur
commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
</p>
<h4 id="list-item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis.
Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute
tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit
fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
<h4 id="list-item-4">Item 4</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis.
Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute
tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit
fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center text-muted">
All Rights Reserved by Adminmart. Designed and Developed by <a
href="https://wrappixel.com">WrapPixel</a>.
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<!-- apps -->
<script src="../dist/js/app-style-switcher.js"></script>
<script src="../dist/js/feather.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<!-- themejs -->
<!--Menu sidebar -->
<script src="../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../dist/js/custom.min.js"></script>
</body>
</html>