<!-- ==== HEADER CONTENT ===== -->
<header id="site-header" class="site-header__v6">
<div class="topbar border-bottom d-none d-md-block bg-dark">
<div class="container-fluid px-2 px-md-5 px-xl-8d75">
<div class="topbar__nav d-lg-flex justify-content-between align-items-center font-size-2">
<ul class="topbar__nav--left nav ml-lg-n3">
<li class="nav-item"><a href="#" class="nav-link text-white"><i class="font-size-3 glph-icon flaticon-question mr-2"></i>Can we help you?</a></li>
<li class="nav-item"><a href="#" class="nav-link text-white"><i class="font-size-3 glph-icon flaticon-phone mr-2"></i>+1 246-345-0695</a></li>
</ul>
<ul class="topbar__nav--right nav">
<li class="nav-item"><a href="#" class="nav-link py-2 px-3 text-white d-flex align-items-center"><i class="glph-icon flaticon-pin mr-2 font-size-3"></i>Store Location</a></li>
<li class="nav-item"><a href="#" class="nav-link py-2 px-3 text-white d-flex align-items-center"><i class="glph-icon flaticon-sent mr-2 font-size-3"></i>Track Your Order</a></li>
<li class="nav-item">
<div class="position-relative h-100">
<a id="basicDropdownHoverInvoker" class="d-flex align-items-center h-100 dropdown-nav-link py-2 px-3 dropdown-toggle nav-link text-white" href="javascript:;" role="button"
aria-controls="basicDropdownHover"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#basicDropdownHover"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
USD <i class=""></i>
</a>
<div id="basicDropdownHover" class="dropdown-menu dropdown-unfold right-0 left-auto" aria-labelledby="basicDropdownHoverInvoker">
<a class="dropdown-item active" href="#">INR</a>
<a class="dropdown-item" href="#">Euro</a>
<a class="dropdown-item" href="#">Yen</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="position-relative h-100">
<a id="basicDropdownHoverInvoker1" class="d-flex align-items-center h-100 dropdown-nav-link py-2 px-3 dropdown-toggle nav-link text-white" href="javascript:;" role="button"
aria-controls="basicDropdownHover1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#basicDropdownHover1"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
English <i class=""></i>
</a>
<div id="basicDropdownHover1" class="dropdown-menu dropdown-unfold right-0 left-auto" aria-labelledby="basicDropdownHoverInvoker1">
<a class="dropdown-item active" href="#">Tamil</a>
<a class="dropdown-item" href="#">Arabic</a>
<a class="dropdown-item" href="#">French</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="masthead position-relative" style="margin-bottom: -1px;">
<div class="container-fluid px-3 px-md-5 px-xl-8d75 py-3 py-xl-0">
<div class="d-flex align-items-center position-relative flex-wrap">
<div class="offcanvas-toggler mr-5">
<a id="sidebarNavToggler2" href="javascript:;" role="button" class="cat-menu"
aria-controls="sidebarContent2"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent2"
data-unfold-type="css-animation"
data-unfold-overlay='{
"className": "u-sidebar-bg-overlay",
"background": "rgba(0, 0, 0, .7)",
"animationSpeed": 100
}'
data-unfold-animation-in="fadeInLeft"
data-unfold-animation-out="fadeOutLeft"
data-unfold-duration="100">
<svg width="20px" height="18px">
<path fill-rule="evenodd" fill="rgb(25, 17, 11)" d="M-0.000,-0.000 L20.000,-0.000 L20.000,2.000 L-0.000,2.000 L-0.000,-0.000 Z"/>
<path fill-rule="evenodd" fill="rgb(25, 17, 11)" d="M-0.000,8.000 L15.000,8.000 L15.000,10.000 L-0.000,10.000 L-0.000,8.000 Z"/>
<path fill-rule="evenodd" fill="rgb(25, 17, 11)" d="M-0.000,16.000 L20.000,16.000 L20.000,18.000 L-0.000,18.000 L-0.000,16.000 Z"/>
</svg>
</a>
</div>
<div class="site-branding pr-4">
<h1 class="site-title text-uppercase font-weight-bold font-size-5 m-0"><a href="#">BookWorm</a></h1>
</div>
<div class="site-navigation mx-auto d-none d-xl-block">
<ul class="nav">
<li class="nav-item dropdown">
<a id="homeDropdownInvoker" href="#" class="dropdown-toggle nav-link link-black-100 mx-4 px-0 py-5 font-weight-medium d-flex align-items-center"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#homeDropdownMenu"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="50"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Home
</a>
<ul id="homeDropdownMenu" class="dropdown-unfold dropdown-menu font-size-2 rounded-0 border-gray-900" aria-labelledby="homeDropdownInvoker">
<li><a href="../home/index.html" class="dropdown-item link-black-100">Home v1</a></li>
<li><a href="../home/home-v2.html" class="dropdown-item link-black-100">Home v2</a></li>
<li><a href="../home/home-v3.html" class="dropdown-item link-black-100">Home v3</a></li>
<li><a href="../home/home-v4.html" class="dropdown-item link-black-100">Home v4</a></li>
<li><a href="../home/home-v5.html" class="dropdown-item link-black-100">Home v5</a></li>
<li><a href="../home/home-v6.html" class="dropdown-item link-black-100">Home v6</a></li>
<li><a href="../home/home-v7.html" class="dropdown-item link-black-100">Home v7</a></li>
<li><a href="../home/home-v8.html" class="dropdown-item link-black-100">Home v8</a></li>
<li><a href="../home/home-v9.html" class="dropdown-item link-black-100">Home v9</a></li>
<li><a href="../home/home-v10.html" class="dropdown-item link-black-100">Home v10</a></li>
<li><a href="../home/home-v11.html" class="dropdown-item link-black-100">Home v11</a></li>
<li><a href="../home/home-v12.html" class="dropdown-item link-black-100">Home v12</a></li>
<li><a href="../home/home-v13.html" class="dropdown-item link-black-100">Home v13</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link link-black-100 mx-4 px-0 py-5 font-weight-medium">Categories</a></li>
<li class="nav-item dropdown">
<a id="shopDropdownInvoker" href="#" class="dropdown-toggle nav-link link-black-100 mx-4 px-0 py-5 font-weight-medium d-flex align-items-center"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#shopDropdownMenu"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="50"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Shop
</a>
<ul id="shopDropdownMenu" class="dropdown-unfold dropdown-menu font-size-2 rounded-0 border-gray-900" aria-labelledby="shopDropdownInvoker">
<li class="position-relative">
<a id="shopDropdownsubmenuoneInvoker" href="#" class="dropdown-toggle dropdown-item dropdown-item__sub-menu link-black-100 d-flex align-items-center justify-content-between"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#shopDropdownsubMenuone"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="100"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">Shop List
</a>
<ul id="shopDropdownsubMenuone" class="dropdown-unfold dropdown-menu dropdown-sub-menu font-size-2 rounded-0 border-gray-900" aria-labelledby="shopDropdownsubmenuoneInvoker">
<li><a href="../shop/v1.html" class="dropdown-item link-black-100">Shop List v1</a></li>
<li><a href="../shop/v2.html" class="dropdown-item link-black-100">Shop List v2</a></li>
<li><a href="../shop/v3.html" class="dropdown-item link-black-100">Shop List v3</a></li>
<li><a href="../shop/v4.html" class="dropdown-item link-black-100">Shop List v4</a></li>
<li><a href="../shop/v5.html" class="dropdown-item link-black-100">Shop List v5</a></li>
<li><a href="../shop/v6.html" class="dropdown-item link-black-100">Shop List v6</a></li>
<li><a href="../shop/v7.html" class="dropdown-item link-black-100">Shop List v7</a></li>
<li><a href="../shop/v8.html" class="dropdown-item link-black-100">Shop List v8</a></li>
<li><a href="../shop/v9.html" class="dropdown-item link-black-100">Shop List v9</a></li>
</ul>
</li>
<li class="position-relative">
<a id="shopDropdownsubmenutwoInvoker" href="#" class="dropdown-toggle dropdown-item dropdown-item__sub-menu link-black-100 d-flex align-items-center justify-content-between"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#shopDropdownsubMenutwo"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="100"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">Single Product
</a>
<ul id="shopDropdownsubMenutwo" class="dropdown-unfold dropdown-menu dropdown-sub-menu font-size-2 rounded-0 border-gray-900" aria-labelledby="shopDropdownsubmenutwoInvoker">
<li><a href="../shop/single-product-v1.html" class="dropdown-item link-black-100">Shop Single v1</a></li>
<li><a href="../shop/single-product-v2.html" class="dropdown-item link-black-100">Shop Single v2</a></li>
<li><a href="../shop/single-product-v3.html" class="dropdown-item link-black-100">Shop Single v3</a></li>
<li><a href="../shop/single-product-v4.html" class="dropdown-item link-black-100">Shop Single v4</a></li>
<li><a href="../shop/single-product-v5.html" class="dropdown-item link-black-100">Shop Single v5</a></li>
<li><a href="../shop/single-product-v6.html" class="dropdown-item link-black-100">Shop Single v6</a></li>
<li><a href="../shop/single-product-v7.html" class="dropdown-item link-black-100">Shop Single v7</a></li>
</ul>
</li>
<li><a href="../shop/cart.html" class="dropdown-item link-black-100">Shop cart</a></li>
<li><a href="../shop/checkout.html" class="dropdown-item link-black-100">Shop checkout</a></li>
<li><a href="../shop/my-account.html" class="dropdown-item link-black-100">Shop My Account</a></li>
<li><a href="../shop/order-received.html" class="dropdown-item link-black-100">Shop Order Received</a></li>
<li><a href="../shop/order-tracking.html" class="dropdown-item link-black-100">Shop Order Tracking</a></li>
<li><a href="../shop/store-location.html" class="dropdown-item link-black-100">Shop Store Location</a></li>
</ul>
</li>
<li class="nav-item">
<a id="featuresDropdownInvoker" href="#" class="dropdown-toggle nav-link link-black-100 mx-4 px-0 py-5 font-weight-medium d-flex align-items-center"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#featuresDropdownMenu"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="50"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Pages
</a>
<div id="featuresDropdownMenu" class="p-0 dropdown-unfold dropdown-menu megamenu font-size-2 rounded-0 border-gray-900" aria-labelledby="featuresDropdownInvoker" style="width:1100px;">
<div class="row no-gutters">
<div class="col-8 px-1">
<div class="px-5 py-2 pb-5">
<div class="row">
<div class="col-3">
<ul class="menu list-unstyled">
<li><span class=" d-block link-black-100 py-3 font-size-3 font-weight-medium">Home</span></li>
<li><a href="../home/index.html" class="d-block link-black-100 py-1">Home v1</a></li>
<li><a href="../home/home-v2.html" class="d-block link-black-100 py-1">Home v2</a></li>
<li><a href="../home/home-v3.html" class="d-block link-black-100 py-1">Home v3</a></li>
<li><a href="../home/home-v4.html" class="d-block link-black-100 py-1">Home v4</a></li>
<li><a href="../home/home-v5.html" class="d-block link-black-100 py-1">Home v5</a></li>
<li><a href="../home/home-v6.html" class="d-block link-black-100 py-1">Home v6</a></li>
<li><a href="../home/home-v7.html" class="d-block link-black-100 py-1">Home v7</a></li>
<li><a href="../home/home-v8.html" class="d-block link-black-100 py-1">Home v8</a></li>
<li><a href="../home/home-v9.html" class="d-block link-black-100 py-1">Home v9</a></li>
<li><a href="../home/home-v10.html" class="d-block link-black-100 py-1">Home v10</a></li>
<li><a href="../home/home-v11.html" class="d-block link-black-100 py-1">Home v11</a></li>
<li><a href="../home/home-v12.html" class="d-block link-black-100 py-1">Home v12</a></li>
<li><a href="../home/home-v13.html" class="d-block link-black-100 py-1">Home v13</a></li>
</ul>
</div>
<div class="col-3">
<ul class="menu list-unstyled">
<li><span class=" d-block link-black-100 py-3 font-size-3 font-weight-medium">Single Product</span></li>
<li><a href="../shop/single-product-v1.html" class="d-block link-black-100 py-1">Single Product v1</a></li>
<li><a href="../shop/single-product-v2.html" class="d-block link-black-100 py-1">Single Product v2</a></li>
<li><a href="../shop/single-product-v3.html" class="d-block link-black-100 py-1">Single Product v3</a></li>
<li><a href="../shop/single-product-v4.html" class="d-block link-black-100 py-1">Single Product v4</a></li>
<li><a href="../shop/single-product-v5.html" class="d-block link-black-100 py-1">Single Product v5</a></li>
<li><a href="../shop/single-product-v6.html" class="d-block link-black-100 py-1">Single Product v6</a></li>
<li><a href="../shop/single-product-v7.html" class="d-block link-black-100 py-1">Single Product v7</a></li>
<li><span class=" d-block link-black-100 py-3 font-size-3 font-weight-medium">Shop Pages</span></li>
<li><a href="../shop/cart.html" class="d-block link-black-100 py-1">Shop cart</a></li>
<li><a href="../shop/checkout.html" class="d-block link-black-100 py-1">Shop checkout</a></li>
<li><a href="../shop/my-account.html" class="d-block link-black-100 py-1">Shop My Account</a></li>
<li><a href="../shop/order-received.html" class="d-block link-black-100 py-1">Shop Order Received</a></li>
<li><a href="../shop/order-tracking.html" class="d-block link-black-100 py-1">Shop Order Tracking</a></li>
<li><a href="../shop/store-location.html" class="d-block link-black-100 py-1">Shop Store Location</a></li>
</ul>
</div>
<div class="col-3">
<ul class="menu list-unstyled">
<li><span class=" d-block link-black-100 py-3 font-size-3 font-weight-medium">Shop List</span></li>
<li><a href="../shop/v1.html" class="d-block link-black-100 py-1">Shop List v1</a></li>
<li><a href="../shop/v2.html" class="d-block link-black-100 py-1">Shop List v2</a></li>
<li><a href="../shop/v3.html" class="d-block link-black-100 py-1">Shop List v3</a></li>
<li><a href="../shop/v4.html" class="d-block link-black-100 py-1">Shop List v4</a></li>
<li><a href="../shop/v5.html" class="d-block link-black-100 py-1">Shop List v5</a></li>
<li><a href="../shop/v6.html" class="d-block link-black-100 py-1">Shop List v6</a></li>
<li><a href="../shop/v7.html" class="d-block link-black-100 py-1">Shop List v7</a></li>
<li><a href="../shop/v8.html" class="d-block link-black-100 py-1">Shop List v8</a></li>
<li><a href="../shop/v9.html" class="d-block link-black-100 py-1">Shop List v9</a></li>
<li><span class=" d-block link-black-100 py-3 font-size-3 font-weight-medium">Blog</span></li>
<li><a href="../blog/blog-v1.html" class="d-block link-black-100 py-1">Blog v1</a></li>
<li><a href="../blog/blog-v2.html" class="d-block link-black-100 py-1">Blog v2</a></li>
<li><a href="../blog/blog-v3.html" class="d-block link-black-100 py-1">Blog v3</a></li>
<li><a href="../blog/blog-single.html" class="d-block link-black-100 py-1">Blog Single</a></li>
</ul>
</div>
<div class="col-3">
<ul class="menu list-unstyled">
<li><span class=" d-block link-black-100 py-3 font-size-3 font-weight-medium">Others</span></li>
<li><a href="../others/404.html" class="d-block link-black-100 py-1">404</a></li>
<li><a href="../others/about.html" class="d-block link-black-100 py-1">About Us</a></li>
<li><a href="../others/authors-list.html" class="d-block link-black-100 py-1">Authors List</a></li>
<li><a href="../others/authors-single.html" class="d-block link-black-100 py-1">Authors Single</a></li>
<li><a href="../others/coming-soon.html" class="d-block link-black-100 py-1">Coming Soon</a></li>
<li><a href="../others/contact.html" class="d-block link-black-100 py-1">Contact Us</a></li>
<li><a href="../others/faq.html" class="d-block link-black-100 py-1">FAQ</a></li>
<li><a href="../others/pricing-table.html" class="d-block link-black-100 py-1">Pricing Table</a></li>
<li><a href="../others/terms-conditions.html" class="d-block link-black-100 py-1">Terms Conditions</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 bg-gray-200">
<div class="banner px-8 py-5">
<div class="banner__body">
<h3 class="banner_text m-0">
<span class="d-block mb-1 font-size-7 font-weight-regular">Deals in </span>
<span class="d-block mb-2 font-size-10 text-primary font-weight-bold">Books</span>
</h3>
<a href="#" class="d-block link-black-100 mb-6">Shop Now</a>
<div class="banner__image">
<img src="https://placehold.it/280x210" class="img-fluid" alt="image-description">
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a id="blogDropdownInvoker" href="#" class="dropdown-toggle nav-link link-black-100 mx-4 px-0 py-5 font-weight-medium d-flex align-items-center"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#blogDropdownMenu"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="50"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Blog
</a>
<ul id="blogDropdownMenu" class="dropdown-unfold dropdown-menu font-size-2 rounded-0 border-gray-900" aria-labelledby="blogDropdownInvoker">
<li><a href="../blog/blog-v1.html" class="dropdown-item link-black-100">Blog v1</a></li>
<li><a href="../blog/blog-v2.html" class="dropdown-item link-black-100">Blog v2</a></li>
<li><a href="../blog/blog-v3.html" class="dropdown-item link-black-100">Blog v3</a></li>
<li><a href="../blog/blog-single.html" class="dropdown-item link-black-100">Blog Single</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="pagesDropdownInvoker" href="#" class="dropdown-toggle nav-link link-black-100 mx-4 px-0 py-5 font-weight-medium d-flex align-items-center"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#pagesDropdownMenu"
data-unfold-type="css-animation"
data-unfold-duration="200"
data-unfold-delay="50"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Others
</a>
<ul id="pagesDropdownMenu" class="dropdown-unfold dropdown-menu font-size-2 rounded-0 border-gray-900" aria-labelledby="pagesDropdownInvoker">
<li><a href="../others/404.html" class="dropdown-item link-black-100">404</a></li>
<li><a href="../others/about.html" class="dropdown-item link-black-100">About Us</a></li>
<li><a href="../others/authors-list.html" class="dropdown-item link-black-100">Authors List</a></li>
<li><a href="../others/authors-single.html" class="dropdown-item link-black-100">Authors Single</a></li>
<li><a href="../others/coming-soon.html" class="dropdown-item link-black-100">Coming Soon</a></li>
<li><a href="../others/contact.html" class="dropdown-item link-black-100">Contact Us</a></li>
<li><a href="../others/faq.html" class="dropdown-item link-black-100">FAQ</a></li>
<li><a href="../others/pricing-table.html" class="dropdown-item link-black-100">Pricing Table</a></li>
<li><a href="../others/terms-conditions.html" class="dropdown-item link-black-100">Terms Conditions</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav align-self-center ml-auto ml-xl-0">
<li class="d-none d-md-block nav-item"><a href="#" class="nav-link text-dark"><i class="glph-icon flaticon-heart font-size-4"></i></a></li>
<li class="nav-item">
<!-- Account Sidebar Toggle Button -->
<a id="sidebarNavToggler" href="javascript:;" role="button" class="nav-link text-dark"
aria-controls="sidebarContent"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent"
data-unfold-type="css-animation"
data-unfold-overlay='{
"className": "u-sidebar-bg-overlay",
"background": "rgba(0, 0, 0, .7)",
"animationSpeed": 500
}'
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<i class="glph-icon flaticon-user font-size-4"></i>
</a>
<!-- End Account Sidebar Toggle Button -->
</li>
<li class="d-none d-md-block nav-item">
<!-- Cart Sidebar Toggle Button -->
<a id="sidebarNavToggler1" href="javascript:;" role="button" class="nav-link pr-0 text-dark position-relative"
aria-controls="sidebarContent1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent1"
data-unfold-type="css-animation"
data-unfold-overlay='{
"className": "u-sidebar-bg-overlay",
"background": "rgba(0, 0, 0, .7)",
"animationSpeed": 500
}'
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span class="position-absolute bg-dark width-16 height-16 rounded-circle d-flex align-items-center justify-content-center text-white font-size-n9 left-0">3</span>
<i class="glph-icon flaticon-icon-126515 font-size-4"></i>
<span class="d-none d-xl-inline h6 mb-0 ml-1">$40.93</span>
</a>
<!-- End Cart Sidebar Toggle Button -->
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Account Sidebar Navigation - Desktop -->
<aside id="sidebarContent" class="u-sidebar u-sidebar__lg" aria-labelledby="sidebarNavToggler">
<div class="u-sidebar__scroller">
<div class="u-sidebar__container">
<div class="u-header-sidebar__footer-offset">
<!-- Toggle Button -->
<div class="d-flex align-items-center position-absolute top-0 right-0 z-index-2 mt-5 mr-md-6 mr-4">
<button type="button" class="close ml-auto"
aria-controls="sidebarContent"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span aria-hidden="true">Close <i class="fas fa-times ml-2"></i></span>
</button>
</div>
<!-- End Toggle Button -->
<!-- Content -->
<div class="js-scrollbar u-sidebar__body">
<div class="u-sidebar__content u-header-sidebar__content">
<form class="">
<!-- Login -->
<div id="login" data-target-group="idForm">
<!-- Title -->
<header class="border-bottom px-4 px-md-6 py-4">
<h2 class="font-size-3 mb-0 d-flex align-items-center"><i class="flaticon-user mr-3 font-size-5"></i>Account</h2>
</header>
<!-- End Title -->
<div class="p-4 p-md-6">
<!-- Form Group -->
<div class="form-group mb-4">
<div class="js-form-message js-focus-state">
<label id="signinEmailLabel" class="form-label" for="signinEmail">Username or email *</label>
<input type="email" class="form-control rounded-0 height-4 px-4" name="email" id="signinEmail" placeholder="creativelayers088@gmail.com" aria-label="creativelayers088@gmail.com" aria-describedby="signinEmailLabel" required>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group mb-4">
<div class="js-form-message js-focus-state">
<label id="signinPasswordLabel" class="form-label" for="signinPassword">Password *</label>
<input type="password" class="form-control rounded-0 height-4 px-4" name="password" id="signinPassword" placeholder="" aria-label="" aria-describedby="signinPasswordLabel" required>
</div>
</div>
<!-- End Form Group -->
<div class="d-flex justify-content-between mb-5 align-items-center">
<!-- Checkbox -->
<div class="js-form-message">
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="termsCheckbox" name="termsCheckbox" required>
<label class="custom-control-label" for="termsCheckbox">
<span class="font-size-2 text-secondary-gray-700">
Remember me
</span>
</label>
</div>
</div>
<!-- End Checkbox -->
<a class="js-animation-link text-dark font-size-2 t-d-u link-muted font-weight-medium" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="fadeIn">Forgot Password?</a>
</div>
<div class="mb-4d75">
<button type="submit" class="btn btn-block py-3 rounded-0 btn-dark">Sign In</button>
</div>
<div class="mb-2">
<a href="javascript:;" class="js-animation-link btn btn-block py-3 rounded-0 btn-outline-dark font-weight-medium"
data-target="#signup"
data-link-group="idForm"
data-animation-in="fadeIn">Create Account</a>
</div>
</div>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Title -->
<header class="border-bottom px-4 px-md-6 py-4">
<h2 class="font-size-3 mb-0 d-flex align-items-center"><i class="flaticon-resume mr-3 font-size-5"></i>Create Account</h2>
</header>
<!-- End Title -->
<div class="p-4 p-md-6">
<!-- Form Group -->
<div class="form-group mb-4">
<div class="js-form-message js-focus-state">
<label id="signinEmailLabel1" class="form-label" for="signinEmail1">Email *</label>
<input type="email" class="form-control rounded-0 height-4 px-4" name="email" id="signinEmail1" placeholder="creativelayers088@gmail.com" aria-label="creativelayers088@gmail.com" aria-describedby="signinEmailLabel1" required>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group mb-4">
<div class="js-form-message js-focus-state">
<label id="signinPasswordLabel1" class="form-label" for="signinPassword1">Password *</label>
<input type="password" class="form-control rounded-0 height-4 px-4" name="password" id="signinPassword1" placeholder="" aria-label="" aria-describedby="signinPasswordLabel1" required>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group mb-4">
<div class="js-form-message js-focus-state">
<label id="signupConfirmPasswordLabel" class="form-label" for="signupConfirmPassword">Confirm Password *</label>
<input type="password" class="form-control rounded-0 height-4 px-4" name="confirmPassword" id="signupConfirmPassword" placeholder="" aria-label="" aria-describedby="signupConfirmPasswordLabel" required>
</div>
</div>
<!-- End Input -->
<div class="mb-3">
<button type="submit" class="btn btn-block py-3 rounded-0 btn-dark">Create Account</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
</div>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Title -->
<header class="border-bottom px-4 px-md-6 py-4">
<h2 class="font-size-3 mb-0 d-flex align-items-center"><i class="flaticon-question mr-3 font-size-5"></i>Forgot Password?</h2>
</header>
<!-- End Title -->
<div class="p-4 p-md-6">
<!-- Form Group -->
<div class="form-group mb-4">
<div class="js-form-message js-focus-state">
<label id="signinEmailLabel3" class="form-label" for="signinEmail3">Email *</label>
<input type="email" class="form-control rounded-0 height-4 px-4" name="email" id="signinEmail3" placeholder="creativelayers088@gmail.com" aria-label="creativelayers088@gmail.com" aria-describedby="signinEmailLabel3" required>
</div>
</div>
<!-- End Form Group -->
<div class="mb-3">
<button type="submit" class="btn btn-block py-3 rounded-0 btn-dark">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
</div>
</div>
<!-- End Forgot Password -->
</form>
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
</aside>
<!-- End Account Sidebar Navigation - Desktop -->
<!-- Cart Sidebar Navigation -->
<aside id="sidebarContent1" class="u-sidebar u-sidebar__xl" aria-labelledby="sidebarNavToggler1">
<div class="u-sidebar__scroller js-scrollbar">
<div class="u-sidebar__container">
<div class="u-header-sidebar__footer-offset">
<!-- Toggle Button -->
<div class="d-flex align-items-center position-absolute top-0 right-0 z-index-2 mt-5 mr-md-6 mr-4">
<button type="button" class="close ml-auto"
aria-controls="sidebarContent1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent1"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span aria-hidden="true">Close <i class="fas fa-times ml-2"></i></span>
</button>
</div>
<!-- End Toggle Button -->
<!-- Content -->
<div class="u-sidebar__body">
<div class="u-sidebar__content u-header-sidebar__content">
<!-- Title -->
<header class="border-bottom px-4 px-md-6 py-4">
<h2 class="font-size-3 mb-0 d-flex align-items-center"><i class="flaticon-icon-126515 mr-3 font-size-5"></i>Your shopping bag (3)</h2>
</header>
<!-- End Title -->
<div class="px-4 py-5 px-md-6 border-bottom">
<div class="media">
<a href="#" class="d-block"><img src="https://placehold.it/100x153" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">
<a href="#" class="text-dark">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO</a>
</h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Robert Iger</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount">1 x <span class="woocommerce-Price-currencySymbol">$</span>125.30</span>
</div>
</div>
<div class="mt-3 ml-3">
<a href="#" class="text-dark"><i class="fas fa-times"></i></a>
</div>
</div>
</div>
<div class="px-4 py-5 px-md-6 border-bottom">
<div class="media">
<a href="#" class="d-block"><img src="https://placehold.it/100x153" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">
<a href="#" class="text-dark">The Rural Diaries: Love, Livestock, and Big Life Lessons Down</a>
</h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount">2 x <span class="woocommerce-Price-currencySymbol">$</span>200</span>
</div>
</div>
<div class="mt-3 ml-3">
<a href="#" class="text-dark"><i class="fas fa-times"></i></a>
</div>
</div>
</div>
<div class="px-4 py-5 px-md-6 border-bottom">
<div class="media">
<a href="#" class="d-block"><img src="https://placehold.it/100x153" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">
<a href="#" class="text-dark">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt.</a>
</h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Gordon Corera</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount">6 x <span class="woocommerce-Price-currencySymbol">$</span>100</span>
</div>
</div>
<div class="mt-3 ml-3">
<a href="#" class="text-dark"><i class="fas fa-times"></i></a>
</div>
</div>
</div>
<div class="px-4 py-5 px-md-6 d-flex justify-content-between align-items-center font-size-3">
<h4 class="mb-0 font-size-3">Subtotal:</h4>
<div class="font-weight-medium">$750.00</div>
</div>
<div class="px-4 mb-8 px-md-6">
<button type="submit" class="btn btn-block py-4 rounded-0 btn-outline-dark mb-4">View Cart</button>
<button type="submit" class="btn btn-block py-4 rounded-0 btn-dark">Checkout</button>
</div>
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
</aside>
<!-- End Cart Sidebar Navigation -->
<!-- ===== END HEADER CONTENT ======-->
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="../../assets/vendor/hs-megamenu/src/hs.megamenu.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/hs.core.js"></script>
<script src="../../assets/js/components/hs.header.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of header
$.HSCore.components.HSHeader.init($('#header'));
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>