<?php include("header.php")?>
<!-- banner -->
<!--<div class="banner10" id="home1">-->
<!--    <div class="container">-->
<!--        <h2>Single Page</h2>-->
<!--    </div>-->
<!--</div>-->
<!-- //banner -->

<!-- breadcrumbs -->
<!--<div class="breadcrumb_dress">-->
<!--    <div class="container">-->
<!--        <ul>-->
<!--            <li><a href="index.php"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a> <i>/</i></li>-->
<!--            <li>Single Page</li>-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->
<!-- //breadcrumbs -->

<!-- single -->
<div class="single">
    <div class="container">
        <div class="col-md-4 single-left">
            <div class="flexslider">
                <ul class="slides">
                    <li data-thumb="images/single/1.png">
                        <div class="thumb-image"> <img src="images/single/1.png" data-imagezoom="true" class="img-responsive"> </div>
                    </li>
                    <li data-thumb="images/single/2.png">
                        <div class="thumb-image"> <img src="images/single/2.png" data-imagezoom="true" class="img-responsive"> </div>
                    </li>
                    <li data-thumb="images/single/3.png">
                        <div class="thumb-image"> <img src="images/single/3.png" data-imagezoom="true" class="img-responsive"> </div>
                    </li>
                </ul>
            </div>
            <!-- flixslider -->
            <script defer src="js/jquery.flexslider.js"></script>
            <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
            <script>
                // Can also be used with $(document).ready()
                $(window).load(function() {
                    $('.flexslider').flexslider({
                        animation: "slide",
                        controlNav: "thumbnails"
                    });
                });

            </script>
            <!-- flixslider -->
            <!-- zooming-effect -->
            <script src="js/imagezoom.js"></script>
            <!-- //zooming-effect -->
        </div>
        <div class="col-md-8 single-right">
            <h3>Lorem Ipsum</h3>
            <div class="additional_info_sub_grid_rightr">
                                <div class="rating">
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="clearfix"> </div>
                                </div>
                            </div>
            <div class="description">
                <h5><i>Lorem Ipsum</i></h5>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                </p>
            </div>
            <div class="color-quality">
                <div class="color-quality-left">
                    <h5>Color : </h5>
                    <ul>
                        <li><a href="#" class="red"><span></span>Red</a></li>
                        <li><a href="#" class="brown"><span></span>Yellow</a></li>
                        <li><a href="#" class="purple"><span></span>Purple</a></li>
                        <li><a href="#" class="gray"><span></span>Violet</a></li>
                    </ul>
                </div>
                <div class="color-quality-right">
                    <h5>Quality :</h5>
                    <div class="quantity">
                        <div class="quantity-select">
                            <div class="entry value-minus1">&nbsp;</div>
                            <div class="entry value1"><span>1</span></div>
                            <div class="entry value-plus1 active">&nbsp;</div>
                        </div>
                    </div>
                    <!--quantity-->
                    <script>
                        $('.value-plus1').on('click', function() {
                            var divUpd = $(this).parent().find('.value1'),
                                newVal = parseInt(divUpd.text(), 10) + 1;
                            divUpd.text(newVal);
                        });

                        $('.value-minus1').on('click', function() {
                            var divUpd = $(this).parent().find('.value1'),
                                newVal = parseInt(divUpd.text(), 10) - 1;
                            if (newVal >= 1) divUpd.text(newVal);
                        });

                    </script>
                    <!--quantity-->

                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="occasional">
                <h5>Material :</h5>
                <div class="colr ert">
                    <div class="check">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i>Nylon</label>
                    </div>
                </div>
                <div class="colr">
                    <div class="check">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i> </i>Wool</label>
                    </div>
                </div>
                <div class="colr">
                    <div class="check">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i> </i>Satin</label>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="simpleCart_shelfItem">
                <p><span>Rs.320</span> <i class="item_price">Rs.250</i></p>
                <p><a class="item_add" href="#">Add to cart</a></p>
            </div>

        </div>
        <div class="clearfix"> </div>
    </div>
</div>

<div class="additional_info">
    <div class="container">
        <div class="sap_tabs">
            <div id="horizontalTab1" style="display: block; width: 100%; margin: 0px;">
                <ul>
                    <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Product Information</span></li>
                    <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Reviews</span></li>
                </ul>
                <div class="tab-1 resp-tab-content additional_info_grid" aria-labelledby="tab_item-0">
                    <h3>Lorem Ipsum</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                    </p>
                </div>

                <div class="tab-2 resp-tab-content additional_info_grid" aria-labelledby="tab_item-1">
                    <h4>(2) Reviews</h4>
                    <div class="additional_info_sub_grids">
                        <div class="col-xs-2 additional_info_sub_grid_left">
                            <img src="images/1.png" alt=" " class="img-responsive" />
                        </div>
                        <div class="col-xs-10 additional_info_sub_grid_right">
                            <div class="additional_info_sub_grid_rightl">
                                <a href="single.html">Lorem Ipsum</a>
                                <h5>April 03, 2016.</h5>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                                </p>
                            </div>
                            <div class="additional_info_sub_grid_rightr">
                                <div class="rating">
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="clearfix"> </div>
                                </div>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="additional_info_sub_grids">
                        <div class="col-xs-2 additional_info_sub_grid_left">
                            <img src="images/2.png" alt=" " class="img-responsive" />
                        </div>
                        <div class="col-xs-10 additional_info_sub_grid_right">
                            <div class="additional_info_sub_grid_rightl">
                                <a href="single.html">Lorem Ipsum</a>
                                <h5>April 04, 2016.</h5>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                                </p>
                            </div>
                            <div class="additional_info_sub_grid_rightr">
                                <div class="rating">
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star-.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="rating-left">
                                        <img src="images/star.png" alt=" " class="img-responsive">
                                    </div>
                                    <div class="clearfix"> </div>
                                </div>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="review_grids">
                        <h5>Add A Review</h5>
                        <form action="#" method="post">
                            <input type="text" name="Name" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
                            <input type="email" name="Email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
                            <input type="text" name="Telephone" value="Telephone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Telephone';}" required="">
                            <textarea name="Review" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Add Your Review';}" required="">Add Your Review</textarea>
                            <input type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#horizontalTab1').easyResponsiveTabs({
                    type: 'default', //Types: default, vertical, accordion           
                    width: 'auto', //auto or any width like 600px
                    fit: true // 100% fit in a container
                });
            });

        </script>
    </div>
</div>
<?php include("related-products.php")?>

<?php include("footer.php")?>
