552 lines
30 KiB
HTML
552 lines
30 KiB
HTML
{{template "components/header.html" .}}
|
|
{{template "components/preloader.html" .}}
|
|
<div id="main-wrapper">
|
|
<!-- Sidebar Start -->
|
|
{{template "components/sidebar.html" .}}
|
|
<!-- Sidebar End -->
|
|
<div class="page-wrapper">
|
|
<!-- Header Start -->
|
|
{{template "components/topbar.html" .}}
|
|
<!-- Header End -->
|
|
<div class="body-wrapper">
|
|
<div class="container-fluid">
|
|
<div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
|
|
<div class="card-body px-4 py-3">
|
|
<div class="row align-items-center">
|
|
<div class="col-9">
|
|
<h4 class="fw-semibold mb-8">Scrollspy</h4>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a class="text-muted text-decoration-none" href="../main/index.html">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item" aria-current="page">Scrollspy</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="text-center mb-n5">
|
|
<img src="../assets/images/breadcrumb/ChatBc.png" alt="modernize-img" class="img-fluid mb-n4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- -------------------------------------------- -->
|
|
<!-- 1. scrollspy in navbar -->
|
|
<!-- -------------------------------------------- -->
|
|
<div class="col-lg-6 d-flex align-items-stretch">
|
|
<!-- start Scrollspy in navbar -->
|
|
<div class="card w-100">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Scrollspy in navbar</h4>
|
|
<p class="mb-3 card-subtitle">
|
|
Scroll the area below the navbar and watch the active
|
|
class change. The dropdown items will be highlighted as
|
|
well.
|
|
</p>
|
|
<nav id="navbar-example2" class="navbar navbar-light px-3">
|
|
<a class="navbar-brand" href="javascript:void(0)">
|
|
<img src="../assets/images/logos/favicon.png" />
|
|
</a>
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#fat">@fat</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#mdo">@mdo</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="javascript:void(0)" role="button" aria-expanded="false">Dropdown</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="#one">one</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#two">two</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider" />
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#three">three</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="position-relative mt-3 p-3 border overflow-auto" style="height: 200px" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
|
|
<h4 id="fat">@fat</h4>
|
|
<p>
|
|
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">one</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">two</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">three</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end Scrollspy in navbar -->
|
|
</div>
|
|
<!-- -------------------------------------------- -->
|
|
<!-- 2. scrollspy with nested nav -->
|
|
<!-- -------------------------------------------- -->
|
|
<div class="col-lg-6 d-flex align-items-stretch">
|
|
<!-- start Scrollspy with nested nav -->
|
|
<div class="card w-100">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Scrollspy with nested nav</h4>
|
|
<p class="mb-3 card-subtitle">
|
|
Scrollspy also works with nested .navs. If a nested .nav
|
|
is .active, its parents will also be .active. Scroll the
|
|
area next to the navbar and watch the active class change.
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<nav id="navbar-example3" class="navbar navbar-light">
|
|
<a class="navbar-brand ps-3" href="javascript:void(0)">
|
|
<img src="../assets/images/logos/favicon.png" />
|
|
</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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
|
<a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
|
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
|
</nav>
|
|
</nav>
|
|
</nav>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="position-relative mt-3 p-3 border overflow-auto" style="height: 300px" data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
|
|
<h4 id="item-1">Item 1</h4>
|
|
<p>
|
|
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>
|
|
|
|
<h5 id="item-1-1">Item 1-1</h5>
|
|
<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>
|
|
|
|
<h5 id="item-1-2">Item 1-1</h5>
|
|
<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="item-2">Item 2</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="item-3">Item 3</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>
|
|
|
|
<h5 id="item-3-1">Item 3-1</h5>
|
|
<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>
|
|
|
|
<h5 id="item-3-2">Item 3-2</h5>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end Scrollspy with nested nav -->
|
|
</div>
|
|
<!-- -------------------------------------------- -->
|
|
<!-- 3. scrollspy with list group -->
|
|
<!-- -------------------------------------------- -->
|
|
<div class="col-12 d-flex align-items-stretch">
|
|
<!-- start Scrollspy with list group -->
|
|
<div class="card w-100">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Scrollspy with list group</h4>
|
|
<p class="mb-3 card-subtitle">
|
|
Scrollspy also works with .list-groups. Scroll the area
|
|
next to the list group and watch the active class change.
|
|
</p>
|
|
<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 class="position-relative p-3 border overflow-auto" style="height: 200px" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
|
<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 Scrollspy with list group -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content rounded-1">
|
|
<div class="modal-header border-bottom">
|
|
<input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
|
|
<a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
|
|
<i class="ti ti-x fs-5 ms-3"></i>
|
|
</a>
|
|
</div>
|
|
<div class="modal-body message-body" data-simplebar="">
|
|
<h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
|
|
<ul class="list mb-0 py-2">
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Modern</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard1</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Dashboard</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard2</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Contacts</span>
|
|
<span class="text-muted d-block">/apps/contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Posts</span>
|
|
<span class="text-muted d-block">/apps/blog/posts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Detail</span>
|
|
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Shop</span>
|
|
<span class="text-muted d-block">/apps/ecommerce/shop</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Modern</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard1</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Dashboard</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard2</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Contacts</span>
|
|
<span class="text-muted d-block">/apps/contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Posts</span>
|
|
<span class="text-muted d-block">/apps/blog/posts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Detail</span>
|
|
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Shop</span>
|
|
<span class="text-muted d-block">/apps/ecommerce/shop</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Shopping Cart -->
|
|
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
|
<div class="offcanvas-header justify-content-between py-4">
|
|
<h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
|
|
Shopping Cart
|
|
</h5>
|
|
<span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
|
|
</div>
|
|
<div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
|
|
<ul class="mb-0">
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-1.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-2.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-3.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="align-bottom">
|
|
<div class="d-flex align-items-center pb-7">
|
|
<span class="text-dark fs-3">Sub Total</span>
|
|
<div class="ms-auto">
|
|
<span class="text-dark fw-semibold fs-3">$2530</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center pb-7">
|
|
<span class="text-dark fs-3">Total</span>
|
|
<div class="ms-auto">
|
|
<span class="text-dark fw-semibold fs-3">$6830</span>
|
|
</div>
|
|
</div>
|
|
<a href="../main/eco-checkout.html" class="btn btn-outline-primary w-100">Go to shopping cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "components/footer.html" .}}
|
|
|
|
|