
<div class="container quickView-container">
    <div class="quickView-content">
        <div class="row">
            <div class="col-lg-7 col-md-6">
                <div class="row">
                    <div class="product-left">
                        <a href="#one" class="carousel-dot active">
                            <img src="/public/front/assets/images/popup/quickView/1.jpg" alt="Quickview 1">
                        </a>
                        <a href="#two" class="carousel-dot">
                            <img src="/public/front/assets/images/popup/quickView/2.jpg" alt="Quickview 2">
                        </a>
                        <a href="#three" class="carousel-dot">
                            <img src="/public/front/assets/images/popup/quickView/3.jpg" alt="Quickview 2">
                        </a>
                        <a href="#four" class="carousel-dot">
                            <img src="/public/front/assets/images/popup/quickView/4.jpg" alt="Quickview 2">
                        </a>
                    </div>
                    <div class="product-right">
                        <div class="owl-carousel owl-theme owl-nav-inside owl-light mb-0" data-toggle="owl" data-owl-options='{
                             "dots": false,
                             "nav": false, 
                             "URLhashListener": true,
                             "responsive": {
                             "900": {
                             "nav": true,
                             "dots": true
                             }
                             }
                             }'>
                            <div class="intro-slide" data-hash="one">
                                <img src="/public/front/assets/images/popup/quickView/1.jpg" alt="Image Desc">
                                <a href="popup/fullscreen.html" class="btn-fullscreen">
                                    <i class="icon-arrows"></i>
                                </a>
                            </div><!-- End .intro-slide -->

                            <div class="intro-slide" data-hash="two">
                                <img src="/public/front/assets/images/popup/quickView/2.jpg" alt="Image Desc">
                                <a href="popup/fullscreen.html" class="btn-fullscreen">
                                    <i class="icon-arrows"></i>
                                </a>
                            </div><!-- End .intro-slide -->

                            <div class="intro-slide" data-hash="three">
                                <img src="/public/front/assets/images/popup/quickView/3.jpg" alt="Image Desc">
                                <a href="popup/fullscreen.html" class="btn-fullscreen">
                                    <i class="icon-arrows"></i>
                                </a>
                            </div><!-- End .intro-slide -->

                            <div class="intro-slide" data-hash="four">
                                <img src="/public/front/assets/images/popup/quickView/4.jpg" alt="Image Desc">
                                <a href="popup/fullscreen.html" class="btn-fullscreen">
                                    <i class="icon-arrows"></i>
                                </a>
                            </div><!-- End .intro-slide -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 col-md-6">
                <h2 class="product-title">Linen-blend dress</h2>
                <h3 class="product-price">$60.00</h3>

                <div class="ratings-container">
                    <div class="ratings">
                        <div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
                    </div><!-- End .ratings -->
                    <span class="ratings-text">( 2 Reviews )</span>
                </div><!-- End .rating-container -->

                <p class="product-txt">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue.</p>


                <div class="details-filter-row product-nav product-nav-thumbs">
                    <label for="size">color:</label>
                    <a href="#" class="active">
                        <img src="/public/front/assets/images/demos/demo-6/products/product-1-thumb.jpg" alt="product desc">
                    </a>
                    <a href="#">
                        <img src="/public/front/assets/images/demos/demo-6/products/product-1-2-thumb.jpg" alt="product desc">
                    </a>
                </div><!-- End .product-nav -->

                <div class="details-filter-row details-row-size">
                    <label for="size">Size:</label>
                    <div class="select-custom">
                        <select name="size" id="size" class="form-control">
                            <option value="#" selected="selected">Select a size</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                            <option value="l">Large</option>
                            <option value="xl">Extra Large</option>
                        </select>
                    </div><!-- End .select-custom -->
                </div>


                <div class="details-filter-row details-row-size">
                    <label for="qty">Qty:</label>
                    <div class="product-details-quantity">
                        <input type="number" id="qty" class="form-control" value="1" min="1" max="10" step="1" data-decimals="0" required>
                    </div><!-- End .product-details-quantity -->
                </div><!-- End .details-filter-row -->

                <div class="product-details-action">
                    <div class="details-action-wrapper">
                        <a href="#" class="btn-product btn-wishlist" title="Wishlist"><span>Add to Wishlist</span></a>
                        <a href="#" class="btn-product btn-compare" title="Compare"><span>Add to Compare</span></a>
                    </div><!-- End .details-action-wrapper -->
                    <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
                </div>

                <div class="product-details-footer">
                    <div class="product-cat">
                        <span>Category:</span>
                        <a href="#">Women</a>,
                        <a href="#">Dresses</a>,
                        <a href="#">Yellow</a>
                    </div><!-- End .product-cat -->

                    <div class="social-icons social-icons-sm">
                        <span class="social-label">Share:</span>
                        <a href="#" class="social-icon" title="Facebook" target="_blank"><i class="icon-facebook-f"></i></a>
                        <a href="#" class="social-icon" title="Twitter" target="_blank"><i class="icon-twitter"></i></a>
                        <a href="#" class="social-icon" title="Instagram" target="_blank"><i class="icon-instagram"></i></a>
                        <a href="#" class="social-icon" title="Pinterest" target="_blank"><i class="icon-pinterest"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>