@extends('user.layouts.index')
  @section('page_content')
 
 <!-- CLOTHING SECTION-->
    <div class="container clothing-section">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <h1>CLOTHING</h1>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <h3 class="text-right"><a class="text-dark ">SEE MORE CATEGORIES</a></h3>
            </div>
        </div>
        <div class="row clothingImgs">
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 img-col img-col-sm text-center">
                <img src="{{asset('slicing/home-page-silicing/clothing-1.jpg')}}" class="img-fluid text-center" >
                <div class="col-12 ipsum-text">
                    <h4>LOREM IPSUM<br>
                       <span class="sm">LOREM IPSUM</span> 
                    </h4>
                </div>
                <div class="col-12 order-now-text">
                    <p>ORDER NOW</p>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 img-col img-colSM text-center">
                <img src="{{asset('slicing/home-page-silicing/clothing-2.jpg')}}" class="text-center img-fluid">
                <div class="col-12 ipsum-text ipsum-text-sm">
                    <h4>LOREM IPSUM<br>
                       <span class="sm">LOREM IPSUM</span> 
                    </h4>
                </div>
                <div class="col-12 order-now-text order-now-text-sm">
                    <p>ORDER NOW</p>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 img-col img-colSM text-center">
                <img src="{{asset('slicing/home-page-silicing/clothing-4.jpg')}}" class="text-center img-fluid">
                <div class="col-12 ipsum-text ipsum-text-sm">
                    <h4>LOREM IPSUM<br>
                       <span class="sm">LOREM IPSUM</span> 
                    </h4>
                </div>
                <div class="col-12 order-now-text order-now-text-sm">
                    <p>ORDER NOW</p>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 empty">
                
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 img-col img-colSM text-center">
                <img src="{{asset('slicing/home-page-silicing/clothing-3.jpg')}}" class="text-center clothing-xl img-fluid">
                <div class="col-12 ipsum-text ipsum-text-2 ipsum-text-sm">
                    <h4>LOREM IPSUM<br>
                       <span class="sm">LOREM IPSUM</span> 
                    </h4>
                </div>
                <div class="col-12 order-now-text order-now-text-2 order-now-text-sm">
                    <p>ORDER NOW</p>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 img-col img-colSM text-center">
                <img src="{{asset('slicing/home-page-silicing/clothing-5.jpg')}}" class="text-center clothing-xl img-fluid">
                <div class="col-12 ipsum-text ipsum-text-2 ipsum-text-sm">
                    <h4>LOREM IPSUM<br>
                       <span class="sm">LOREM IPSUM</span> 
                    </h4>
                </div>
                <div class="col-12 order-now-text order-now-text-2 order-now-text-sm">
                    <p>ORDER NOW</p>
                </div>
            </div>
        </div>
    </div>

    <!-- TOYS & COLLECTABLES-->
    <div class="container toys-and-collectables">
        <div class="row">
            <div class="col-12 text-center">
                <h1>TOYS & COLLECTABLES</h1>
            </div>
        </div>
        <div class="row toys-imgs-row">
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/toys-&-collectables-1.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/toys-&-collectables-2.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order-2">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/toys-&-collectables-3.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order-3">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/toys-&-collectables-4.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12">
                   <small class="order-4">ORDER NOW</small>
                </div>
            </div>
        </div>
    </div>

    <!-- SPECIAL DEALS-->
    <div class="jumbotron jumbotron-fluid special-deals">
    </div>

    <!-- GIFTS-->
    <div class="container gifts toys-and-collectables">
        <div class="row">
            <div class="col-12">
                <h1>GIFTS
                    <hr>
                </h1>
            </div>
        </div>
        <div class="row toys-imgs-row">
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-1.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-2.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order-2">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-3.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order-3">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-4.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12">
                   <small class="order-4">ORDER NOW</small>
                </div>
            </div>
        </div>
        <div class="row toys-imgs-row padding-sm">
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-6.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-7.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order-2">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-8.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12 ">
                   <small class="order-3">ORDER NOW</small>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 toys-img-col text-center">
                <img src="{{asset('slicing/home-page-silicing/gifts-9.jpg')}}" class="img-fluid text-center">
                <div class="col-12">
                    <h5 class="text-secondary">LOREM IPSUM</h5>
                </div>
                <div class="col-12">
                    <h4>$ 45.00 <del class="text-secondary">$ 98.00</del></h4>
                </div>
                <div class="col-12">
                   <small class="order-4">ORDER NOW</small>
                </div>
            </div>
        </div>
    </div>

    <!-- BOOKS-->
    <div class="container books">
        <div class="row">
            <div class="col-12">
                <h1>BOOKS
                    <hr>
                </h1>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-1.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                   <b>LOREM IPSUM</b>
                </div>
                <div class="col-12 red">
                   <b>$ 27.50</b>
                </div>
                <br>
                <div class="col-12">
                    <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                </div>
                <div class="col-12 sold">
                    <span class=" text-secondary">65 SOLD</span>
                </div>
                <div class="col-12">
                    <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-2.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                    <b>LOREM IPSUM</b>
                 </div>
                 <div class="col-12 red">
                    <b>$ 27.50</b>
                 </div>
                 <br>
                 <div class="col-12">
                     <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                 </div>
                 <div class="col-12 sold">
                     <span class=" text-secondary">65 SOLD</span>
                 </div>
                 <div class="col-12">
                     <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                 </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-3.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                    <b>LOREM IPSUM</b>
                 </div>
                 <div class="col-12 red">
                    <b>$ 27.50</b>
                 </div>
                 <br>
                 <div class="col-12">
                     <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                 </div>
                 <div class="col-12 sold">
                     <span class=" text-secondary">65 SOLD</span>
                 </div>
                 <div class="col-12">
                     <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                 </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-4.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                   <b>LOREM IPSUM</b>
                </div>
                <div class="col-12 red">
                   <b>$ 27.50</b>
                </div>
                <br>
                <div class="col-12">
                    <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                </div>
                <div class="col-12 sold">
                    <span class=" text-secondary">65 SOLD</span>
                </div>
                <div class="col-12">
                    <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-5.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                    <b>LOREM IPSUM</b>
                 </div>
                 <div class="col-12 red">
                    <b>$ 27.50</b>
                 </div>
                 <br>
                 <div class="col-12">
                     <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                 </div>
                 <div class="col-12 sold">
                     <span class=" text-secondary">65 SOLD</span>
                 </div>
                 <div class="col-12">
                     <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                 </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-6.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                    <b>LOREM IPSUM</b>
                 </div>
                 <div class="col-12 red">
                    <b>$ 27.50</b>
                 </div>
                 <br>
                 <div class="col-12">
                     <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                 </div>
                 <div class="col-12 sold">
                     <span class=" text-secondary">65 SOLD</span>
                 </div>
                 <div class="col-12">
                     <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                 </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-7.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                   <b>LOREM IPSUM</b>
                </div>
                <div class="col-12 red">
                   <b>$ 27.50</b>
                </div>
                <br>
                <div class="col-12">
                    <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                </div>
                <div class="col-12 sold">
                    <span class=" text-secondary">65 SOLD</span>
                </div>
                <div class="col-12">
                    <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-8.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                    <b>LOREM IPSUM</b>
                 </div>
                 <div class="col-12 red">
                    <b>$ 27.50</b>
                 </div>
                 <br>
                 <div class="col-12">
                     <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                 </div>
                 <div class="col-12 sold">
                     <span class=" text-secondary">65 SOLD</span>
                 </div>
                 <div class="col-12">
                     <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                 </div>
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <img src="{{asset('slicing/home-page-silicing/books-9.jpg')}}" class="img-fluid text-center">
            </div>
            <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 text-center booksCol">
                <div class="col-12">
                    <b>LOREM IPSUM</b>
                 </div>
                 <div class="col-12 red">
                    <b>$ 27.50</b>
                 </div>
                 <br>
                 <div class="col-12">
                     <span class="fa fa-star checked text-secondary"> <span class="text-secondary">4.6 (563)</span></span>
                 </div>
                 <div class="col-12 sold">
                     <span class=" text-secondary">65 SOLD</span>
                 </div>
                 <div class="col-12">
                     <button class="btn btn-sm text-secondary border-secondary">ADD TO CART</button>
                 </div>
            </div>
        </div>
    </div>

    @endsection