You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
7.0 KiB
141 lines
7.0 KiB
<search>
|
|
<div class="search-ui">
|
|
<div class="search-header">
|
|
<img src="./assets/images/logo.png" alt="" class="logo">
|
|
<button class="search-close btn btn-icon bg-transparent float-right mt-2">
|
|
<i class="i-Close-Window text-22 text-muted"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<input type="text" placeholder="Type here" class="search-input" autofocus>
|
|
|
|
<div class="search-title">
|
|
<span class="text-muted">Search results</span>
|
|
</div>
|
|
|
|
<div class="search-results list-horizontal">
|
|
<div class="list-item col-md-12 p-0">
|
|
<div class="card o-hidden flex-row mb-4 d-flex">
|
|
<div class="list-thumb d-flex">
|
|
<!-- TUMBNAIL -->
|
|
<img src="./assets/images/products/headphone-1.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow-1 pl-2 d-flex">
|
|
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row">
|
|
<!-- OTHER DATA -->
|
|
<a href="" class="w-40 w-sm-100">
|
|
<div class="item-title">Headphone 1</div>
|
|
</a>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">
|
|
$300
|
|
<del class="text-secondary">$400</del>
|
|
</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges">
|
|
<span class="badge badge-danger">Sale</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item col-md-12 p-0">
|
|
<div class="card o-hidden flex-row mb-4 d-flex">
|
|
<div class="list-thumb d-flex">
|
|
<!-- TUMBNAIL -->
|
|
<img src="./assets/images/products/headphone-2.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow-1 pl-2 d-flex">
|
|
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row">
|
|
<!-- OTHER DATA -->
|
|
<a href="" class="w-40 w-sm-100">
|
|
<div class="item-title">Headphone 1</div>
|
|
</a>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">
|
|
$300
|
|
<del class="text-secondary">$400</del>
|
|
</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges">
|
|
<span class="badge badge-primary">New</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item col-md-12 p-0">
|
|
<div class="card o-hidden flex-row mb-4 d-flex">
|
|
<div class="list-thumb d-flex">
|
|
<!-- TUMBNAIL -->
|
|
<img src="./assets/images/products/headphone-3.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow-1 pl-2 d-flex">
|
|
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row">
|
|
<!-- OTHER DATA -->
|
|
<a href="" class="w-40 w-sm-100">
|
|
<div class="item-title">Headphone 1</div>
|
|
</a>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">
|
|
$300
|
|
<del class="text-secondary">$400</del>
|
|
</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges">
|
|
<span class="badge badge-primary">New</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item col-md-12 p-0">
|
|
<div class="card o-hidden flex-row mb-4 d-flex">
|
|
<div class="list-thumb d-flex">
|
|
<!-- TUMBNAIL -->
|
|
<img src="./assets/images/products/headphone-4.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow-1 pl-2 d-flex">
|
|
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row">
|
|
<!-- OTHER DATA -->
|
|
<a href="" class="w-40 w-sm-100">
|
|
<div class="item-title">Headphone 1</div>
|
|
</a>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100">
|
|
$300
|
|
<del class="text-secondary">$400</del>
|
|
</p>
|
|
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges">
|
|
<span class="badge badge-primary">New</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- PAGINATION CONTROL -->
|
|
<div class="col-md-12 mt-5 text-center">
|
|
<nav aria-label="Page navigation example">
|
|
<ul class="pagination d-inline-flex">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</search>
|