Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Apr 1st, 2012  |  syntax: None  |  size: 38.56 KB  |  views: 124  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Nation Media</title>
  6. <link type="text/css" href="css/main.css" rel="stylesheet" />
  7.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  8.         <link rel="stylesheet" href="css/brands.css" type="text/css" media="screen" title="no title" charset="utf-8">
  9.         <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" />
  10.  
  11. <script type="text/javascript" src="js/jquery.min.js"></script>
  12. <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  13. <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  14. <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
  15. <script type="text/javascript" src="js/jquery.slider.js"></script>
  16. <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
  17. <script type="text/javascript" src="js/scroller.js"></script>
  18. <script src="js/slides.min.jquery.js"></script>
  19.  
  20.  
  21.         <script>
  22.                 $(function(){
  23.                         $('#slides').slides({
  24.                                 preload: true,
  25.                                 preloadImage: 'images/loading.gif',
  26.                                 play: 5000,
  27.                                 pause: 2500,
  28.                                 hoverPause: true,
  29.                                 animationStart: function(current){
  30.                                         $('.caption').animate({
  31.                                                 bottom:-35
  32.                                         },100);
  33.                                         if (window.console && console.log) {
  34.                                                 // example return of current slide number
  35.                                                 console.log('animationStart on slide: ', current);
  36.                                         };
  37.                                 },
  38.                                 animationComplete: function(current){
  39.                                         $('.caption').animate({
  40.                                                 bottom:0
  41.                                         },200);
  42.                                         if (window.console && console.log) {
  43.                                                 // example return of current slide number
  44.                                                 console.log('animationComplete on slide: ', current);
  45.                                         };
  46.                                 },
  47.                                 slidesLoaded: function() {
  48.                                         $('.caption').animate({
  49.                                                 bottom:0
  50.                                         },200);
  51.                                 }
  52.                         });
  53.                 });
  54.         </script>
  55.  
  56.  
  57. <script type="text/javascript">
  58. $(function () {
  59.         $("#slider1").slider({
  60.                 width: 940,
  61.                 height: 410,
  62.                 orientation: "vertical",
  63.                 speed:500,
  64.         });    
  65. });
  66. </script>      
  67.  
  68. <script type="text/javascript" src="js/stepcarousel.js"></script>
  69. <script type="text/javascript">
  70. stepcarousel.setup({
  71.         galleryid: 'mygallery', //id of carousel DIV
  72.         beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  73.         panelclass: 'panel', //class of panel DIVs each holding content
  74.         autostep: {enable:true, moveby:1, pause:3000},
  75.         panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  76.         defaultbuttons: {enable: true, moveby: 1, leftnav: [], rightnav: []},
  77.         statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  78.         contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  79. })
  80.  
  81. stepcarousel.setup({
  82.         galleryid: 'galleryb', //id of carousel DIV
  83.         beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  84.         panelclass: 'panel', //class of panel DIVs each holding content
  85.         panelbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
  86.         defaultbuttons: {enable: false, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
  87.         statusvars: ['reportA', 'reportB', 'reportC'],
  88.         contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
  89. })
  90.  
  91.  
  92. stepcarousel.setup({
  93.         galleryid: 'galleryc', //id of carousel DIV
  94.         beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  95.         panelclass: 'panel', //class of panel DIVs each holding content
  96.         panelbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
  97.         defaultbuttons: {enable: false, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
  98.         statusvars: ['reportA', 'reportB', 'reportC'],
  99.         contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
  100. })
  101.  
  102. stepcarousel.setup({
  103.         galleryid: 'galleryd', //id of carousel DIV
  104.         beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  105.         panelclass: 'panel', //class of panel DIVs each holding content
  106.         panelbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
  107.         defaultbuttons: {enable: false, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
  108.         statusvars: ['reportA', 'reportB', 'reportC'],
  109.         contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
  110. })
  111.  
  112. stepcarousel.setup({
  113.         galleryid: 'gallerye', //id of carousel DIV
  114.         beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  115.         panelclass: 'panel', //class of panel DIVs each holding content
  116.         panelbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
  117.         defaultbuttons: {enable: false, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
  118.         statusvars: ['reportA', 'reportB', 'reportC'],
  119.         contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
  120. })
  121.  
  122. </script>
  123. <style type="text/css">
  124. .mcs2_container{
  125.         height:250px;
  126.         overflow:hidden;       
  127.         }
  128. #InvestorNews,#FinancialReports{height:250px;overflow:hidden;} 
  129. </style>
  130.  
  131. </head>
  132.  
  133. <body onLoad="loadTweets()">
  134. <div id="wrapper">
  135.  
  136.         <div id="header">
  137.         <a href="#" class="logo"><img src="images/nation-media-logo.png" alt="" /></a>
  138.         <div class="float_right">
  139.                 <div class="social-media0">
  140.                 <a href="#"><img src="images/twitter-icon.png" alt="" /></a>
  141.                 <a href="#"><img src="images/facebook-icon.png" alt="" /></a>
  142.                 <a href="#"><img src="images/rss-icon.png" alt="" /></a>
  143.                 <a href="#"><img src="images/facebook-like.png" alt="" /></a>
  144.                 <a href="#"><img src="images/google-plus.png" alt="" /></a>
  145.             </div>
  146.             <div class="site-serach">
  147.                 <input type="text" value="Search" name="" onfocus="if(this.value=='Search') this.value=''" onblur="if(this.value=='') this.value='Search'" />
  148.                 <input type="submit" value="" name="" class="search-button" />
  149.             </div>
  150.         </div>
  151.     </div>
  152.     <!-- end of header -->
  153.  
  154.     <div class="current-twitter-post">
  155.         <img src="images/icon-twitter-post.png" alt="" />
  156.         <p>
  157. <div id="scroller">Loading...</div>
  158. <script type="text/javascript">
  159.     $("div#scroller").twitscroller({user: 'dailynation'});
  160. </script>
  161. </p>
  162.     </div>
  163.     <!-- end of twitter latest post -->
  164.  
  165.     <div id="slider1" class="slider">
  166.         <div class="slider-box">    
  167.             <div class="slider-item custom-item">
  168.                 <div class="two-content">
  169.                     <div class="corporate-news-desk">
  170.                        
  171.                        
  172.                       <div class="our-vision2">
  173.                         <h1>CORPORATE</h1>
  174.                         <ul>
  175.                             <li>
  176.                             <img src="images/corporate-desk-img1.jpg" alt="" />
  177.                             <p><span>The Nation was founded by His Highness the Aga Khan as a voice for the majority African population as it clamoured for independence. After independence....</span></p>
  178.                             <a href="#" class="more-button">more</a>
  179.                             </li>
  180.                         </ul>
  181.                        
  182.                     </div>
  183.                    
  184.                     <div class="our-vision2">
  185.                         <h1>INVESTOR</h1>
  186.                         <ul>
  187.                             <li>
  188.                             <img src="images/corporate-desk-img3.jpg" alt="" />
  189.                             <p><span>The Nation was founded by His Highness the Aga Khan as a voice for the majority African population as it clamoured for independence. After independence....</span></p>
  190.                             <a href="#" class="more-button">more</a>
  191.                             </li>
  192.                         </ul>
  193.                        
  194.                     </div>
  195.                    
  196.                    
  197.                                         <div class="our-vision2">
  198.                         <h1>NATIONLIFE</h1>
  199.                         <ul>
  200.                             <li>
  201.                             <img src="images/corporate-desk-img2.jpg" alt="" />
  202.                             <p><span>The Nation was founded by His Highness the Aga Khan as a voice for the majority African population as it clamoured for independence. After independence....</span></p>
  203.                             <a href="#" class="more-button">more</a>
  204.                             </li>
  205.                         </ul>
  206.                        
  207.                     </div>
  208.                    
  209.               </div>
  210.                    
  211.                     <div class="our-vision">
  212.                         <h1>A  WORLD   CLASS  VISION</h1>
  213.                         <ul>
  214.                             <li>
  215.                             <img src="images/vision.jpg" alt="" />
  216.                             <p><span>The Nation was founded by His Highness the Aga Khan as a voice for the majority African population as it clamoured for independence. After independence, the newspaper became an effective voice of the people....</span></p>
  217.                             <a href="#" class="more-button">more</a>
  218.                             </li>
  219.                         </ul>
  220.                        
  221.                     </div>
  222.                 </div>
  223.  
  224.                 <div class="sideBar" id="stepcarouse-wrapper">                
  225.                                         <h1>CORPORATE BARAZA</h1>
  226.                     <div id="mygallery" class="stepcarousel">
  227.                         <div class="belt">
  228.                             <div class="panel">
  229.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  230.                                 <p>NATIONLIFE MAGAZINE</p>
  231.                             </div>
  232.                             <div class="panel">
  233.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  234.                                 <p>NATIONLIFE MAGAZINE</p>
  235.                             </div>
  236.                             <div class="panel">
  237.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  238.                                 <p>NATIONLIFE MAGAZINE</p>
  239.                             </div>
  240.                         </div>
  241.                     </div>
  242.                    
  243.                     <p id="mygallery-paginate">
  244.                         <img src="images/slider-nav.png" data-over="images/slider-nav-focus.png" data-select="images/slider-nav-focus.png" data-moveby="1" />
  245.                     </p>
  246.                                 </div>
  247.             </div>
  248.             <!-- homepage content end here -->
  249.            
  250.             <div class="slider-item custom-item" id="aboutUs">
  251.                 <div class="two-content">
  252.                     <h1>Company History</h1>
  253.                     <ul class="social-media">
  254.                         <li><a href="#">twitter</a></li>
  255.                         <li><a href="#">facebook</a></li>
  256.                         <li><a href="#">rss</a></li>
  257.                         <li><a href="#">email</a></li>
  258.                     </ul>
  259.        
  260.                                         <!-- content block -->
  261.                                         <div id="mcs_container">
  262.                             <div class="customScrollBox">
  263.                             <div class="container">
  264.                                 <div class="content">
  265.  
  266.                                     <p>The Nation Media Group (NMG) founded by His Highness the Aga Khan in 1959 has become the largest independent media house in East and Central Africa. It has been quoted on the Nairobi Stock Exchange since the early 1970s. As the leading multi-media house in the East African region, it has print as well as electronic media and the Internet which attracts a regular readership quite unparalleled in the region. On the financial front, the Group’s performance over the years has been outstanding even in the leaner economic periods in the country and shows continuous growth and profits for the company as well as the shareholders. <a href="#" class="contact">Contact</a></p>
  267.                                    
  268.                                    
  269.                                
  270.                                 </div>
  271.                             </div>
  272.                            
  273.                             <div class="dragger_container">
  274.                                 <div class="dragger"></div>
  275.                             </div>
  276.                             </div>    
  277.                     </div>
  278.                 </div>
  279.                
  280.                 <div class="sideBar" id="stepcarouse-wrapper">                
  281.                                         <h1>CORPORATE BARAZA</h1>
  282.                                         <div id="galleryb" class="stepcarousel">
  283.                         <div class="belt">
  284.                             <div class="panel">
  285.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  286.                                 <p>NATIONLIFE MAGAZINE</p>
  287.                             </div>
  288.                             <div class="panel">
  289.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  290.                                 <p>NATIONLIFE MAGAZINE</p>
  291.                             </div>
  292.                             <div class="panel">
  293.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  294.                                 <p>NATIONLIFE MAGAZINE</p>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                    
  299.                     <p id="galleryb-paginate">
  300.                         <img src="images/slider-nav.png" data-over="images/slider-nav-focus.png" data-select="images/slider-nav-focus.png" data-moveby="1" />
  301.                     </p>
  302.                                 </div>
  303.                 <!-- side bar end here -->
  304.             </div>
  305.             <!-- about us content end here -->
  306.            
  307.             <div class="slider-item custom-item" id="investerContainer">
  308.                 <div class="two-content">
  309.                     <h1>Investor</h1>
  310.                     <ul class="social-media">
  311.                         <li><a href="#">twitter</a></li>
  312.                         <li><a href="#">facebook</a></li>
  313.                         <li><a href="#">rss</a></li>
  314.                         <li><a href="#">email</a></li>
  315.                     </ul>
  316.        
  317.                                         <!-- content block -->
  318.                                         <div id="mcs2_container" class="mcs2_container">
  319.                             <div class="customScrollBox">
  320.                             <div class="container">
  321.                                 <div class="content">                                  
  322.                                         <h3>THE JOURNEY OF THE NATION : 1970 - 1979</h3>                                    
  323.                                     <p>The Nation Media Group (NMG) founded by His Highness the Aga Khan in 1959 has become the largest independent media house in East and Central Africa. It has been quo ted on the Nairobi Stock Exchange since the early 1970s. As the leading multi-media house in the East African region, it has print as well as electronic media and the Internet which attracts a regular readership quite unparalleled in the region. On the financial front, the Group's performance over the years has been outstanding even in the leaner economic periods in the country and shows continuous growth and profits for the company as well as the shareholders. </p>
  324.                                    
  325.                                         <h3>THE JOURNEY OF THE NATION : 1970 - 1979</h3>                                    
  326.                                     <p>The Monitor was started in 1992 and has grown from a basement operation to a multi-media consortium with offices spread across Kampala city. Besides the daily and Sunday Monitor papers, Monitor Publications Ltd. runs an FM radio station, 93.3 KFM. All these products have been re-launched in the past year to great success. Daily Monitor and Sunday Monitor are now the leading independent national newspapers in Uganda while KFM attained market leadership in Uganda's crowded FM market. </p>
  327.                                
  328.                                 </div>
  329.                                
  330.                             </div>
  331.                            
  332.                             <div class="dragger_container">
  333.                                 <div class="dragger"></div>
  334.                             </div>
  335.                             </div>
  336.                         <div id="InvestorNews">
  337.                                         This div is InvestorNews Div
  338.                                 </div>
  339.                                 <div id="FinancialReports">
  340.                                         This div is FinancialReports Div
  341.                                 </div>  
  342.                     </div>
  343.                 </div>
  344.                
  345.                 <div class="sideBar">
  346.                     <h1>INVESTOR INFORMATION</h1>
  347.                     <ul class="sideBar-nav" id="investorSideBar-nav">
  348.                         <li><a href="#InvestorNews" title="Investor News">Investor News</a></li>
  349.                         <li><a href="#FinancialReports" title="Financial Reports" class="current">Financial Reports</a></li>
  350.                         <li><a href="#SharePrices" title="Share Prices">Share Prices</a></li>
  351.                         <li><a href="#ShareHolderProfile" title="Share Holder Profile">Share Holder Profile</a></li>
  352.                     </ul>
  353.                         </div>
  354.  
  355.                 <!-- side bar end here -->
  356.             </div>
  357.             <!-- investor content end here -->
  358.  
  359.                         <div class="slider-item custom-item">
  360.                 <div class="two-content">
  361.                     <h1>News</h1>
  362.                     <ul class="social-media">
  363.                         <li><a href="#">twitter</a></li>
  364.                         <li><a href="#">facebook</a></li>
  365.                         <li><a href="#">rss</a></li>
  366.                         <li><a href="#">email</a></li>
  367.                     </ul>
  368.        
  369.                                         <!-- content block -->
  370.                                         <div id="mcs2_container">
  371.                             <div class="customScrollBox">
  372.                             <div class="container">
  373.                                 <div class="content">
  374.                                     <h3>THE JOURNEY OF THE NATION : 1970 - 1979</h3>
  375.                                     <p>The Nation Media Group (NMG) founded by His Highness the Aga Khan in 1959 has become the largest independent media house in East and Central Africa. It has been quo ted on the Nairobi Stock Exchange since the early 1970s. As the leading multi-media house in the East African region, it has print as well as electronic media and the Internet which attracts a regular readership quite unparalleled in the region. On the financial front, the Group's performance over the years has been outstanding even in the leaner economic periods in the country and shows continuous growth and profits for the company as well as the shareholders. </p>
  376.                                    
  377.                                     <h3>Monitor Publications Ltd - Uganda </h3>
  378.                                     <p>The Monitor was started in 1992 and has grown from a basement operation to a multi-media consortium with offices spread across Kampala city. Besides the daily and Sunday Monitor papers, Monitor Publications Ltd. runs an FM radio station, 93.3 KFM. All these products have been re-launched in the past year to great success. Daily Monitor and Sunday Monitor are now the leading independent national newspapers in Uganda while KFM attained market leadership in Uganda's crowded FM market. </p>
  379.                                
  380.                                 </div>
  381.                             </div>
  382.                            
  383.                             <div class="dragger_container">
  384.                                 <div class="dragger"></div>
  385.                             </div>
  386.                             </div>    
  387.                     </div>
  388.                 </div>
  389.                
  390.                 <div class="sideBar"  id="stepcarouse-wrapper">                
  391.                                         <h1>CORPORATE BARAZA</h1>
  392.                                         <div id="galleryc" class="stepcarousel">
  393.                         <div class="belt">
  394.                             <div class="panel">
  395.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  396.                                 <p>NATIONLIFE MAGAZINE</p>
  397.                             </div>
  398.                             <div class="panel">
  399.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  400.                                 <p>NATIONLIFE MAGAZINE</p>
  401.                             </div>
  402.                             <div class="panel">
  403.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  404.                                 <p>NATIONLIFE MAGAZINE</p>
  405.                             </div>
  406.                         </div>
  407.                     </div>
  408.                    
  409.                     <p id="galleryc-paginate">
  410.                         <img src="images/slider-nav.png" data-over="images/slider-nav-focus.png" data-select="images/slider-nav-focus.png" data-moveby="1" />
  411.                     </p>
  412.                                 </div>
  413.                 <!-- side bar end here -->
  414.             </div>
  415.             <!-- news content end here -->
  416.  
  417.             <div class="slider-item custom-item">
  418.                 <div class="two-content">
  419.                     <h1>BOARD OF DIRECTORS</h1>
  420.                     <ul class="social-media">
  421.                         <li><a href="#">twitter</a></li>
  422.                         <li><a href="#">facebook</a></li>
  423.                         <li><a href="#">rss</a></li>
  424.                         <li><a href="#">email</a></li>
  425.                     </ul>
  426.        
  427.                                         <!-- content block -->
  428.                    
  429.                    
  430.                                         <div id="mcs3_container">
  431.                             <div class="customScrollBox">
  432.                             <div class="container">
  433.                                 <div class="content">
  434.                                     <h3>Mr Linus Gitahi</h3>
  435.                                     <p>
  436.                                     <img src="images/linus-gitahi.jpg" alt="" align="left" style="margin:0 20px 5px 0; float:left; border:none;" />
  437.                                     Holds an MBA from USIU and a Bachelor of Commerce (Accounting) from the University of Nairobi. He is the Group Chief Executive Officer and joined the board in December 2006. He previously worked with a leading pharmaceutical company as Managing Director based in Nigeria. He is a director of the Group's subsidiary companies and Property Development and Management Limited, an associate company.  Mr. Gitahi is a member of the Nominations, the Editorial and the Strategic Planning Committees.</p>
  438.                                    
  439.                                     <h3>Mr Linus Gitahi</h3>
  440.                                     <p>
  441.                                     <img src="images/linus-gitahi.jpg" alt="" align="left" style="margin:0 20px 5px 0; float:left; border:none;" />
  442.                                     Holds an MBA from USIU and a Bachelor of Commerce (Accounting) from the University of Nairobi. He is the Group Chief Executive Officer and joined the board in December 2006. He previously worked with a leading pharmaceutical company as Managing Director based in Nigeria. He is a director of the Group's subsidiary companies and Property Development and Management Limited, an associate company.  Mr. Gitahi is a member of the Nominations, the Editorial and the Strategic Planning Committees.</p>
  443.  
  444.                                     <h3>Mr Linus Gitahi</h3>
  445.                                     <p>
  446.                                     <img src="images/linus-gitahi.jpg" alt="" align="left" style="margin:0 20px 5px 0; float:left; border:none;" />
  447.                                     Holds an MBA from USIU and a Bachelor of Commerce (Accounting) from the University of Nairobi. He is the Group Chief Executive Officer and joined the board in December 2006. He previously worked with a leading pharmaceutical company as Managing Director based in Nigeria. He is a director of the Group's subsidiary companies and Property Development and Management Limited, an associate company.  Mr. Gitahi is a member of the Nominations, the Editorial and the Strategic Planning Committees.</p>                                    
  448.                                
  449.                                 </div>
  450.                             </div>
  451.                            
  452.                             <div class="dragger_container">
  453.                                 <div class="dragger"></div>
  454.                             </div>
  455.                             </div>    
  456.                     </div>
  457.                 </div>
  458.                
  459.                 <div class="sideBar">
  460.                     <h1>EXECUTIVE PROFILE</h1>
  461.                     <ul class="sideBar-nav">
  462.                         <li><a href="#" title="Executive Team">Executive Team</a></li>
  463.                         <li><a href="#" title="Board of Directors" class="current">Board of Directors</a></li>
  464.                     </ul>
  465.                         </div>
  466.                 <!-- side bar end here -->
  467.             </div>
  468.             <!-- board content end here -->
  469.            
  470.             <div class="slider-item custom-item">
  471.                 <div class="two-content">
  472.                     <h1>OUR BRAND</h1>
  473.                     <ul class="social-media">
  474.                         <li><a href="#">twitter</a></li>
  475.                         <li><a href="#">facebook</a></li>
  476.                         <li><a href="#">rss</a></li>
  477.                         <li><a href="#">email</a></li>
  478.                     </ul>
  479.        
  480.                                         <!-- content block -->
  481.                    
  482.                    
  483.                                         <div id="mcs4_container">
  484.                             <div class="customScrollBox">
  485.                             <div class="container">
  486.                                 <div class="content">
  487.                                     <h3>The Daily Nation</h3>
  488.                                     <p><img src="images/daily-nation-img.jpg" alt="" align="left" style="border:none; margin:0 10px 10px 0; float:left;" />
  489.                                     The Daily Nation is the leading paper in East and Central Africa both in editorial, circulation and readership.This feat has been achieved over the years through authoritative publication based on truth, reliability, respectability and independence.</p>
  490.                                     <br class="clear_float" />
  491.                                    
  492.                                     <a href="#" class="button-web-site">View Website</a>
  493.                                     <br class="clear_float" />
  494.                                     <br class="clear_float" />
  495.                                    
  496.  
  497.                                                                     <h3>The Daily Nation</h3>
  498.                                     <p><img src="images/daily-nation-img.jpg" alt="" align="left" style="border:none; margin:0 10px 10px 0; float:left;" />
  499.                                     The Daily Nation is the leading paper in East and Central Africa both in editorial, circulation and readership.This feat has been achieved over the years through authoritative publication based on truth, reliability, respectability and independence.</p>
  500.                                     <br class="clear_float" />
  501.                                    
  502.                                     <a href="#" class="button-web-site">View Website</a>
  503.                                                                         <br class="clear_float" />
  504.                                     <br class="clear_float" />
  505.                                 </div>
  506.                             </div>
  507.                            
  508.                             <div class="dragger_container">
  509.                                 <div class="dragger"></div>
  510.                             </div>
  511.                             </div>    
  512.                     </div>
  513.                 </div>
  514.                
  515.                 <div class="sideBar" id="stepcarouse-wrapper">                
  516.                                         <h1>CORPORATE BARAZA</h1>
  517.                                         <div id="galleryd" class="stepcarousel">
  518.                         <div class="belt">
  519.                             <div class="panel">
  520.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  521.                                 <p>NATIONLIFE MAGAZINE</p>
  522.                             </div>
  523.                             <div class="panel">
  524.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  525.                                 <p>NATIONLIFE MAGAZINE</p>
  526.                             </div>
  527.                             <div class="panel">
  528.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  529.                                 <p>NATIONLIFE MAGAZINE</p>
  530.                             </div>
  531.                         </div>
  532.                     </div>
  533.                    
  534.                     <p id="galleryd-paginate">
  535.                         <img src="images/slider-nav.png" data-over="images/slider-nav-focus.png" data-select="images/slider-nav-focus.png" data-moveby="1" />
  536.                     </p>
  537.                                 </div>
  538.                 <!-- side bar end here -->
  539.             </div>
  540.             <!-- Our Brand content end here -->
  541.            
  542.             <div class="slider-item custom-item">
  543.                 <h1>Careers</h1>
  544.                 <p>Content</p>
  545.             </div>
  546.             <!-- Careers content end here -->
  547.            
  548.             <div class="slider-item custom-item">
  549.                 <h1>Blog</h1>
  550.                 <p>Content</p>
  551.             </div>
  552.             <!-- Blog content end here -->
  553.            
  554.             <div class="slider-item custom-item">
  555.                 <h1>Youtube Channel</h1>
  556.                 <p> <iframe height="260" src="http://www.youtube.com/embed/videoseries?list=PL904A590924728B3B" frameborder="0" width="60%"></iframe></p>
  557.             </div>
  558.             <!-- Youtube content end here -->
  559.            
  560.             <div class="slider-item custom-item">
  561.                 <div class="two-content">
  562.                                        
  563.                     <h1>Contact us</h1>
  564.                     <ul class="social-media">
  565.                         <li><a href="#">twitter</a></li>
  566.                         <li><a href="#">facebook</a></li>
  567.                         <li><a href="#">rss</a></li>
  568.                         <li><a href="#">email</a></li>
  569.                     </ul>
  570.  
  571.                                         <!-- content block -->
  572.                         <form class="contact-form">
  573.                     <ul>
  574.                     <li>
  575.                     <label>Name:</label>
  576.                     <input type="text" value="" name="" />
  577.                     </li>
  578.                     <li>
  579.                     <label>Email:</label>
  580.                     <input type="text" value="" name="" />
  581.                     </li>
  582.                     <li>
  583.                     <label>Subject:</label>
  584.                     <input type="text" value="" name="" />
  585.                     </li>
  586.                     <li>
  587.                     <label>Message:</label>
  588.                     <textarea></textarea>
  589.                     </li>
  590.                     <li>
  591.                     <label>&nbsp;</label>
  592.                     <input type="submit" value="" name="" class="submit-form" />
  593.                     </li>
  594.                     </ul>
  595.                     </form>
  596.                    
  597.                     <div class="contact-add">
  598.                     <h3>Nation Media Group</h3>
  599.                     <p>P.O. Box 49010-00100 GPO, NBI<br />
  600.                     Nation Centre, Kimathi Street<br />
  601.                     Fax: + 254 20 2213946<br />
  602.                     Tel:  + 254 20 3288000<br />
  603.                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ 254 20 2221222
  604.                     </div>
  605.                    
  606.                 </div>
  607.                
  608.                 <div class="sideBar" id="stepcarouse-wrapper">                
  609.                                         <h1>CORPORATE BARAZA</h1>
  610.                                         <div id="gallerye" class="stepcarousel">
  611.                         <div class="belt">
  612.                             <div class="panel">
  613.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  614.                                 <p>NATIONLIFE MAGAZINE</p>
  615.                             </div>
  616.                             <div class="panel">
  617.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  618.                                 <p>NATIONLIFE MAGAZINE</p>
  619.                             </div>
  620.                             <div class="panel">
  621.                                 <img src="images/corporate-slider-img1.jpg" alt="" />
  622.                                 <p>NATIONLIFE MAGAZINE</p>
  623.                             </div>
  624.                         </div>
  625.                     </div>
  626.                    
  627.                     <p id="gallerye-paginate">
  628.                         <img src="images/slider-nav.png" data-over="images/slider-nav-focus.png" data-select="images/slider-nav-focus.png" data-moveby="1" />
  629.                     </p>
  630.                                 </div>
  631.             </div>
  632.             <!-- Contact content end here -->
  633.            
  634.         </div>
  635.    
  636.         <ul id="navigation" class="slider-nav">
  637.             <li><a href="#" title="HOME" class="home">HOME</a></li>
  638.             <li><a href="#" title="ABOUT US" class="about-us">ABOUT</a></li>
  639.             <li><a href="#" title="INVESTORS" class="investors">INVESTORS</a></li>
  640.             <li><a href="#" title="NEWS" class="news">NEWS</a></li>
  641.             <li><a href="#" title="BOARD" class="board">BOARD</a></li>
  642.             <li><a href="#" title="OUR BRANDS" class="our-brands">OUR BRANDS</a></li>
  643.             <li><a href="#" title="CAREERS" class="careers">CAREERS</a></li>
  644.             <li><a href="#" title="BLOG" class="blog">BLOG</a></li>
  645.             <li><a href="#" title="YOUTUBE" class="youtube">YOUTUBE</a></li>
  646.                         <li><a href="#" title="CONTACT" class="contact">CONTACT</a></li>
  647.             <li><a href="#" class="blank">&nbsp;</a></li>
  648.         </ul>
  649.         <!-- end of navigation -->
  650.        
  651.     </div>
  652.     <!-- end of page content slider wrapper -->
  653.  
  654.         <div class="brands">
  655.    
  656.    
  657.                 <div id="example">
  658.                         <div id="slides">
  659.                                 <div class="slides_container">
  660.                                        
  661.                                         <div class="slide">
  662.                                                 <a href="http://www.nation.co.ke/" title="Daily Nation" target="_blank"><img src="images/brands/nation.jpg" width="728" height="90" alt="Slide 1"></a>
  663.                                                 <div class="caption">
  664.                                                         <p>Daily Nation</p>
  665.                                                 </div>
  666.                                         </div>
  667.                                         <div class="slide">
  668.                                                 <a href="http://www.africareview.com/" title="Africa review" target="_blank"><img src="images/brands/africareview.jpg" width="728" height="90" alt="Slide 2"></a>
  669.                                                 <div class="caption">
  670.                                                         <p>Africa review</p>
  671.                                                 </div>
  672.                                         </div>
  673.                                         <div class="slide">
  674.                                                 <a href="http://www.ntv.co.ke/" title="NTV - Turning on Your World" target="_blank"><img src="images/brands/ntv.jpg" width="728" height="90" alt="Slide 3"></a>
  675.                                                 <div class="caption">
  676.                                                         <p>NTV - Turning on Your World</p>
  677.                                                 </div>
  678.                                         </div>
  679.                                         <div class="slide">
  680.                                                 <a href="http://www.theeastafrican.co.ke/" title="The East African - Understanding the Region" target="_blank"><img src="images/brands/theastafrican.jpg" width="728" height="90" alt="Slide 4"></a>
  681.                                                 <div class="caption">
  682.                                                         <p>The East African - Understanding the Region</p>
  683.                                                 </div>
  684.                                         </div>
  685.                                         <div class="slide">
  686.                                                 <a href="http://www.businessdailyafrica.com/" title="Business Daily - More Possibilities" target="_blank"><img src="images/brands/businessdaily.jpg" width="728" height="90" alt="Slide 5"></a>
  687.                                                 <div class="caption">
  688.                                                         <p>Business Daily - More Possibilities</p>
  689.                                                 </div>
  690.                                         </div>
  691.                                 </div>
  692.                         </div>
  693.                 </div>
  694.        
  695.        
  696.         </div>
  697.     <!-- end of brands -->
  698.    
  699.         <!-- end of page content slider wrapper -->
  700.  
  701.         <div class="advertisement">
  702.         <a href="http://nationmedia.com/newsletter/newsletter.html"><img src="images/ads.jpg" alt="" /></a>
  703.     </div>
  704.     <!-- end of advertisement -->
  705.    
  706.     <div class="footer">
  707.          <p>Copyright &copy; 2012 Nation Media Group. All rights reserved.</p>
  708.                 <p>Reproduction in whole or in part in any form or medium without express written permission of Nation Media Group is prohibited.</p>
  709.         <p>&nbsp;</p>
  710.     </div>
  711.     <!-- end of footer -->
  712.    
  713. </div>    
  714. <!-- end of wrapper -->
  715.  
  716. <script>
  717. $(window).load(function() {
  718.         mCustomScrollbars();
  719.     $('ul#investorSideBar-nav li a').each(function(){
  720.                 var $anchor = $(this);
  721.                 $anchor.bind('click',function(event){
  722.                         //alert($($anchor.attr('href')).offset().top); 
  723.                         $('#investerContainer .mcs2_container').stop().animate({
  724.                                 scrollTop: $($anchor.attr('href')).offset().top
  725.                         }, 1500,'easeInOutExpo');
  726.                 /*
  727.                 if you don't want to use the easing effects:
  728.                 $('html, body').stop().animate({
  729.                         scrollTop: $($anchor.attr('href')).offset().top
  730.                 }, 1000);
  731.                 */
  732.                                 event.preventDefault();
  733.                         });    
  734.         })
  735.                                
  736. });
  737.  
  738. function mCustomScrollbars(){
  739.         /*
  740.         malihu custom scrollbar function parameters:
  741.         1) scroll type (values: "vertical" or "horizontal")
  742.         2) scroll easing amount (0 for no easing)
  743.         3) scroll easing type
  744.         4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)
  745.         5) scrollbar height/width adjustment (values: "auto" or "fixed")
  746.         6) mouse-wheel support (values: "yes" or "no")
  747.         7) scrolling via buttons support (values: "yes" or "no")
  748.         8) buttons scrolling speed (values: 1-20, 1 being the slowest)
  749.         */
  750.         $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
  751.         $("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"auto","yes","no",0);
  752.         $("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","no","no",0);
  753.         $("#mcs4_container").mCustomScrollbar("vertical",200,"easeOutCirc",1.25,"fixed","yes","no",0);
  754.         $("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20);
  755. }
  756.  
  757. /* function to fix the -10000 pixel limit of jquery.animate */
  758. $.fx.prototype.cur = function(){
  759.     if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
  760.       return this.elem[ this.prop ];
  761.     }
  762.     var r = parseFloat( jQuery.css( this.elem, this.prop ) );
  763.     return typeof r == 'undefined' ? 0 : r;
  764. }
  765.  
  766. /* function to load new content dynamically */
  767. function LoadNewContent(id,file){
  768.         $("#"+id+" .customScrollBox .content").load(file,function(){
  769.                 mCustomScrollbars();
  770.         });
  771. }
  772. </script>
  773. <script src="js/jquery.mCustomScrollbar.js"></script>
  774. </body>
  775. </html>
clone this paste RAW Paste Data