<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">
</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 1
======================================================== -->
<section id="features" class="section" style="padding-top: 0px; background-color: #e2fafe;">
<div class="row"> <!-- do not delete!! -->
<div class="col-lg-12" align="center">
<img src="http://via.placeholder.com/1920x500" class="img-responsive">
</div>
<div class="col-lg-4 visible-lg visible-md" align="center">
</div>
<div class="col-lg-4 visible-lg visible-md" align="center">
<p><br></p>
<h3>Industry Overview.</h3>
<p>
S&P Industries employs state-of-the-art technology to produce Santan® Instant Coconut Milk Powder. Through continuous innovation and refinement, we ensure consistent product quality and excellence.
S&P’s vision and mission is to introduce the natural taste of coconuts in an instant and convenient form to the world
</P>
</div>
<div class="col-lg-4 visible-lg visible-md" align="center">
</div>
<div class="col-lg-6 visible-xs visible-sm" align="left" style="padding-left: 40px; padding-right: 40px;">
<br>
<h3>Overview.</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 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.
</P>
</div>
</div>
</Section>
<!-- ======================================================
SECTION 1
======================================================== -->
<section id="features" class="section" style="background-color: #ffe0b2; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;">
<div class="container">
<div class="row">
<div class="col-lg-4 animate" data-animate="fadeInLeftBig" align="center">
<br>
<h3>Overview One</h3>
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 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.
</p>
</div>
<div class="col-lg-8" align="left">
<img src="http://via.placeholder.com/1920x1080" class="animate img-responsive img-rounded" data-animate="fadeInLeft">
</div>
</div>
</div>
</Section>
<!-- ======================================================
SECTION 1
======================================================== -->
<!-- ======================================================
Section 2
======================================================== -->
<section id="features" class="section" style="background-color: #fffff4; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;">
<div class="container">
<div class="row">
<div class="col-lg-8" align="right">
<img src="http://via.placeholder.com/1920x1080" class="animate img-responsive img-rounded" data-animate="fadeInRight">
</div>
<div class="col-lg-4 animate" data-animate="fadeInRightBig" align="center">
<br>
<h3>Overview Two</h3>
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 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.
</p>
</div>
</div>
</div>
</Section>
<!-- ======================================================
Section 2
======================================================== -->
<!-- ============ 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 ================ -->
</body>
</html>
