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

  <!-- SITE TITTLE -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Single Product - Angel Beauty</title>

  <!-- GOOGLE FONT -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff" rel="stylesheet">

  <!-- PLUGINS CSS STYLE -->
  <link href="plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet">
  <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="plugins/selectbox/select_option1.css" rel="stylesheet">
  <link href="plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet" media="screen">
  <link href="plugins/fancybox/jquery.fancybox.pack.css" rel="stylesheet">
  <link href="plugins/isotope/isotope.min.css" rel="stylesheet">
  <link href="plugins/datepicker/datepicker.min.css" rel="stylesheet">
  <link href="plugins/bootstrapthumbnail/bootstrap-thumbnail.css" rel="stylesheet">

  <!-- CUSTOM CSS -->
  <link href="css/style.css" rel="stylesheet">

  <!-- FAVICON -->
  <link href="img/favicon.png" rel="shortcut icon">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>

<body class="body-wrapper">
  <div class="main-wrapper">
    <!-- HEADER -->
    <header id="pageTop" class="header">

      <!-- TOP INFO BAR -->
      <div class="top-info-bar">
        <div class="container">
          <div class="top-bar-right">
            <ul class="list-inline">
              <li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i> info@yourdomain.com</a></li>
              <li><span><i class="fa fa-phone" aria-hidden="true"></i>+1 234 567 8900</span></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="nav-wrapper">
        <div class="container-fluid header-bg">
          <div class="row">
            <div class="col-lg-4 col-sm-4 col-xs-6 header-left empty">empty
            </div>
            <div class="col-lg-8 col-sm-8 col-xs-6 header-right empty">empty
            </div>
          </div>
        </div>

        <!-- NAVBAR -->
        <nav id="menuBar" class="navbar navbar-default lightHeader" role="navigation">
          <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="logo"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
              <ul class="nav navbar-nav navbar-right">
                <li class="">
                  <a href="index.html">Home</a>
                </li>
                <li class=" dropdown singleDrop">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services</a>
                  <ul class="dropdown-menu dropdown-menu-left">
                    <li><a href="service.html">Services</a></li>
                    <li><a href="single-service.html">Single Services</a></li>
                  </ul>
                </li>
                <li class="active dropdown megaDropMenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Store</a>
                  <ul class="row dropdown-menu">
                    <li class="col-sm-3 col-xs-12">
                      <ul class="list-unstyled">
                        <li><a href="product-right-sidebar.html">Product Right Sidebar</a></li>
                        <li><a href="product-left-sidebar.html">Product Left Sidebar</a></li>
                        <li><a href="product-3col.html">Product 3 Col</a></li>
                        <li><a href="product-4col.html">Product 4 Col</a></li>
                        <li><a href="single-product.html">Single product</a></li>
                      </ul>
                    </li>
                    <li class="col-sm-3 col-xs-12">
                      <ul class="list-unstyled">
                        <li><a href="user-dashboard.html">User Dashboard</a></li>
                        <li><a href="user-profile.html">User Profile</a></li>
                        <li><a href="address.html">Address</a></li>
                        <li><a href="all-order.html">All Order</a></li>
                        <li><a href="wishlist.html">Wishlist</a></li>
                      </ul>
                    </li>
                    <li class="col-sm-3 col-xs-12">
                      <ul class="list-unstyled">
                        <li><a href="cart.html">Cart</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                        <li><a href="success.html">Confirmation</a></li>
                        <li><a href="pricing.html">Price table</a></li>
                      </ul>
                    </li>
                    <li class="col-sm-3 col-xs-12 mega-img">
                      <a href="#"><img src="img/home/pricing-1.jpg" alt="logo"></a>
                    </li>
                  </ul>
                </li>
                <li class=" dropdown singleDrop">
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
                  <ul class="dropdown-menu dropdown-menu-left">
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team</a>
                      <ul class="dropdown-menu">
                        <li><a href="member.html">Our Team</a></li>
                        <li><a href="single-member-profile.html">Single Team</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gallery</a>
                      <ul class="dropdown-menu">
                        <li><a href="gallery-v1.html">Gallery 3 Col</a></li>
                        <li><a href="gallery-v2.html">Gallery 4 Col</a></li>
                      </ul>
                    </li>
                    <li><a href="login-signup.html">Login SignUp</a></li>
                    <li><a href="404.html">404 Not Found</a></li>
                    <li><a href="coming-soon.html">Coming Soon</a></li>
                  </ul>
                </li>
                <li class=" dropdown singleDrop">
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
                  <ul class="dropdown-menu dropdown-menu-right">
                    <li class="dropdown dropdown-submenu">
                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Blog</a>
                      <ul class="dropdown-menu">
                        <li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
                        <li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
                        <li><a href="blog-fullwidth.html">Fullwidth</a></li>
                      </ul>
                    </li>
                    <li class="dropdown dropdown-submenu">
                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Single Blog</a>
                      <ul class="dropdown-menu">
                        <li><a href="blog-single-right-sidebar.html">Right Sidebar</a></li>
                        <li><a href="blog-single-left-sidebar.html">Left Sidebar</a></li>
                        <li><a href="blog-single-fullwidth.html">Fullwidth</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class=" dropdown singleDrop">
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Components</a>
                  <ul class="dropdown-menu">
                    <li><a href="tabs-pagination.html">Tab & Pagination</a></li>
                    <li><a href="accrodion.html">Accrodions</a></li>
                    <li><a href="buttons-alerts.html">Buttons & Alerts</a></li>
                  </ul>
                </li>
              </ul>
            </div>

            <!-- Cart button -->
            <div class="cart_btn">
              <a href="cart.html"><i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="badge">0</span></a>
            </div>

          </div>
        </nav>
      </div>
    </header>


<!-- SINGLE PRODUCT SECTION -->
    <section class="container-fluid clearfix singleProduct">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-xs-12">
            <div class="singleIamge">
              <img src="img/products/single-product.jpg" alt="Image Single Product" class="img-responsive">
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="singleProductInfo">
              <h2>Handmade Soap</h2>
              <h3>$50 <del>$50</del></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
              <div class="finalCart">
                <input type="number" value="1" min="1" max="999">
                <a href="cart.html" class="btn btn-primary"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Add to cart</a>
              </div>
              <ul class="list-inline category">
                <li>Categories:</li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Soap</a></li>
              </ul>
              <ul class="list-inline shareSocial">
                <li>Share:</li>
                <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="tabCommon tabOne singleTab">
              <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#details">Details</a></li>
                <li><a data-toggle="tab" href="#reviews">Reviews (2)</a></li>
              </ul>

              <div class="tab-content patternbg">
              <div id="details" class="tab-pane fade in active">
                  <h4>Product Description</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut per spici</p>
                  <ul class="list-inline">
                    <li><i class="fa fa-check" aria-hidden="true"></i>Vestibulum iaculis quam.</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i>Vestibulum iaculis quam.</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i>Quam ac libero volutpat placerat.</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i>Quam ac libero volutpat placerat.</li>
                  </ul>
                </div>
                <div id="reviews" class="tab-pane fade">
                  <div class="blogCommnets">
                    <div class="media">
                      <a class="pull-left" href="#">
                        <img class="media-object" src="img/blog/user-1.jpg" alt="Image">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">Integer blandit</h4>
                        <h5><span><i class="fa fa-calendar" aria-hidden="true"></i>22 September, 2016</span></h5>
                        <p>Reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        <button class="btn btn-link">Reply</button>
                      </div>
                    </div>
                    <div class="media mediaMargin">
                      <a class="pull-left" href="#">
                        <img class="media-object" src="img/blog/user-2.jpg" alt="Image">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">Integer blandit</h4>
                        <h5><span><i class="fa fa-calendar" aria-hidden="true"></i>22 September, 2016</span></h5>
                        <p>Reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        <button class="btn btn-link">Reply</button>
                      </div>
                    </div>
                    <div class="media">
                      <a class="pull-left" href="#">
                        <img class="media-object" src="img/blog/user-3.jpg" alt="Image">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">Integer blandit</h4>
                        <h5><span><i class="fa fa-calendar" aria-hidden="true"></i>22 September, 2016</span></h5>
                        <p>Reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        <button class="btn btn-link">Reply</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="relatedTitle">
            <h2>Related Products</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
            <a href="#" class="realatedInner">
              <div class="productBox">
                <img src="img/products/related-product-1.jpg" alt="Image Product" class="img-responsive">
              </div>
              <div class="productName">Oil Set</div>
              <div class="productPrice">$15</div>
            </a>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <a href="#" class="realatedInner">
              <div class="productBox">
                <img src="img/products/related-product-2.jpg" alt="Image Product" class="img-responsive">
              </div>
              <div class="productName">Herbal Body Cream</div>
              <div class="productPrice">$50</div>
            </a>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <a href="#" class="realatedInner">
              <div class="productBox">
                <img src="img/products/related-product-3.jpg" alt="Image Product" class="img-responsive">
              </div>
              <div class="productName">Flying Ninja</div>
              <div class="productPrice">$75</div>
            </a>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <a href="#" class="realatedInner">
              <div class="productBox">
                <img src="img/products/related-product-4.jpg" alt="Image Product" class="img-responsive">
              </div>
              <div class="productName">Ninja Silhouette</div>
              <div class="productPrice">$35</div>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- FOOTER -->
    <footer style="background-image: url(img/home/footer-bg.jpg);">
      <!-- BACK TO TOP BUTTON -->
      <a href="#pageTop" class="backToTop"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
      <!-- FOOTER INFO -->
      <div class="clearfix footerInfo">
        <div class="container">
          <div class="row">
            <div class="col-sm-3 col-xs-12">
              <div class="footerText">
                <a href="index.html" class="footerLogo"><img src="img/logo-footer.png" alt="Footer Logo"></a>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa officia.Lorem ipsum dolor sit amet.</p>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
            <div class="col-sm-3 col-xs-12 paddingLeft">
              <div class="footerInfoTitle">
                <h4>Useful Links</h4>
              </div>
              <div class="useLink">
                <ul class="list-unstyled">
                  <li><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Web Design</a></li>
                  <li><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>About Anzel Beauty Spa</a></li>
                  <li><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Mobile</a></li>
                  <li><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Why Anzel Beauty Spa</a></li>
                  <li><a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Social Media</a></li>
                </ul>
              </div>
            </div>
            <div class="col-sm-3 col-xs-12">
              <div class="footerInfoTitle">
                <h4>Gallery</h4>
              </div>
              <div class="footerGallery row">
                <div class="col-xs-4">
                  <a href="gallery-v2.html" style="background-image: url(img/home/footer-gallery-1.jpg);"></a>
                </div>
                <div class="col-xs-4">
                  <a href="gallery-v2.html" style="background-image: url(img/home/footer-gallery-2.jpg);"></a>
                </div>
                <div class="col-xs-4">
                  <a href="gallery-v2.html" style="background-image: url(img/home/footer-gallery-3.jpg);"></a>
                </div>
                <div class="col-xs-4">
                  <a href="gallery-v2.html" style="background-image: url(img/home/footer-gallery-4.jpg);"></a>
                </div>
                <div class="col-xs-4">
                  <a href="gallery-v2.html" style="background-image: url(img/home/footer-gallery-5.jpg);"></a>
                </div>
                <div class="col-xs-4">
                  <a href="gallery-v2.html" style="background-image: url(img/home/footer-gallery-6.jpg);"></a>
                </div>
              </div>
            </div>
            <div class="col-sm-3 col-xs-12">
              <div class="footerInfoTitle">
                <h4>Newsletters</h4>
              </div>
              <div class="footerText">
                <p>Sign up for our mailing list to get latest updates and offers.</p>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Email address" aria-describedby="basic-addon21">
                  <button type="submit" class="input-group-addon" id="basic-addon21">Send</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- COPY RIGHT -->
      <div class="clearfix copyRight">
        <div class="container">
          <div class="row">
            <div class="col-sm-5 col-sm-push-7 col-xs-12">
              <ul class="list-inline socialLink">
                <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
              </ul>
            </div>
            <div class="col-sm-7 col-sm-pull-5 col-xs-12">
              <div class="copyRightText">
                <p>&copy; 2017 Copyright <a target="_blank" href="http://www.iamabdus.com/">Angel Beauty Spa Salon Bootstrap Template</a> by <a target="_blank" href="http://www.iamabdus.com/">Abdus</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>

  <!-- APPOINMENT MODAL -->
  <div id="appoinmentModal" class="modal fade modalCommon" role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="container row">
        <!-- MODAL CONTENT-->
        <div class="modal-content col-sm-6 col-sm-offset-3 col-xs-12">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Appointment For Hair Color</h4>
          </div>
          <div class="modal-body">
            <form action="">
              <div class="row">
                <div class="form-group categoryTitle col-xs-12">
                  <h5>Service Date and Time</h5>
                </div>
                <div class="dateSelect col-sm-6 col-xs-12">
                  <div class="input-group date ed-datepicker filterDate" data-provide="datepicker">
                    <input type="text" class="form-control" placeholder="MM/DD/YYYY">
                    <div class="input-group-addon">
                      <span class="fa fa-calendar"></span>
                    </div>
                  </div>
                </div>
                <div class="timeSelect col-sm-6 col-xs-12">
                  <select name="guiest_id1" id="guiest_id1" class="select-drop">
                    <option value="0">10.00 AM</option>
                    <option value="1">9.00 AM</option>
                    <option value="2">8.00 AM</option>
                    <option value="3">11.00 AM</option>
                  </select>
                </div>
                <div class="form-group categoryTitle col-xs-12">
                  <h5>Personal info</h5>
                </div>
                <div class="form-group col-sm-6 col-xs-12">
                  <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Full name">
                </div>
                <div class="form-group col-sm-6 col-xs-12">
                  <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Your email">
                </div>
                <div class="form-group col-sm-6 col-xs-12">
                  <input type="text" class="form-control" id="exampleInputEmail4" placeholder="Phone number">
                </div>
                <div class="form-group col-sm-6 col-xs-12">
                  <input type="text" class="form-control" id="exampleInputEmail5" placeholder="Your address">
                </div>
                <div class="form-group col-xs-12">
                  <textarea class="form-control" placeholder="Your Message"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <div class="form-group">
              <button type="submit" class="btn btn-primary first-btn">Submit Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- JAVASCRIPTS -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
  <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="plugins/selectbox/jquery.selectbox-0.1.3.min.js"></script>
  <script src="plugins/owl-carousel/owl.carousel.min.js"></script>
  <script src="plugins/isotope/isotope.min.js"></script>
  <script src="plugins/fancybox/jquery.fancybox.pack.js"></script>
  <script src="plugins/isotope/isotope-triger.min.js"></script>
  <script src="plugins/smoothscroll/SmoothScroll.min.js"></script>
  <script src="plugins/datepicker/bootstrap-datepicker.min.js"></script>
  <script src="plugins/syotimer/jquery.syotimer.min.js"></script>
  <script src="js/custom.js"></script>

  <!--=== option Switcher ===-->
  <link rel="stylesheet" href="plugins/options/animate.css">
  <link rel="stylesheet" href="plugins/options/optionswitch.css">

  <i class="option-switcher-btn fa fa-gear hidden-xs"></i>
  <div class="option-switcher animated">
    <div class="option-swticher-header">
      <div class="option-switcher-heading">Template Options</div>            
      <div class="theme-close"><i class="fa fa-close"></i></div>
    </div>
    <div class="option-swticher-body">
      <!-- Theme Colors -->
      <ul class="list-unstyled color-options">
        <li class="theme-default theme-active" data-color="default"></li>
        <li class="theme-color1" data-color="color-option1"></li>
        <li class="theme-color2" data-color="color-option2"></li>
        <li class="theme-color3 last" data-color="color-option3"></li>
      </ul>
      <!-- Layout Styles -->
      <div class="row no-col-space layoutStyle">
        <div class="col-xs-6">
          <a href="javascript:void(0);" class="btn-u  btn-block active-switcher-btn wide-layout-btn">Wide</a>                
        </div>
        <div class="col-xs-6">
          <a href="javascript:void(0);" class="btn-u btn-block boxed-layout-btn">Boxed</a>
        </div>                
      </div>
      <!-- Background pattern -->
      <div class="bg-patern">
        <h3>Background pattern</h3>
        <ul class="list-unstyled">
          <li class="pattern-default pattern-active"></li>
          <li class="pattern1"></li>
          <li class="pattern2"></li>
          <li class="pattern3 last"></li>
          <li class="pattern4"></li>
          <li class="pattern5"></li>
          <li class="pattern6"></li>
          <li class="pattern7 last"></li>
        </ul>
      </div> 
      <!-- Header Styles -->
      <div class="row no-col-space headerStyle">
        <div class="col-xs-6">
          <a href="javascript:void(0);" class="btn-u btn-block active-switcher-btn fixed-header">Fixed header</a>
        </div>
        <div class="col-xs-6">
          <a href="javascript:void(0);" class="btn-u btn-block static-header">Static header</a>
        </div>
      </div>              
    </div>
  </div>

  <script src="plugins/options/optionswitcher.js"></script>
  <script>
    jQuery(document).ready(function() {
      OptionSwitcher.initOptionSwitcher();      
    });
  </script>
  <!--/option-switcher-->

</body>

</html>