@extends('user.layouts.index')
 @section('page_content')

 <link rel="stylesheet" href="{{asset ('css/productpage.css')}}">
 <link rel="stylesheet" href="{{ asset('css/home.css') }}">


            <!--PRODUCT PAGE BORDER-->
            <section class="product-page-top-border">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 about-h1">
                            <h1 >Product Page</h1>
                        </div>
                        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                            <p class="text-secondary home-bar-text"><img src="../slicing/My Shout About Us/icons8-home.svg" class="img-fluid text-center"> Home / <span>Pages /</span> <span class="blue">Product Page</span></p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- PRODUCT CATEGORIES-->
            <section class="product-categories">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 product-filter-col">
                            <div class="col-12">
                                <h3 ><a href="#" class="text-decoration-none text-break paddingBottom" data-toggle="dropdown" id="product-categories-dropdown">Product Categories <i class="fas fa-caret-down dropdown-icon"></i></a></h3>
                                <h3 ><a href="#" class="text-decoration-none text-break paddingBottom" data-toggle="dropdown" id="product-categories-drop-up">Product Categories <i class="fas fa-caret-down fa-rotate-180 dropdown-icon"></i></a></h3>
                                 <div id="product-categories-dropdown-items">
                                    {{-- <a class="dropdown-item" href="#">Link 1</a>
                                    <a class="dropdown-item" href="#">Link 2</a>
                                    <a class="dropdown-item" href="#">Link 3</a> --}}
                                 </div>
                                 <div class="row">
                                 <div class="col-12">
                                     <div class="progress hr-line">
                                         <div class="progress-bar"></div>
                                     </div>
                                 </div>
                             </div>
                             </div>
                             <div>
                                 @foreach($category as $c)
                            <div class="col-12 small-drop">
                                <small class="myc">{{ucwords($c->name)}}</small>
                            </div>
                            @endforeach

                            </div>

                            {{-- <div class="paddingBottom">
                                <button class="btn btn-sm btn-primary show-more" id="show-more-1">+ show more</button>
                                <button class="btn btn-sm btn-primary show-more" id="show-less-1">- show more</button>
                            </div> --}}

                            <br>
                            <br>
                            <div class="col-12">
                              {{-- <h3><a href="javascript:void(0)" class="text-decoration-none paddingBottom" id="filter-price-dropdown">Filter By Price <i class="fas fa-caret-down"></i></a></h3>
                              <h3><a href="javascript:void(0)" class="text-decoration-none paddingBottom" id="filter-price-drop-up" data-toggle="dropdown">Filter By Price <i class="fas fa-caret-down fa-rotate-180"></i></a></h3>
                                <div id="filter-price-menu">
                                    <a class="dropdown-item" href="#">Link 1</a>
                                    <a class="dropdown-item" href="#">Link 2</a>
                                    <a class="dropdown-item" href="#">Link 3</a>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="progress hr-line">
                                            <div class="progress-bar"></div>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="col-12 ">
                                {{-- <br>
                                @foreach ($product as $p)


                                <input type="radio" name="optradio">
                                 <span>
                                    {{$p->price}}
                                    </span>


                                 <br>
                                 @endforeach --}}

                                {{-- <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <input type="radio" name="optradio"> <span>2.4738</span><br>
                                <div id="show-more-items-2">
                                    <input type="radio" name="optradio"> <span>2.4738</span><br>
                                    <input type="radio" name="optradio"> <span>2.4738</span><br>
                                    <input type="radio" name="optradio"> <span>2.4738</span><br>
                                </div> --}}
                            </div>
                            <div class="col-12 paddingBottom">
                            {{-- <div class="row">
                                <button class="btn btn-sm btn-primary show-more" id="show-more-2">+ show more</button>
                                <button class="btn btn-sm btn-primary show-more" id="show-less-2">- show more</button>
                            </div> --}}
                            </div>
                            <br><br>
                            <div class="col-12">
                                {{-- <h3><a href="javascript:void(0)" class="text-decoration-none paddingBottom" id="colors-dropdown">Colors <i class="fas fa-caret-down "></i></a></h3>
                                <h3><a href="javascript:void(0)" class="text-decoration-none paddingBottom" id="colors-drop-up">Colors <i class="fas fa-caret-down fa-rotate-180"></i></a></h3> --}}
                                <div id="colors-menu">
                                    {{-- <a class="dropdown-item" href="#">Link 1</a>
                                    <a class="dropdown-item" href="#">Link 2</a>
                                    <a class="dropdown-item" href="#">Link 3</a> --}}
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div >

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12" >
                                <br>
                                {{-- @foreach ($color as $c )


                                <input type="radio" name="optradio"> <span>

                                   {{$c->name}}

                                </span>
                                <br>
                                @endforeach --}}
                                {{-- <input type="radio" name="optradio"> <span>BLUE (4)</span><br>
                                <input type="radio" name="optradio"> <span>DARK BLUE (5)</span><br>
                                <input type="radio" name="optradio"> <span>GREY (3)</span><br>
                                <input type="radio" name="optradio"> <span>RED (4)</span><br>
                                <div id="show-more-items-3">
                                    <input type="radio" name="optradio"> <span>RED (5)</span><br>
                                    <input type="radio" name="optradio"> <span>RED (6)</span><br>
                                    <input type="radio" name="optradio"> <span>RED (7)</span><br>
                                </div> --}}
                            </div>
                            {{-- <div class="col-12 paddingBottom">
                                <div class="row">
                                <button class="btn btn-sm btn-primary show-more" id="show-more-3">+ show more</button>
                                <button class="btn btn-sm btn-primary show-more" id="show-less-3">- show more</button>
                            </div>
                            </div> --}}
                            <br><br>
                            {{-- <div class="col-12">
                                <h3><a href="javascript:void(0)" class="text-decoration-none paddingBottom" id="brands-dropdown">Brands <i class="fas fa-caret-down "></i></a></h3>
                                <h3><a href="javascript:void(0)" class="text-decoration-none paddingBottom" id="brands-drop-up">Brands <i class="fas fa-caret-down fa-rotate-180"></i></a></h3>
                                <div id="brands-menu"> --}}
                                    {{-- <a class="dropdown-item" href="#">Link 1</a>
                                    <a class="dropdown-item" href="#">Link 2</a>
                                    <a class="dropdown-item" href="#">Link 3</a> --}}
                                {{-- </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="progress hr-line">
                                            <div class="progress-bar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- <div class="col-12" >
                                <br>
                                <input type="radio" name="optradio"> <span>Easy (45)</span><br>
                                <input type="radio" name="optradio"> <span>Costaco (25)</span><br>
                                <input type="radio" name="optradio"> <span>Arong (5)</span><br>
                                <input type="radio" name="optradio"> <span>Lotto (3)</span><br>
                                <input type="radio" name="optradio"> <span>Hema (4)</span><br>
                            </div>
                            <div class="col-12 " id="show-more-items-4">
                                <input type="radio" name="optradio"> <span>Easy (45)</span><br>
                                <input type="radio" name="optradio"> <span>Costaco (25)</span><br>
                                <input type="radio" name="optradio"> <span>Arong (5)</span><br>
                                <input type="radio" name="optradio"> <span>Lotto (3)</span><br>
                                <input type="radio" name="optradio"> <span>Hema (4)</span><br>
                                <input type="radio" name="optradio"> <span>Hema (4)</span><br>
                                <input type="radio" name="optradio"> <span>Hema (4)</span><br>
                                <input type="radio" name="optradio"> <span>Hema (4)</span><br>
                            </div> --}}
                            {{-- <div class="col-12 paddingBottom">
                                <div class="row">
                                <button class="btn btn-sm btn-primary show-more" id="show-more-4">+ show more</button>
                                <button class="btn btn-sm btn-primary show-more" id="show-less-4">- show more</button>
                            </div>
                            </div> --}}
                        </div>
                        <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                            {{-- <div class="col-12 bar">
                                <div class="row">
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-3">
                                        <h5 class="all-categories-h5">All Category</h5>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-3 show-items-no">
                                       <strong class="text-secondary bar-show-text">Show:</strong>
                                       <form action="/action_page.php" class="form-group">
                                        <select id=" exampleFormControlSelect1" name="choose foam usage" class="form-control show-selector dropdown-input-field">
                                          <option value="volvo">24</option>
                                          <option value="saab">5</option>
                                          <option value="fiat">10</option>
                                          <option value="audi">2</option>
                                        </select>
                                      </form>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-3">
                                        <form action="/action_page.php" class="form-group">
                                            <select id=" exampleFormControlSelect1" name="choose foam usage" class="form-control defaul-sorting-selector dropdown-input-field">
                                              <option value="volvo">Defaul sorting</option>
                                              <option value="saab">item 1</option>
                                              <option value="fiat">item 2</option>
                                              <option value="audi">item 3</option>
                                            </select>
                                          </form>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-3 grid-and-list-img">
                                       <a  id="grid_icon" class="grid-a"><img src="../slicing/my shout product  page/grid.svg" class="grid"></a>
                                       <a id="list_icon"><img src="../slicing/my shout product  page/list.svg" class="list"></a>
                                    </div>
                                </div>
                            </div> --}}
                            <section class="product-section grid-section" id="grid-view">
                            <div class="col-12 product-images-col1">
                                <div class="row">
                                    @foreach ($product as $p )
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">


                                        <div class="row">


                                            <img src={{$p->avatar }} class="myimg">



                                        <div class="col-12 padding-t">
                                            <p class="text-secondary">{{$p->name }}</p>
                                        </div>
                                        <div class="col-12 pad-t">
                                            <h5>
                                                @if( $p->promotion)
                                                $ {{$point_price * $p->promotion->value }}
                                                @else
                                                ${{$point_price * $p->price }}
                                                @endif
                                                @if( $p->promotion)
                                                    <del>${{$point_price * $p->price }}</del>
                                                @endif
                                            </h5>
                                        </div>
                                        <div class="col-12 pad-t2 pad-t2-for-responsive" style="max-width: 119px;">
                                            <a href="{{asset('user/productdetailpage/'.$p->id)}}" class="myorder" type="button">
                                                <small>ORDER NOW</small>
                                            </a>
                                        </div>

                                        </div>


                                    </div>
                                    @endforeach

                                </div>
                            </div>
                                    {{-- <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 ">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>

                            {{-- <div class="col-12 product-images-col2">
                                <div class="row">
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-1.jpg" class="img-fluid">
                                        <div class="row">
                                        <div class="col-12 padding-t">
                                            <p class="text-secondary">LOREM IPSUM</p>
                                        </div>
                                        <div class="col-12 pad-t">
                                            <h5>$ 45.00 <del>$ 98.00</del></h5>
                                        </div>
                                        <div class="col-12 pad-t2 pad-t2-for-responsive">
                                            <small>ORDER NOW</small>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 ">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
{{--
                            <div class="col-12 product-images-col2">
                                <div class="row">
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-1.jpg" class="img-fluid">
                                        <div class="row">
                                        <div class="col-12 padding-t">
                                            <p class="text-secondary">LOREM IPSUM</p>
                                        </div>
                                        <div class="col-12 pad-t">
                                            <h5>$ 45.00 <del>$ 98.00</del></h5>
                                        </div>
                                        <div class="col-12 pad-t2 pad-t2-for-responsive">
                                            <small>ORDER NOW</small>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}

                            {{-- <div class="col-12 product-images-col2">
                                <div class="row">
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-1.jpg" class="img-fluid">
                                        <div class="row">
                                        <div class="col-12 padding-t">
                                            <p class="text-secondary">LOREM IPSUM</p>
                                        </div>
                                        <div class="col-12 pad-t">
                                            <h5>$ 45.00 <del>$ 98.00</del></h5>
                                        </div>
                                        <div class="col-12 pad-t2 pad-t2-for-responsive">
                                            <small>ORDER NOW</small>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 product-images-col2">
                                <div class="row">
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-1.jpg" class="img-fluid">
                                        <div class="row">
                                        <div class="col-12 padding-t">
                                            <p class="text-secondary">LOREM IPSUM</p>
                                        </div>
                                        <div class="col-12 pad-t">
                                            <h5>$ 45.00 <del>$ 98.00</del></h5>
                                        </div>
                                        <div class="col-12 pad-t2 pad-t2-for-responsive">
                                            <small>ORDER NOW</small>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2 pad-t2-for-responsive">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 image-center-in-responsive">
                                        <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                        <div class="row">
                                            <div class="col-12 padding-t">
                                                <p class="text-secondary">LOREM IPSUM</p>
                                            </div>
                                            <div class="col-12 pad-t">
                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                            </div>
                                            <div class="col-12 pad-t2">
                                                <small>ORDER NOW</small>
                                            </div>
                                        </div> --}}
                                    {{-- </div>
                                </div> --}}
                            {{-- </div> --}}
                            </section>

                            <section class="product-section list-section" id="list-view">
                                <div class="col-12 ">
                                    <div class="row product-images-row list-product-border">
                                        <div class="col-sm-12 col-lg-4 list-product-image">
                                            <img src="../slicing/my shout product  page/gift-1.jpg" class="img-fluid">
                                        </div>
                                            <div class="col-12 col-lg-8">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <p class="text-secondary">LOREM IPSUM</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                    </div>
                                                    <div class="col-12 list-order-now">
                                                        <small>ORDER NOW</small>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row product-images-row list-product-border">
                                            <div class="col-sm-12 col-lg-4 list-product-image">
                                                <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                            </div>
                                                <div class="col-12 col-lg-8">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <p class="text-secondary">LOREM IPSUM</p>
                                                        </div>
                                                        <div class="col-12">
                                                            <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                        </div>
                                                        <div class="col-12 list-order-now">
                                                            <small>ORDER NOW</small>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row product-images-row list-product-border">
                                                <div class="col-sm-12 col-lg-4 list-product-image">
                                                    <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                                </div>
                                                    <div class="col-12 col-lg-8">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <p class="text-secondary">LOREM IPSUM</p>
                                                            </div>
                                                            <div class="col-12">
                                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                            </div>
                                                            <div class="col-12 list-order-now">
                                                                <small>ORDER NOW</small>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="row product-images-row list-product-border">
                                                <div class="col-sm-12 col-lg-4 list-product-image">
                                                    <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                                </div>
                                                    <div class="col-12 col-lg-8">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <p class="text-secondary">LOREM IPSUM</p>
                                                            </div>
                                                            <div class="col-12">
                                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                            </div>
                                                            <div class="col-12 list-order-now">
                                                                <small>ORDER NOW</small>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                    </div>

                                    <div class="col-12 ">
                                        <div class="row product-images-row list-product-border">
                                            <div class="col-sm-12 col-lg-4 list-product-image">
                                                <img src="../slicing/my shout product  page/gift-1.jpg" class="img-fluid">
                                            </div>
                                                <div class="col-12 col-lg-8">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <p class="text-secondary">LOREM IPSUM</p>
                                                        </div>
                                                        <div class="col-12">
                                                            <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                        </div>
                                                        <div class="col-12 list-order-now">
                                                            <small>ORDER NOW</small>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row product-images-row list-product-border">
                                                <div class="col-sm-12 col-lg-4 list-product-image">
                                                    <img src="../slicing/my shout product  page/gift-2.jpg" class="img-fluid">
                                                </div>
                                                    <div class="col-12 col-lg-8">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <p class="text-secondary">LOREM IPSUM</p>
                                                            </div>
                                                            <div class="col-12">
                                                                <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                            </div>
                                                            <div class="col-12 list-order-now">
                                                                <small>ORDER NOW</small>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="row product-images-row list-product-border">
                                                    <div class="col-sm-12 col-lg-4 list-product-image">
                                                        <img src="../slicing/my shout product  page/gift-3.jpg" class="img-fluid">
                                                    </div>
                                                        <div class="col-12 col-lg-8">
                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <p class="text-secondary">LOREM IPSUM</p>
                                                                </div>
                                                                <div class="col-12">
                                                                    <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                                </div>
                                                                <div class="col-12 list-order-now">
                                                                    <small>ORDER NOW</small>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="row product-images-row list-product-border">
                                                    <div class="col-sm-12 col-lg-4 list-product-image">
                                                        <img src="../slicing/my shout product  page/gift-4.jpg" class="img-fluid">
                                                    </div>
                                                        <div class="col-12 col-lg-8">
                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <p class="text-secondary">LOREM IPSUM</p>
                                                                </div>
                                                                <div class="col-12">
                                                                    <h5>$ 45.00 <del>$ 98.00</del></h5>
                                                                </div>
                                                                <div class="col-12 list-order-now">
                                                                    <small>ORDER NOW</small>
                                                                </div>
                                                            </div>
                                                        </div>

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


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


   @endsection