function App() {

return (
<div className="App">
<header class="section-header">

<section class="header-main border-bottom">

<div class="container">
<div class="row align-items-center">
<div class="col-lg-2 col-4">
<a href="#" class="brand-wrap">
Company Name
</a>
</div>
<div class="col-lg-6 col-sm-12">
<form action="#" class="search">
<div class="input-group w-100">
<input type="text" class="form-control"
placeholder="Search" />
<div class="input-group-append">
<button class="btn btn-primary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4 col-sm-6 col-12">
<div class="widgets-wrap float-md-right">
<div class="widget-header mr-3">
<a href="#" class="icon icon-sm rounded-circle border"><i
class="fa fa-shopping-cart"></i></a>
<span class="badge badge-pill badge-danger notify">0</span>
</div>
<div class="widget-header icontext">
<a href="#" class="icon icon-sm rounded-circle border"><i
class="fa fa-user"></i></a>
<div class="text">
<span class="text-muted">Welcome!</span>
<div>
<a href="#">Sign in</a> |
<a href="#"> Register</a>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</section>
</header>

<section class="section-pagetop bg">

<div class="container">
<h2 class="title-page">Category products</h2>
<nav>
 <ol class="breadcrumb text-white">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Best category</a></li>
<li class="breadcrumb-item active" aria-current="page">Great
articles</li>
</ol>
</nav>
</div>
</section>

<section class="section-content padding-y">

<div class="container">

<div class="row">
<aside class="col-md-3">

<div class="card">
<article class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_1"
aria-expanded="true" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">Product type</h6>
</a>
</header>
<div class="filter-content collapse show" id="collapse_1">
<div class="card-body">
<form class="pb-3">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Search" />
<div class="input-group-append">
<button class="btn btn-light" type="button"><i
class="fa fa-search"></i></button>
</div>
</div>
</form>

<ul class="list-menu">
<li><a href="#">People </a></li>
<li><a href="#">Watches </a></li>
<li><a href="#">Cinema </a></li>
<li><a href="#">Clothes </a></li>
<li><a href="#">Home items </a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">People </a></li>
</ul>

</div>
</div>
</article>
<article class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_2"
aria-expanded="true" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">Brands </h6>
</a>
</header>
 <div class="filter-content collapse show" id="collapse_2">
<div class="card-body">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<div class="custom-control-label">Mercedes
<b class="badge badge-pill badge-light float-
right">120</b> </div>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<div class="custom-control-label">Toyota
<b class="badge badge-pill badge-light float-
right">15</b> </div>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<div class="custom-control-label">Mitsubishi
<b class="badge badge-pill badge-light float-
right">35</b> </div>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<div class="custom-control-label">Nissan
<b class="badge badge-pill badge-light float-
right">89</b> </div>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<div class="custom-control-label">Honda
<b class="badge badge-pill badge-light float-
right">30</b> </div>
</label>
</div>
</div>
</article>
<article class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_3"
aria-expanded="true" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">Price range </h6>
</a>
</header>
<div class="filter-content collapse show" id="collapse_3">
<div class="card-body">
<input type="range" class="custom-range" min="0" max="100"
name="" />
<div class="form-row">
<div class="form-group col-md-6">
<label>Min</label>
<input class="form-control" placeholder="$0"
type="number" />
</div>
<div class="form-group text-right col-md-6">
<label>Max</label>
<input class="form-control" placeholder="$1,0000"
type="number" />
</div>
</div>
 <button class="btn btn-block btn-primary">Apply</button>
</div>
</div>
</article>
<article class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_4"
aria-expanded="true" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">Sizes </h6>
</a>
</header>
<div class="filter-content collapse show" id="collapse_4">
<div class="card-body">
<label class="checkbox-btn">
<input type="checkbox" />
<span class="btn btn-light"> XS </span>
</label>

<label class="checkbox-btn">
<input type="checkbox" />
<span class="btn btn-light"> SM </span>
</label>

<label class="checkbox-btn">
<input type="checkbox" />
<span class="btn btn-light"> LG </span>
</label>

<label class="checkbox-btn">
<input type="checkbox" />
<span class="btn btn-light"> XXL </span>
</label>
</div>
</div>
</article>
<article class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_5"
aria-expanded="false" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">More filter </h6>
</a>
</header>
<div class="filter-content collapse in" id="collapse_5">
<div class="card-body">
<label class="custom-control custom-radio">
<input type="radio" name="myfilter_radio" checked=""
class="custom-control-input" />
<div class="custom-control-label">Any condition</div>
</label>

<label class="custom-control custom-radio">

<input type="radio" name="myfilter_radio" class="custom-
control-input" />
<div class="custom-control-label">Brand new </div>
</label>

<label class="custom-control custom-radio">

 <input type="radio" name="myfilter_radio" class="custom-
control-input" />
<div class="custom-control-label">Used items</div>
</label>

<label class="custom-control custom-radio">

<input type="radio" name="myfilter_radio" class="custom-
control-input" />
<div class="custom-control-label">Very old</div>
</label>
</div>
</div>
</article>
</div>

</aside>
<main class="col-md-9">

<header class="border-bottom mb-4 pb-3">

<div class="form-inline">
<span class="mr-md-auto">32 Items found </span>
<select class="mr-2 form-control">
<option>Latest items</option>
<option>Trending</option>
<option>Most Popular</option>
<option>Cheapest</option>
</select>
<div class="btn-group">
<a href="#" class="btn btn-outline-secondary" data-
toggle="tooltip" title="List view">
<i class="fa fa-bars"></i></a>
<a href="#" class="btn btn-outline-secondary active" data-
toggle="tooltip" title="Grid view">
<i class="fa fa-th"></i></a>
</div>
</div>
</header>

<div class="row">
<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<span class="badge badge-danger"> NEW </span>
<img src="assets/images/items/1.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Great item name goes here</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
<del class="price-old">$1980</del>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
 </div>

<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/2.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>

<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/3.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>

<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/4.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
 <a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>

<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/5.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>

<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/6.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>

<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/7.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
 <div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>
<div class="col-md-4">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src="assets/images/items/1.jpg" />
<a class="btn-overlay" href="#"><i class="fa fa-search-
plus"></i> Quick view</a>
</div>
<figcaption class="info-wrap">
<div class="fix-height">
<a href="#" class="title">Product name goes here just
for demo item</a>
<div class="price-wrap mt-2">
<span class="price">$1280</span>
</div>
</div>
<a href="#" class="btn btn-block btn-primary">Add to cart
</a>
</figcaption>
</figure>
</div>
</div>

<nav class="mt-4" aria-label="Page navigation sample">

<ul class="pagination">
<li class="page-item disabled"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item active"><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="#">Next</a></li>
</ul>
</nav>

</main>

</div>

</div>
</section>

<footer class="section-footer border-top padding-y">

<div class="container">
<p class="float-md-right">
&copy; Copyright 2021 All rights reserved
</p>
<p>
<a href="#">Terms and conditions</a>
</p>
</div>
 </footer>

</div>

);
}

export default App;

<div className="App">
<header className="section-header">
<section className="header-main border-bottom">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-2 col-4">
<a href="#" className="brand-wrap">
Company Name
</a>
</div>
<div className="col-lg-6 col-sm-12">
<form action="#" className="search">
<div className="input-group w-100">
<input
type="text"
className="form-control"
placeholder="Search"
/>
<div className="input-group-append">
<button className="btn btn-primary" type="submit">
<i className="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<div className="col-lg-4 col-sm-6 col-12">
<div className="widgets-wrap float-md-right">
<div className="widget-header mr-3">
<a href="#" className="icon icon-sm rounded-circle border">
<i className="fa fa-shopping-cart"></i>
</a>
<span className="badge badge-pill badge-danger notify">
0
</span>
</div>
<div className="widget-header icontext">
<a href="#" className="icon icon-sm rounded-circle border">
<i className="fa fa-user"></i>
</a>
<div className="text">
<span className="text-muted">Welcome!</span>
<div>
<a href="#">Sign in</a> |<a href="#"> Register</a>
</div>
</div>
</div>
</div>
</div>
 </div>
</div>
</section>
</header>

<section className="section-pagetop bg">

<div className="container">
<h2 className="title-page">Category products</h2>
<nav>
<ol className="breadcrumb text-white">
<li className="breadcrumb-item">
<a href="#">Home</a>
</li>
<li className="breadcrumb-item">
<a href="#">Best category</a>
</li>
<li className="breadcrumb-item active" aria-current="page">
Great articles
</li>
</ol>
</nav>
</div>
</section>

<section className="section-content padding-y">

<div className="container">
<div className="row">
<aside className="col-md-3">
<div className="card">
<article className="filter-group">
<header className="card-header">
<a
href="#"
data-toggle="collapse"
data-target="#collapse_1"
aria-expanded="true"
className=""
>
<i className="icon-control fa fa-chevron-down"></i>
<h6 className="title">Product type</h6>
</a>
</header>
<div className="filter-content collapse show" id="collapse_1">
<div className="card-body">
<form className="pb-3">
<div className="input-group">
<input
type="text"
className="form-control"
placeholder="Search"
/>
<div className="input-group-append">
<button className="btn btn-light" type="button">
<i className="fa fa-search"></i>
</button>
</div>
</div>
</form>
 <ul className="list-menu">
<li>
<a href="#">People </a>
</li>
<li>
<a href="#">Watches </a>
</li>
<li>
<a href="#">Cinema </a>
</li>
<li>
<a href="#">Clothes </a>
</li>
<li>
<a href="#">Home items </a>
</li>
<li>
<a href="#">Animals</a>
</li>
<li>
<a href="#">People </a>
</li>
</ul>
</div>
</div>
</article>
<article className="filter-group">
<header className="card-header">
<a
href="#"
data-toggle="collapse"
data-target="#collapse_2"
aria-expanded="true"
className=""
>
<i className="icon-control fa fa-chevron-down"></i>
<h6 className="title">Brands </h6>
</a>
</header>
<div className="filter-content collapse show" id="collapse_2">
<div className="card-body">
<label className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<div className="custom-control-label">
Mercedes
<b className="badge badge-pill badge-light float-right">
120
</b>{" "}
</div>
</label>
<label className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<div className="custom-control-label">
Toyota
<b className="badge badge-pill badge-light float-right">
15
</b>{" "}
</div>
</label>
 <label className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<div className="custom-control-label">
Mitsubishi
<b className="badge badge-pill badge-light float-right">
35
</b>{" "}
</div>
</label>
<label className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<div className="custom-control-label">
Nissan
<b className="badge badge-pill badge-light float-right">
89
</b>{" "}
</div>
</label>
<label className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<div className="custom-control-label">
Honda
<b className="badge badge-pill badge-light float-right">
30
</b>{" "}
</div>
</label>
</div>

A network error occurred. Please check your connection and try again. If this issue
persists please contact us through our help center at help.openai.com.

2/2

There was an error generating a response

Regenerate
ChatGPT can make mistakes. Check important info.