<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">


    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/full-slider.css" rel="stylesheet">
<!--     <link href="css/slider.css" rel="stylesheet">
 -->    <link href="css/custom.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">

</head>

<body>
    <div style="text-align: center; position: fixed; top: 0; right: 0; width: 100%; z-index: 1;">
        <a id="menu-toggle"  class="btn btn-dark btn-lg toggle " style="display: inline-block;">
         <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
        </a>
    </div>

    <div id="myNav" class="overlay">
      
        <p>&nbsp;</p>
        <div class="search-bar" style="z-index:6;">
            <input type="text" placeholder="Search" class="searchbar"> 
            <a href="#" style="display: inline-block;"><i class="fa fa-search"></i></a>
            <a href="javascript:void(0)" style="display: inline-block;" onclick="closeNav()">&times;</a>
        </div>
      
      
      <div class="overlay-content">
                    
        <div class="col-sm-6 " style="height: 100%; z-index: 5;">
            <div style="background-color:#167e63; height: 100%; ">
                <div class="" style="display: table; width: 100%; height: 100%;">
                    <div class="text-center setside" style="display: table-cell; vertical-align: middle; max-width: 100vw;">
                        <div class="text-right">
                           <!--  <ul class="an birderfirst wordone nav nav-stacked" style="z-index: 9999; position:relative;">
                                <li>
                                    <div class=" btn-group buttono">
                                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="color:white"><b>
                                            SOFA COLLECTION</b>
                                        <i class="icon icon-caret-right"></i>
                                      </a>
                                      <ul class="dropdown-menu" style="background-color:white;">
                                        <li><a href="product_sofa.html" style="color:black"><b>Nordic</b></a></li>
                                        <li><a href="product_sofa.html" style="color:black"><b>Comtemporary</b></a></li>
                                        <li><a href="product_sofa.html" style="color:black"><b>Motion</b></a></li>
                                        <li><a href="product_sofa.html" style="color:black"><b>Dippity Leather</b></a></li>
                                      </ul>
                                </div>
                              </li>
                            </ul>
                           
                            <a class="an wordtwo birderfirst" href="product_dining.html" style="color:white"><b>BEDDING</b></a>
                            <a class="an wordthree birderfirst" href="product_dining.html" style="color:white"><b>DINING</b></a> -->

                            <ul class="an birderfirst wordone nav nav-stacked" style="z-index: 9999; position:relative;">
                                <li>
                                    <div class=" btn-group buttono">
                                        <a class="btn dropdown-toggle" data-toggle="dropdown" data-toggle="tooltip" title="Coming Soon" href="#"><b>
                                            SOFA COLLECTION</b>
                                        <i class="icon icon-caret-right"></i>
                                      </a>
                                      <ul class="dropdown-menu" style="background-color:white;">
                                        <li><a href="#" data-toggle="tooltip" title="Coming Soon" style="color:#818181"><b>Nordic Series </b></a></li>
                                        <li><a href="#" data-toggle="tooltip" title="Coming Soon" style="color:#818181"><b>Contemporary Series</b></a></li>
                                        <li><a href="#" data-toggle="tooltip" title="Coming Soon" style="color:#818181"><b>Luxury Leather Series</b></a></li>
                                      </ul>
                                </div>
                              </li>
                            </ul>
                            <a class="an wordtwo birderfirst" data-toggle="tooltip" title="Coming Soon"href="#"><b>BEDDING</b></a>
                            <a class="an wordthree birderfirst"data-toggle="tooltip" title="Coming Soon" href="#"><b>DINING</b></a>
                                


                            <a class="an wordfour birderfirst" href="event.html" style="color:white"><b>EVENT</b></a>
                            <a class="an wordfive birderfirst" href="about_us.html" style="color:white"><b>ABOUT US</b></a>
                            <a class="an wordsix birderfirst" href="contact.php" style="color:white"><b>CONTACT US</b></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <div class="col-sm-6" style="height: 100%">
            <div class="" style="display: table; width: 100%; height: 100%;">
                <div style="display: table-cell; vertical-align: middle">
                    <img src="img/home_menu_logo.png" class="an first-img img-responsive" style="display: inline; padding: 10px; z-index: 1;">
                    <a href="https://www.facebook.com/casamoderno.my" target="_blank" class="an first-img" style="display: inline-block;  z-index: 1;"><img src="img/home_socialmedia_button_facebook.png"> Facebook </a> 
                    <a href="http://imgaddict.com/user/casamoderno_my/3426840538/" target="_blank" class="an first-img" style="display: inline-block;  z-index: 1;"><img src="img/home_socialmedia_button_instagram.png"> Instagram </a>
                </div>
            </div>
        </div>
     </div>
    </div>
    


    <div class="container-fluid hello2 contactedit">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-xs-12">
                    <img class="img-responsive" src="img/PI/product page detail_product.png" alt="">
                    </div>
                </div>
            </div>        
   	</div>
   
    <div class="hello4">


           <div class="container-fluid text-center">
                <div class="col-lg-2 col-lg-offset-3 col-md-4 col-sm-4 col-xs-4 hello6 knockout-around">
                <!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"> -->
                	<img src="img/PI/product-page-detail_product_detail_2.png" class="img-responsive" data-toggle="modal" data-target="#myModal" style="display:inline-block;" data-toggle="modal" data-target="#myModal">
               
	                <div class="modal fade" id="myModal" role="dialog">
	    				<div class="modal-dialog modal-sm">
	      				<!-- Modal content-->
	      					<div class="modal-content" style="margin-top: 200px;">
	        					<div class="modal-header">
	          						<button type="button" class="close" data-dismiss="modal">&times;</button>
	          						<img src="img/PI/product-page-detail_product_detail_2.png" class="img-responsive" style="display:inline-block; width:1800px; height: auto;">
	        					</div>
	        				</div>
	        			</div>
	        		</div>
	            </div>

                <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4 hello5">
                	<img src="img/PI/product-page-detail_product_detail_1.png" class="img-responsive" data-toggle="modal" data-target="#myModal2" style="display:inline-block;" data-toggle="modal" data-target="#myModal2">

	                <div class="modal fade" id="myModal2" role="dialog">
	    				<div class="modal-dialog modal-sm">
	    
	      				<!-- Modal content-->
	      					<div class="modal-content" style="margin-top: 200px;">
	        					<div class="modal-header">
	          						<button type="button" class="close" data-dismiss="modal">&times;</button>
	          						<img src="img/PI/product-page-detail_product_detail_1.png" class="img-responsive" style="display:inline-block; width:1800px; height: auto;">
	        					</div>
	        				</div>
	        			</div>
	        		</div>
                </div>

                <div class=" col-lg-2 col-md-4 col-sm-4 col-xs-4 hello5">
                	<img src="img/PI/product-page-detail_product_detail_3.png" class="img-responsive" data-toggle="modal" data-target="#myModal3" style="display:inline-block;" data-toggle="modal" data-target="#myModal3">
	                <div class="modal fade" id="myModal3" role="dialog">
	    				<div class="modal-dialog modal-sm">
	    
	      				<!-- Modal content-->
	      					<div class="modal-content" style="margin-top: 200px;">
	        					<div class="modal-header">
	          						<button type="button" class="close" data-dismiss="modal">&times;</button>
	          						<img src="img/PI/product-page-detail_product_detail_3.png" class="img-responsive" style="display:inline-block; width:1800px; height: auto;">
	        					</div>
	        				</div>
	        			</div>
	        		</div>
                </div>
            </div>

            <!-- <div class="container">
                <div class="col-sm-12 col-xs-12">
                <img src="img/PI/product-page-detail_product_detail_2.png" class="img-responsive">
                </div>
                <div class="col-sm-12 col-xs-12">
                <img src="img/PI/product-page-detail_product_detail_1.png" class="img-responsive">
                </div>
                <div class="col-sm-12 col-xs-12">
                <img src="img/PI/product-page-detail_product_detail_3.png" class="img-responsive">
                </div>
                <br>
            </div> -->


            <br>

                <div class="hello7"><b>FUSCE MOLLIS<br>CONGUE SEM</b>
                </div>

                <center><hr class="style4"></center>

                <div class="hello8">Donec portititor justo eu risus vulpitate,<br>eu congue ligua rhoncus Duis suscipit odio a justo tincidunt.<br><br>
                    <div style="display: inline-table;">
                        <div style="display: table-cell; vertical-align: middle;">Color:</div>
                        
                        <ul class="colors-list">
                            <li class="color-selection" style="background: #f7f6c0">
                                <label style="background: #e4d35c" class="selected">
                                <input type="radio" name="attribute_3" data="3" value="4" class="select-attribute" checked>
                                </label>
                            </li>
                            <li class="color-selection" style="background: #685a59">
                                <label style="background: #e4d35c" class="selected">
                                <input type="radio" name="attribute_3" data="3" value="4" class="select-attribute" checked>
                                </label>
                            </li>
                            <li class="color-selection" style="background: #74787b">
                                <label style="background: #e4d35c" class="selected">
                                <input type="radio" name="attribute_3" data="3" value="4" class="select-attribute" checked>
                                </label>
                            </li>   
                        </ul>
                    </div>
                </div>
                    <br>
                <div class="hello9">Chaise : W.900 x D.1740 x H.750/940mm<br>
                </div>


        <footer>
        <div class="container">
            <div class="row p40">
          
                <div class="col-md-offset-1 col-md-3 col-sm-6 col-xs-12 footer-col mb20">
                    <h6 class="heading7">MENU</h6>
                    <ul class="footer-ul">
                        <li><a href="#"> Chairs</a></li>
                        <li><a href="#"> Sofas & Armchais</a></li>
                        <li><a href="#"> Tables</a></li>
                        <li><a href="#"> Shelves & Storage</a></li>
                        <li><a href="#"> Decor</a></li>
                        <li><a href="#"> All Collections</a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-sm-6 footer-col mb20">
                    <h6 class="heading7">INFORMATION</h6>
                    <ul class="footer-ul">
                        <li><a href="#"> About Us</a></li>
                        <li><a href="#"> Interior Design</a></li>
                        <li><a href="#"> Contact Us</a></li>
                        <li><a href="#"> Delivery & Returns</a></li>
                        <li><a href="#"> Warranty</a></li>
                        <li><a href="#"> Payment Method</a></li>
                        <li><a href="#"> Careers</a></li>
                    </ul>
                </div>


                <div class="col-md-3 col-sm-6 footer-col mb20">
                    <div class="heading7"> Menu</div>
                    <p>We have started as the sales organization which specialized on manufacturing of living and bedroom furniture. Over the past 10 years, we have grown to expand and penetrate into the international market and have remained committed to our mission statement. Innovative marketing concepts, quality products, creative and diversifying buisness plans have always been driven by the complete customer satisfaction in mind. </p>
                    <ul class="footer-social">
                        <li>
                            <a href="https://www.facebook.com/casamoderno.my">
                                <img src="img/home_socialmedia_button_facebook.png" class="img-responsive">
                            </a>
                        </li>
                        <li>
                            <a href="http://imgaddict.com/user/casamoderno_my/3426840538/" target="_blank">
                                <img src="img/home_socialmedia_button_instagram.png" class="img-responsive">
                            </a>
                        </li>
    
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        
        function openNav() {
            document.getElementById("myNav").style.width = "100%";

            $('.overlay-content .an').addClass('animated fadeInLeft');
          



        }

        function closeNav() {
            document.getElementById("myNav").style.width = "0%";

            
            $('.overlay-content .an').removeClass('animated fadeInLeft');
            
        }      
    </script>

</body>

</html>
