File: /home/artinside/www/sabbry/html-admin/horizontal_menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Mosaddek">
<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<link rel="shortcut icon" href="img/favicon.png">
<title>Horizontal Menu</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<!--<link href="css/navbar-fixed-top.css" rel="stylesheet">-->
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body class="full-width">
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="navbar-header">
<!--logo start-->
<a href="index.html" class="logo" >Flat<span>lab</span></a>
<!--logo end-->
<nav class="horizontal-menu navbar navbar-expand-md navbar-light ">
<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">
<div class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Dashboard</a></li>
<li class="active nav-item"><a class="nav-link" href="#">Components</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" id="navbarDropdown" class="nav-link dropdown-toggle" href="#">UI Element</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="general.html">General</a>
<a class="dropdown-item" href="buttons.html">Buttons</a>
<a class="dropdown-item" href="widget.html">Widget</a>
<a class="dropdown-item" href="slider.html">Slider</a>
<a class="dropdown-item" href="nestable.html">Nestable</a>
<a class="dropdown-item" href="font_awesome.html">Font Awesome</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="basic_table.html">Tables</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" id="navbarDropdown2" class="nav-link dropdown-toggle" href="#">Extra</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="blank.html">Blank Page</a>
<a class="dropdown-item" href="boxed_page.html">Boxed Page</a>
<a class="dropdown-item" href="profile.html">Profile</a>
<a class="dropdown-item" href="invoice.html">Invoice</a>
<a class="dropdown-item" href="search_result.html">Search Result</a>
<a class="dropdown-item" href="404.html">404 Error Page</a>
<a class="dropdown-item" href="500.html">500 Error Page</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="top-nav ">
<ul class="nav pull-right top-menu">
<li>
<input type="text" class="form-control search" placeholder=" Search">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">Jhon Doue</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<div class="log-arrow-up"></div>
<li><a href="#"><i class=" fa fa-suitcase"></i>Profile</a></li>
<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
<li><a href="#"><i class="fa fa-bell-o"></i> Notification</a></li>
<li><a href="login.html"><i class="fa fa-key"></i> Log Out</a></li>
</ul>
</li>
<!-- user login dropdown end -->
</ul>
</div>
</div>
</header>
<!--header end-->
<!--sidebar start-->
<!--sidebar end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!-- page start-->
<div class="row">
<div class="col-lg-12">
<!--breadcrumbs start -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!--breadcrumbs end -->
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header bg-light border-bottom-0" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-light border-bottom-0" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-light border-bottom-0" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<section class="card">
<header class="card-header">
Heading goes here
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="card-body">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
</p>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<section class="card">
<header class="card-header">
Timeline
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="card-body profile-activity">
<h5 class="pull-right">12 August 2013</h5>
<div class="activity terques">
<span>
<i class="fa fa-shopping-cart"></i>
</span>
<div class="activity-desk">
<div class="card">
<div class="card-body">
<div class="arrow"></div>
<i class=" fa fa-time"></i>
<h4>10:45 AM</h4>
<p>Purchased new equipments for zonal office setup and stationaries.</p>
</div>
</div>
</div>
</div>
<div class="activity alt purple">
<span>
<i class="fa fa-rocket"></i>
</span>
<div class="activity-desk">
<div class="card">
<div class="card-body">
<div class="arrow-alt"></div>
<i class=" fa fa-time"></i>
<h4>12:30 AM</h4>
<p>Lorem ipsum dolor sit amet consiquest dio</p>
</div>
</div>
</div>
</div>
<div class="activity blue">
<span>
<i class="fa fa-bullhorn"></i>
</span>
<div class="activity-desk">
<div class="card">
<div class="card-body">
<div class="arrow"></div>
<i class=" fa fa-time"></i>
<h4>10:45 AM</h4>
<p>Please note which location you will consider, or both. Reporting to the VP you will be responsible for managing.. </p>
</div>
</div>
</div>
</div>
<div class="activity alt green">
<span>
<i class="fa fa-beer"></i>
</span>
<div class="activity-desk">
<div class="card">
<div class="card-body">
<div class="arrow-alt"></div>
<i class=" fa fa-time"></i>
<h4>12:30 AM</h4>
<p>Please note which location you will consider, or both.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="col-lg-6">
<section class="card">
<header class="card-header">
Chats
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="card-body">
<div class="timeline-messages">
<!-- Comment -->
<div class="msg-time-chat">
<a class="message-img" href="#"><img alt="" src="img/chat-avatar.jpg" class="avatar"></a>
<div class="message-body msg-in">
<span class="arrow"></span>
<div class="text">
<p class="attribution"><a href="#">Jhon Doe</a> at 1:55pm, 13th April 2013</p>
<p>Hello, How are you brother?</p>
</div>
</div>
</div>
<!-- /comment -->
<!-- Comment -->
<div class="msg-time-chat">
<a class="message-img" href="#"><img alt="" src="img/chat-avatar2.jpg" class="avatar"></a>
<div class="message-body msg-out">
<span class="arrow"></span>
<div class="text">
<p class="attribution"> <a href="#">Jonathan Smith</a> at 2:01pm, 13th April 2013</p>
<p>I'm Fine, Thank you. What about you? How is going on?</p>
</div>
</div>
</div>
<!-- /comment -->
<!-- Comment -->
<div class="msg-time-chat">
<a class="message-img" href="#"><img alt="" src="img/chat-avatar.jpg" class="avatar"></a>
<div class="message-body msg-in">
<span class="arrow"></span>
<div class="text">
<p class="attribution"><a href="#">Jhon Doe</a> at 2:03pm, 13th April 2013</p>
<p>Yeah I'm fine too. Everything is going fine here.</p>
</div>
</div>
</div>
<!-- /comment -->
<!-- Comment -->
<div class="msg-time-chat">
<a class="message-img" href="#"><img alt="" src="img/chat-avatar2.jpg" class="avatar"></a>
<div class="message-body msg-out">
<span class="arrow"></span>
<div class="text">
<p class="attribution"><a href="#">Jonathan Smith</a> at 2:05pm, 13th April 2013</p>
<p>well good to know that. anyway how much time you need to done your task?</p>
</div>
</div>
</div>
<!-- /comment -->
<!-- Comment -->
<div class="msg-time-chat">
<a class="message-img" href="#"><img alt="" src="img/chat-avatar.jpg" class="avatar"></a>
<div class="message-body msg-in">
<span class="arrow"></span>
<div class="text">
<p class="attribution"><a href="#">Jhon Doe</a> at 1:55pm, 13th April 2013</p>
<p>Hello, How are you brother?</p>
</div>
</div>
</div>
<!-- /comment -->
</div>
<div class="chat-form">
<div class="input-cont ">
<input type="text" placeholder="Type a message here..." class="form-control col-lg-12">
</div>
<div class="form-group">
<div class="pull-right chat-features">
<a href="javascript:;">
<i class="fa fa-camera"></i>
</a>
<a href="javascript:;">
<i class="fa fa-link"></i>
</a>
<a href="javascript:;" class="btn btn-danger">Send</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
<!--footer start-->
<footer class="site-footer">
<div class="text-center">
2018 © FlatLab by VectorLab.
<a href="#" class="go-top">
<i class="fa fa-angle-up"></i>
</a>
</div>
</footer>
<!--footer end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"></script>
<script type="text/javascript" src="js/hover-dropdown.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/respond.min.js" ></script>
<!--right slidebar-->
<script src="js/slidebars.min.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
</body>
</html>