"02 NEW-IMklik 2017 landing"
Bootstrap 3.0.0 Snippet by Hel333

<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 ----------> <!DOCTYPE html> <html lang="en"> <Head> <meta name="Description" content="IMklik 2017, Photo Marathon"> <!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> I.M klik 2017 </title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css?v=1.0"> <!-- <link rel="stylesheet" href="assets/css/font-awesome.min.css?v=1.0"> --> <!-- <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'> <!-- 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.2" rel="stylesheet"> <link href="env/css/earlybreak.css?v=1.2" 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> /* Footer */ * { margin: 0; } html, body { height: 100%; } /* Footer */ </Style> </head> <!-- Start Rocket --> <!-- ********************* --> <!-- Start Header ================================================== --> <header id="header" class="navbar navbar-inverse navbar-fixed-top" role="banner" style="background-color: #82246a;"> <div class="container" style="padding-left: 5px; padding-right: 0px; padding-bottom: -15px;"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Your Logo --> <!-- <a href="../" class="navbar-brand">Beyond Photography</a> --> <a href="landing.asp" class="navbar-brand"><img src="http://www.imklik.com/img/2017/common/IMklik_Logo2017.png" style="width:180px" class="img-responsive"></a> </div><br><br> <!-- Start Navigation --> <nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation"> <ul class="nav navbar-nav"> <li> <a href="schedule.asp">Home</a> </li> <li> <a href="courses.asp?Course=reallife">About IIB</a> </li> <li> <a href="courses.asp?Course=elearning">About IMklik</a> </li> <li> <a href="courses.asp?Course=product">Photo Marathon</a> </li> <li> <a href="courses.asp?Course=service">Registration</a> </li> <li> <a href="proservices.asp">Terms & Conditions</a> </li> <li> <a href="default.asp">News & Updates</a> </li> <li> <a href="send_us_email.asp">Contact Us</a> </li> </ul> </nav> </div> <!-- Login Status --> <!-- Share This Social Media --> <!--<div class="col-lg-12 col-xs-12" align="center"> <img src="http://www.imklik.com/img/2017/common/main-top-bar.jpg" class="img-responsive"> </div>--> <!-- End of Share This --> <!-- Facebook Chat --> <!-- http://www.embedded-chat.com/ --> <script type='text/javascript'> (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//d2yy16lkdmfg04.cloudfront.net/resource/facebookchat.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); window.embeddedChatFacebookAsyncInit = function() { embeddedChatFacebook.init("8894"); } </script> <!-- Facebook Chat --> <!-- 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> <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script> <!-- Share This Javascripts --> <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "4bea2bda-60f6-4b2b-9648-fc3cba84b203", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> <!-- End Of Share this JavaScripts --> </header> <!-- ================================================== --> <!-- ================================================== --> <!-- ================================================== --> <!-- ================================================== --> <!-- End Header --> <Head> <!-- CSS FOR COLORBOX --> <link href="assets/css/colorbox.css?v=1.9" rel="stylesheet"> <!-- JQuery for textarea character count --> <script src="assets/js/jquery-1.10.2.min.js?v=1.1"></script> <link href="assets/js/submitspin.css?v=1.0" rel="stylesheet"> <script src="assets/js/submitspin/submitspin.js?v=1.0"></script> <script src="assets/js/loading/jquery.loading.min.js"></script> <link href="assets/js/loading/loading.min.css?v=1.0" rel="stylesheet"> <!-- Font Awesome Fonts --> <link rel="stylesheet" href="assets/css/font-awesome-4.7.0/css/font-awesome.min.css"> </Head> <Script> // ++++++++++++ START OF AUTO-LOAD AJAX FUNCTION +++++++++++++++++++++++++++++ function auto_load(){ $.ajax({ url: "ajax_notification_top.asp", cache: false, success: function(data){ $("#auto_load_div").html(data); } }); } $(document).ready(function(){ auto_load(); //Call auto_load() function when DOM is Ready }); //Refresh auto_load() function after 10000 milliseconds setInterval(auto_load,3000); // ++++++++++++ END OF AUTO-LOAD AJAX FUNCTION +++++++++++++++++++++++++++++ </Script> <Style> /* RESPONSIVE YOUTUBE EMBEDS */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* RESPONSIVE YOUTUBE EMBEDS */ </Style> </Head> <Body> <!-- A Randomize background --> <!-- <div id="parallax"></div> --> <!-- End Parallax Background ================================================== --> <!-- Start Hero Section ================================================== --> <!-- <section id="hero" class="section"> <div class="container"> <div class="row"> <div class="col-md-5"></div> <div class="col-md-7"> <div class="lp-element animate" data-animate="fadeInDown"> <h1> </h1> <p class="lead"> </p> <p> </p> </div> </div> </div> </div> </section> --> <!-- ================================================== End Hero --> <section id="features" class="section" style="padding-top: 90px; padding-bottom: 0px;"> <div class="row"> <!-- do not delete!! --> <div class="col-lg-6 col-md-6 col-sm-6 visible-lg visible-md visible-sm"> <div class="row"> <!-- do not delete!! --> <Img Src="http://www.imklik.com/img/2017/common/Mainpage-Placeholder-01.jpg" class="img-responsive" width=100%/> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 visible-lg visible-md visible-sm"> <div class="row"> <!-- do not delete!! --> <Img Src="http://www.imklik.com/img/2017/common/Mainpage-Placeholder-02.jpg" class="img-responsive" width=100%/> </div> </div> <div class="col-xs-12 visible-xs"> <div class="row"> <!-- do not delete!! --> <Img Src="http://www.imklik.com/img/2017/common/Mainpage-Placeholder-01.jpg" class="img-responsive" width=100%/> </div> </div> <div class="col-xs-12 visible-xs"> <div class="row"> <!-- do not delete!! --> <Img Src="http://www.imklik.com/img/2017/common/Mainpage-Placeholder-02.jpg" class="img-responsive" width=100%/> </div> </div> </div> </Section> <!-- Beyond Photography 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/Beyond Photography.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> <!-- Share This Javascripts --> <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "4bea2bda-60f6-4b2b-9648-fc3cba84b203", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> <!-- End Of Share this JavaScripts --> <!-- ********************* --> <!-- Start Rocket --> <div class="col-lg-12 col-xs-12" align="center" class="img-responsive" style='background-color: #2e3539; color: #212121;'> <img src="http://www.imklik.com/img/2017/common/fb_logo_bottom.jpg" style="width:200px" class="img-responsive"> <img src="http://www.imklik.com/img/2017/common/insta_logo_bottom.jpg" style="width:80px" class="img-responsive"> </div> <!-- ============ Footer ================ --> <section id="image" style="background-color:#2e3539;"> <div class="row" align="center"> <br> <small><strong><a href="#" OnClick="terms(); return false;">Terms & Conditions</a></strong>. </small>   <small><strong><a href="#" OnClick="privacy(); return false;">Privacy Policies</a></strong>. </small> <br> <font size="1.5em" <font size="2px" style="color:#FFFFFF;">Brought to you by Iskandar Investment Berhad and organised by Beyond Photography Academy.</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>

Questions / Comments:

Related: See More