<?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/products/detail-helmet/product1.png">
                        <div class="thumb-image"> <img src="images/products/detail-helmet/product1.png" data-imagezoom="true" class="img-responsive"> </div>
                    </li>
                    <li data-thumb="images/products/detail-helmet/product2.png">
                        <div class="thumb-image"> <img src="images/products/detail-helmet/product2.png" data-imagezoom="true" class="img-responsive"> </div>
                    </li>
                    <li data-thumb="images/products/detail-helmet/product3.png">
                        <div class="thumb-image"> <img src="images/products/detail-helmet/product3.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>Helmet</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>Helmet</i></h5>
                <p>
                Stay safe and stylish on the field with our top-of-the-line cricket helmet. Engineered to provide maximum protection and comfort, this helmet is essential for any cricketer aiming to perform with confidence. Whether you're facing fast bowlers or aggressive shots, our cricket helmet ensures your head stays protected while you focus on your game.
                </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>Features</h3>
                    <p>
                    <ul>
                        <li>Lightweight design ensures ease of movement and comfort during long innings.
                        </li>
                        <li>Constructed from robust, high-impact resistant materials for superior protection against fast deliveries.</li>
                        <li>Prevents overheating and ensures fresh air circulation.</li>
                        <li>Meets or exceeds all relevant safety standards for cricket helmets.</li>
                        <li>Provides peace of mind knowing you are using a helmet tested for maximum protection.</li>
                    </ul>
                    </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") ?>