"SPfood - product test"
Bootstrap 3.0.0 Snippet by Fistandantilus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <Head> <meta name="Description" content="S&P Santan Coconut Products."> <!DOCTYPE html> <html lang="en"> <head> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title> S&P International Holding Limited </title> <!-- Bootstrap core CSS --> <!-- <link href="env/css/bootstrap.min.css?v=1.0" rel="stylesheet"> --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Fonts --> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,400italic,700italic' rel='stylesheet' type='text/css'> <!-- <script type="text/javascript"> if (screen.width <= 699) { document.location = "landing-m.asp"; } </script> --> <!-- Pixel's CSS --> <link href="assets/css/logos.css?v=1.0" rel="stylesheet"> <link href="assets/css/class-banners.css?v=1.0" rel="stylesheet"> <link href="assets/css/product-banners.css?v=2.3" rel="stylesheet"> <link href="assets/css/product.css?v=3.1" rel="stylesheet"> <link href="env/css/earlybreak.css?v=1.0" rel="stylesheet"> <link href="assets/css/schedule.css?v=1.8" rel="stylesheet"> <link href="assets/css/course_types.css?v=1.1" rel="stylesheet"> <link href="assets/css/recommended_product.css?v=1.0" rel="stylesheet"> <!-- <link href="assets/css/member.css?v=1.2" rel="stylesheet"> --> <link href="assets/css/login.css?v=1.0" rel="stylesheet"> <!-- Pixel's CSS --> <!-- Rocket extras --> <link href="env/css/animate.css?v=1.0" rel="stylesheet"> <link href="env/css/prettyPhoto.css?v=1.0" rel="stylesheet"> <link href="env/css/style.css?v=1.11" rel="stylesheet"> <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <!-- Favicons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../docs-assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="shortcut icon" href="../docs-assets/ico/favicon.png"> <Style> /* FindCond Navbar */ nav.navbar-findcond { background: #000000; border-color: #000000; box-shadow: 0 0 0 0 #ccc; } nav.navbar-findcond a { color: #5fadef; } nav.navbar-findcond ul.navbar-nav a { color: #5fadef; border-style: solid; border-width: 0 0 0 0; border-color: #fff; padding-left: 5px; padding-right: 5px;} nav.navbar-findcond ul.navbar-nav a:hover, nav.navbar-findcond ul.navbar-nav a:visited, nav.navbar-findcond ul.navbar-nav a:focus, nav.navbar-findcond ul.navbar-nav a:active { background: orange; } nav.navbar-findcond ul.navbar-nav a:hover { border-color: orange; color: #FFFFFF; padding-left: 5px; padding-right: 5px;} nav.navbar-findcond li.divider { background: #ccc; } nav.navbar-findcond button.navbar-toggle { background: orange; border-radius: 10px;} nav.navbar-findcond button.navbar-toggle:hover { background: red; } nav.navbar-findcond button.navbar-toggle > span.icon-bar { background: #fff; } nav.navbar-findcond ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; } nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; } nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: orange; color: #fff; } nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; } nav.navbar-findcond span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; } /* FindCond Navbar */ /* Footer */ * { margin: 0; } html, body { height: 100%; } /* Footer */ </Style> </head> <!-- Start Rocket --> <!-- ********************* --> <!-- Start Header ================================================== --> <nav class="navbar navbar-findcond navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <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="landing.asp"> <img src="images/logo/splogo-150.png" class="img-responsive visible-lg visible-md"> <img src="images/logo/splogo-150.png" class="img-responsive visible-sm visible-xs" width=50% style="padding-left: 20px; padding-top: 20px"> </a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="company.asp">Our Company <span class="sr-only">(current)</span></a></li> <li class="active"><a href="products.asp">Our Products <span class="sr-only">(current)</span></a></li> <li class="active"><a href="technology.asp">Our Technology <span class="sr-only">(current)</span></a></li> <li class="dropdown"> <a href="investors.asp" class="active dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">Investor Relations <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="overview.asp">Overview</a></li> <li><a href="corporate_governance.asp">Corporate Governance</a></li> <li class="divider"></li> <li><a href="investment_highlight.asp">Board Of Directors</a></li> <li><a href="financial_information.asp">Articles Of Incorporation</a></li> <li class="divider"></li> <li><a href="investment_highlight.asp">Financial Reports</a></li> <li><a href="financial_information.asp">Prospectus</a></li> <li><a href="investment_highlight.asp">Green, Yellow & White Forms</a></li> <li class="divider"></li> <li><a href="financial_information.asp">Announcements</a></li> <li><a href="financial_information.asp">Communications</a></li> <li class="divider"></li> <li><a href="financial_information.asp">Stock Information</a></li> <li><a href="financial_information.asp">Investor Presentations</a></li> <li><a href="financial_information.asp">Investor Calendar</a></li> <li><a href="financial_information.asp">FAQ</a></li> <li><a href="financial_information.asp">Investor Services</a></li> </ul> </li> <li class="active"><a href="contact.asp">Contact <span class="sr-only">(current)</span></a></li> </ul> </div> </div> </nav> <div class="row" align="center" style="background-color: orange;"> </div> <!-- ================================================== --> <!-- ================================================== --> <!-- ================================================== --> <!-- ================================================== --> <!-- End Header --> <!-- Bootstrap core JavaScript --> <!-- ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="env/js/jquery-1.10.2.min.js?v=1.0"></script> <script src="env/js/bootstrap.js?v=1.0"></script> <script src="env/js/waypoints.min.js?v=1.0"></script> <script src="env/js/jquery.scrollto.min.js?v=1.0"></script> <script src="env/js/jquery.localscroll.min.js?v=1.0"></script> <script src="env/js/jquery.prettyPhoto.js?v=1.0"></script> <script src="env/js/scripts.js?v=1.0"></script> <!-- Rocket extras --> <link href="env/css/animate.css?v=1.0" rel="stylesheet"> <link href="env/css/prettyPhoto.css?v=1.0" rel="stylesheet"> <link href="env/css/style.css?v=1.11" rel="stylesheet"> <Style> .textoverimage { position: relative; width: 100%; /* for IE 6 */ } .item { width: 300px; float: left; } .item img { display: center; width: 100%; } </Style> </Head> <Body> <section style="padding-top: 100px;"> <div class="row" align="center"><H3>Our Products</H3></div> <p><br><br></p> <div class="row visible-lg"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/50g-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Original 50g</h5> <br>6 x 24 x 50g DB <br>20' GP - 790ctns (30.5 m3) <hr> 6 x 24 x 50g PP <br>20' GP - 930ctns (30.4 m3) </div> <div class="col-lg-4"></div> </div> <div class="row hidden-lg" align="center"> <div class="col-lg-4"></div> <div class="col-lg-4"><img src="http://spfood.access.ly/img/product/50g-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <div class="row hidden-lg" align="center" text="justified"> <h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Original 50g</h5> <br>6 x 24 x 50g DB <br>20' GP - 790ctns (30.5 m3) <hr> 6 x 24 x 50g PP <br>20' GP - 930ctns (30.4 m3) </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Original 250g</h5> <br>48 x 250g <br>20' GP - 760ctns (29.5 m3) </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/250g-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/50g-pand-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Pandan 50g</h5> <br>6 x 24 x 50g DB <br>20' GP - 790ctns (30.5 m3) </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Original 25kg</h5> <br>1 x 25kg <br>20' GP - 480ctns (29.8 m3) </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/25kg-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/50g-omega-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Omega-3 50g</h5> <br>6 x 24 x 50g <br>20' GP - 790ctns (30.5 m3) </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Sejati<br> Low-Fat Dessiccated Coconut</h4> <h5>100g</h5> <br>3 x 24 x 100g <br>20' FCL - 700ctns (30.268 m3) </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/100g-sejati-desscoconut.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/50g-ori-milkpowder.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Instant Coconut Milk Powder</h4> <h5>Original 50g</h5> <br>6 x 24 x 50g <br>20' GP - 790ctns (30.5 m3) </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Low-Fat Dessiccated Coconut</h4> <h5>25kg</h5> <br>1 x 25kg <br>20' FCL - 310ctns </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/25kg-desscoconut.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/150g-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Original 150g</h5> <br>48 x 150g <br>20' GP - 750ctns (30.2 m3) </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Santan<br>Instant Coconut Cream Powder</h4> <h5>Original 300g</h5> <br>24 x 300g <br>20' GP - 970ctns (30.4 m3) </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/300g-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/200ml-coconutmilk.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Coconut Milk</h4> <h5>200ml</h5> <br>36 x 200g <br>20' FCL - 2600ctns </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Santan<br>Coconut Milk</h4> <h5>1000ml</h5> <br>12 x 1000ml <br>20' FCL - 1600ctns </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/1000ml-coconutmilk.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/1kg-ori-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Instant Coconut Cream Powder</h4> <h5>Original 1kg</h5> <br>12 x 1kg <br>20' GP - 760ctns (29.5m3) </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Santan<br>Instant Coconut Cream Powder Specialty for Dessert</h4> <h5>150g</h5> <br>48 x 150g <br>20' FCL - 730ctns </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/150g-dessert-creampowder.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/400ml-cancoconutmilk.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Santan<br> Canned Coconut Milk 17% - 19%</h4> <h5>400ml</h5> <br>24 x 400ml <br>20' FCL - 1800ctns </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Santan<br>Coconut Milk Drink</h4> <h5>200ml</h5> <br>24 x 200ml <br>20' FCL - 2275ctns (26.3 m3) </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/200ml-coconutdrink.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/200g-coconutspread.jpg" class="img-responsive"></div> <div class="col-lg-2"> <h4>Coconut Spread</h4> <h5>200g</h5> <br>24 x 200g <br>20' FCL - 2275ctns <hr> <h5>400g</h5> <br>12 x 400g <br>20' FCL - 2720ctns </div> <div class="col-lg-4"></div> </div> <br><br><hr><br><br> <div class="row" align="right"> <div class="col-lg-4"></div> <div class="col-lg-2"><h4>Non-Dairy Creamer</h4> <h5>25kg</h5> <br>1 x 25kg <br>20' FCL - 560bags </div> <div class="col-lg-2"><img src="http://spfood.access.ly/img/product/25kg-creamer.jpg" class="img-responsive"></div> <div class="col-lg-4"></div> </div> <br><br><br><br> </section> </body> <!-- ============ Footer ================ --> <section id="image" style="background-color:#000000;"> <div class="row" align="center"> <br> <small><strong><a href="#" OnClick="terms(); return false;" style="color: #5fadef;">Terms & Conditions</a></strong>. </small>   <small><strong><a href="#" OnClick="privacy(); return false;" style="color: #5fadef;">Privacy Policies</a></strong>. </small> <br> <font size="1.5em" color="#ccc">Designed & developed by SGXCreative. Copyrighted 2017.</font> <br><br> </div> </section> <!-- Color Box pop-up--> <link href="assets/css/colorbox.css?v=1.9" rel="stylesheet"> <script src="assets/js/jquery.colorbox.js?v=1.9"></script> <script src="assets/js/jquery.colorboxsystemmessage.js?v=1.5"></script> <script> //////////////////////////////////////////////////////// //Responsive Colorbox!!!! OPTION 1 var cboxOptions = { width: '85%', height: '85%', maxWidth: '960px', maxHeight: '960px', } $('.cbox-link').colorbox(cboxOptions); $(window).resize(function(){ $.colorbox.resize({ width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width, height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height }); }); //Responsive Colorbox!!!! //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// //Responsive Colorbox!!!! OPTION 2 /* function resizeColorBox() { if (jQuery('#cboxOverlay').is(':visible')) { jQuery.colorbox.resize({width:'100%', height:'100%'}); } } // Resize Colorbox when resizing window or changing mobile device orientation jQuery(window).resize(resizeColorBox); window.addEventListener("orientationchange", resizeColorBox, false); */ // OPTION 2 //////////////////////////////////////////////////////// function terms(){ $.colorbox({width: "80%", height: "80%", iframe:true, fixed: true, href:"terms.asp"}); } function privacy(){ $.colorbox({width: "80%", height: "80%", iframe:true, fixed: true, href:"privacy.asp"}); } </script> <!-- ============ Footer ================ --> </html>

Related: See More


Questions / Comments: