text: import React, { Component } from 'react'
  
  export default class PopUp extends Component {
    render() {
      return (
        <>
          {/* Footer */}
          <div id="popup-1" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/product-big-1.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div>
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-1" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-2" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/kiwi.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div>
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-2" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-3" className="popup-fcy">
            <div className="row">
              <div className="col-md-6"> <img src="/template/assets/images/product-img/orange.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-3" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-4" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"><img src="/template/assets/images/product-img/acai-berry.jpg" alt="" title className="img-fluid" /></div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-4" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-5" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/maracuja.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-5" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-6" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"><img src="/template/assets/images/product-img/cucumber.jpg" alt="" title className="img-fluid" /></div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-6" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-7" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/mushroom.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-7" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-8" className="popup-fcy">
            <div className="row">
              <div className="col-md-6"> <img src="/template/assets/images/product-img/persimmon.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-8" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-9" className="popup-fcy">
            <div className="row">
              <div className="col-md-6"> <img src="/template/assets/images/product-img/nectarine.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-9" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-10" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/kiwi.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div>
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-2" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-11" className="popup-fcy">
            <div className="row">
              <div className="col-md-6"> <img src="/template/assets/images/product-img/orange.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-3" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-12" className="popup-fcy">
            <div className="row">
              <div className="col-md-6"> <img src="/template/assets/images/product-img/orange.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-3" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-13" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/maracuja.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-5" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-14" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"><img src="/template/assets/images/product-img/cucumber.jpg" alt="" title className="img-fluid" /></div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-6" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-15" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/mushroom.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-7" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-16" className="popup-fcy">
            <div className="row">
              <div className="col-md-6"> <img src="/template/assets/images/product-img/persimmon.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-8" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-17" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/maracuja.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-5" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-18" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"><img src="/template/assets/images/product-img/cucumber.jpg" alt="" title className="img-fluid" /></div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-6" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-19" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/mushroom.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div className="wrap_compare">
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-7" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-20" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/product-big-1.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div>
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-1" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="popup-21" className="popup-fcy">
            <div className="row">
              <div className="col-md-6 text-center"> <img src="/template/assets/images/product-img/kiwi.jpg" alt="" title className="img-fluid" /> </div>
              <div className="col-md-6">
                <div className="product_meta">
                  <p>Availability : <span>not in Stock</span> </p>
                  <p>Categories : <span>Vegetable Fruit</span></p>
                  <p>Tags : <span>fruit green health organic</span> </p>
                </div>
                <div className="product-dis">
                  <h3>Products Name</h3>
                  <hr />
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it to make a type specimen bookwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.  remaining essentially unchanged.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                  <div className="row">
                    <div className="col-2 pr-0">
                      <input type="number" className="input-text qty text" step={1} min={1} max={50} name="quantity" defaultValue={1} title="Qty" size={4} />
                    </div>
                    <div className="col-10">
                      <div>
                        <div className="row">
                          <div className="col-6">
                            <div className="add_to_cart"><a href="#" className>ADD TO CART</a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-12 mt-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                    <div className="pb-3 pt-3">
                      <div className="left-icon"> <a className="add-to-compare round-icon-btn" data-fancybox="gallery" data-src="#popup-2" href="javascript:;"> <i className="fa fa-eye" aria-hidden="true" /> </a> <a href="#" className="mr-3"><i className="fa fa-balance-scale" aria-hidden="true" /></a> </div>
                    </div>
                    <div className="col-md-12 mb-4 p-0">
                      <hr className="m-0 p-0" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/*bootstrap*/}
          {/* Footer */}
        </>
      )
    }
  }
  