"Bootstrap Workshop (Investor Relations)"
Bootstrap 3.0.0 Snippet by sitinurfarahaqilah

<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 http-equiv="Content-Type" content="text/html; charset=utf-8"> <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: #888;} nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: orange; color: #fff; padding-left: 30px;} nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 10px; 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="sp_landing_main.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="corporate_governance.asp">Announcements & Circulars</a></li> --> <!-- <li class="divider"></li> --> <li><a href="ir_formal_notice_en.asp">Announcements & Circulars</a></li> <!-- <li><a href="financial_information.asp">Announcement of Offer Price & Allotment Results</a></li> --> <!-- <li><a href="financial_information.asp">List Of Directors & Roles & Functions</a></li> --> <li class="divider"></li> <li><a href="ir_corp_governance_en.asp">Corporate Governance</a></li> <li class="divider"></li> <!-- <li style="background-color: powderblue;"><strong>Listing Documents</strong></li> --> <li><a href="ir_prospectus_en.asp">Prospectus</a></li> <li><a href="ir_green_form_en.asp">Green Application Form</a></li> <li><a href="ir_white_form_en.asp">White Application Form</a></li> <li><a href="ir_yellow_form_en.asp">Yellow Application Form</a></li> <!-- <li><a href="#" OnClick="login()";>Login</a></li> --> <!-- <li class="divider"></li> <li><a href="financial_information.asp">Corporate Governance</a></li> <li><a href="financial_information.asp">Procedures for Shareholders to Nominate a Director</a></li> <li><a href="financial_information.asp">Terms of Reference of Audit Committee</a></li> <li><a href="financial_information.asp">Terms of Reference of Nomination Committee</a></li> <li><a href="financial_information.asp">Amended & restated memorandum of association</a></li> <li><a href="financial_information.asp">Amended & restated articles of association</a></li> --> </ul> </li> <!-- Chinese IR --> <li class="dropdown"> <a href="investors.asp" class="active dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">投資者關係 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <!-- <li><a href="corporate_governance.asp">Announcements & Circulars</a></li> <li class="divider"></li> --> <li><a href="ir_formal_notice_2_cn.asp">公告及通函</a></li> <!-- <li><a href="financial_information.asp">Announcement of Offer Price & Allotment Results</a></li> <li><a href="financial_information.asp">List Of Directors & Roles & Functions</a></li> --> <li class="divider"></li> <li><a href="ir_corp_governance_cn.asp">企業管治</a></li> <li class="divider"></li> <!-- <li style="background-color: powderblue;"><strong>Listing Documents</strong></li> --> <li><a href="ir_prospectus_cn.asp">招股書</a></li> <li><a href="ir_green_form_cn.asp">绿表</a></li> <li><a href="ir_white_form_cn.asp">白表</a></li> <li><a href="ir_yellow_form_cn.asp">黄表</a></li> <!-- <li class="divider"></li> <li><a href="financial_information.asp">Corporate Governance</a></li> <li><a href="financial_information.asp">Procedures for Shareholders to Nominate a Director</a></li> <li><a href="financial_information.asp">Terms of Reference of Audit Committee</a></li> <li><a href="financial_information.asp">Terms of Reference of Nomination Committee</a></li> <li><a href="financial_information.asp">Amended & restated memorandum of association</a></li> <li><a href="financial_information.asp">Amended & restated articles of association</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"> <!-- 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 login(){ $.colorbox({width: "80%", height: "80%", iframe:true, fixed: true, href:"login.asp"}); } </script> <Style> h2 { margin-top: 20px; margin-left: 15px; margin-bottom: 20px; } @media (min-width: 0px) { .brand-pills > li > a { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } li.brand-nav { background-color: #c5e1a5; } li.brand-nav a:hover { background-color: #72d572; } li.brand-nav.active a:after{ content: " "; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; /* border-left: 9px solid orange; */ position: absolute; top: 50%; margin-top: -20px; left: 100%; z-index: 2; } } </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 visible-lg visible-md" align="center" width=100%> <img src="images/ir-images/SP2_9228_1920x500.jpg" class="img-responsive"> </div> <div class="col-lg-12 visible-sm visible-xs" align="center"> <img src="images/Resize_Image.aspx?ImgWd=440&ImgHt=300&IptFl=ir-images/SP2_9228_1920x500.jpg&CrpYN=Y" class="img-responsive" width=100%> </div> <!-- formal notice was here --> <!-- here --> <div class="container" style="padding-top: 40px; padding-left: 30px; padding-right: 30px;"> <div class="well" style="background-color: lightgrey;"> <div class="row" align="center"> <div class="row visible-lg visible-md"><br></div> <h2>Announcement & Circulars</h2> <div role="tabpanel"> <div class="col-sm-3"> <ul class="nav nav-pills brand-pills nav-stacked" role="tablist"> <li role="presentation" class="brand-nav active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Formal Notice</a></li> <li role="presentation" class="brand-nav"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Announcement of Offer Price & Allotment Results</a></li> <li role="presentation" class="brand-nav"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">List Of Directors & Their Roles & Functions</a></li> <li role="presentation" class="brand-nav"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">3-Aug-2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 31 July 2017</a></li> <li role="presentation" class="brand-nav"><a href="#tab5" aria-controls="tab5" role="tab" data-toggle="tab">17th Aug 2017: Date Of Board Meeting</a></li> <li role="presentation" class="brand-nav"><a href="#tab6" aria-controls="tab6" role="tab" data-toggle="tab">29th Aug 2017: Announcements and Notices - (Interim Results)</a></li> <li role="presentation" class="brand-nav"><a href="#tab7" aria-controls="tab7" role="tab" data-toggle="tab">6th Sept 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 31 Aug 2017</a></li> <li role="presentation" class="brand-nav"><a href="#tab8" aria-controls="tab8" role="tab" data-toggle="tab">28th Sep 2017: Financial Statements/ESG Information - (Interim/Half-Year Report)</a></li> <li role="presentation" class="brand-nav"><a href="#tab9" aria-controls="tab9" role="tab" data-toggle="tab">4th Oct 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 30 Sep 2017</a></li> <li role="presentation" class="brand-nav"><a href="#tab10" aria-controls="tab10" role="tab" data-toggle="tab">3rd Nov 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 31 October 2017</a></li> <li role="presentation" class="brand-nav"> <a href="#tab11" aria-controls="tab11" role="tab" data-toggle="tab"> 30th Nov 2017: Change in Company Secretary / Change in Directors or of Important Executive Functions or Responsibilities </a></li> <li role="presentation" class="brand-nav"> <a href="#tab12" aria-controls="tab12" role="tab" data-toggle="tab"> 4th Dec 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 30 November 2017 </a></li> </ul> </div> <div class="col-sm-9"> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="tab1"> <a href="images/ir/formal_notice_en.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong>29th June 2017 - Formal Notice </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab2"> <a href="images/ir/IR-docs2/Announcement of Offer Price and Allotment Results.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong>10th July 2017 - Announcement of Offer Price & Allotment Results </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab3"> <a href="images/ir/IR-docs2/List of Directors and their Roles and Functions.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong>10th July 2017 - List of Directors and their Roles and Functions </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab4"> <a href="images/ir/Monthly Return of Equity Issuer on Movements in Securities for the Month Ended 31 July 2017.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong>Monthly Return of Equity Issuer on Movements in Securities for the Month Ended 31 July 2017 </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab5"> <a href="images/ir/2017 Aug/E01695_ann_0816_2149.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 17th August 2017 - Date of Board Meeting</strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab6"> <a href="images/ir/2017 Aug/E01695_ann_0829_2202.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 29th August 2017 - Announcements and Notices - (Interim Results)</strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab7"> <a href="images/ir/2017 Aug/E01695 Monthly Return_0905 1759.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 6th Sept 2017 - Monthly Return of Equity Issuer on Movements in Securities for the month ended 31 Aug 2017 </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab8"> <a href="images/ir/2017 Sep/E01695_IR_0926 0410.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 28th Sep 2017: Financial Statements/ESG Information - (Interim/Half-Year Report) </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab9"> <a href="images/ir/2017 Oct/S10139_Monthly Return_E_Sep 2017.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 4th Oct 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 30 Sep 2017 </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab10"> <a href="images/ir/2017 Nov/S10139_Monthly Return_E_Oct 2017 (r).pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 3rd Nov 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 31 October 2017</strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab11"> <a href="images/ir/2017 Nov/E01695_ann_1130_1743.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"> <strong> 30th Nov 2017: Change in Company Secretary / Change in Directors or of Important Executive Functions or Responsibilities </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> <div role="tabpanel" class="tab-pane" id="tab12"> <a href="images/ir/2017 Nov/S10139_Monthly Return_E_Nov 2017.pdf" target="_blank" style="color: #01579b; padding-left: 10px;"><strong> 4th Dec 2017: Monthly Return of Equity Issuer on Movements in Securities for the month ended 30 November 2017 </strong><span class="badge" style="background-color: skyblue;">PDF</span></a> </div> </div> </div> </div> </div> </div> <!-- well --> </div> <!-- here --> </div> </section> <!-- ============ 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">版權所有,未經授權,不得轉載. All rights reserved & 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 ================ --> </Script> </Script> </body> </html>

Related: See More


Questions / Comments: