jegtheme

shortcode.html

Jan 20th, 2014
209
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 52.21 KB | None | 0 0
  1. <!doctype html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" dir="ltr" lang="en-US"> <![endif]-->
  3. <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" dir="ltr" lang="en-US"> <![endif]-->
  4. <!--[if IE 8]>    <html class="no-js lt-ie9" dir="ltr" lang="en-US"> <![endif]-->
  5. <!--[if IE 9]>    <html class="no-js lt-ie10" dir="ltr" lang="en-US"> <![endif]-->
  6. <!--[if gt IE 8]><!--> <html class="no-js" dir="ltr" lang="en-US"> <!--<![endif]-->
  7. <head>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  9.     <title>Shortcode &amp; Element - JPhotolio</title>
  10.    
  11.     <!-- enable responsive -->
  12.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  13.     <meta name="apple-mobile-web-app-capable" content="yes" />
  14.        
  15.     <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  16.     <link rel="shortcut icon" type="image/x-icon" href="images/jlio.ico"/>      
  17.     <link rel="apple-touch-icon-precomposed" href="images/touchicon.png"/>
  18.    
  19.     <!-- Meta keyword & description -->
  20.     <meta name="description" content="Thems for Wedding Photographer" />
  21.     <meta name="keywords" content="themes, wedding, photographer"/>
  22.     <meta name="revisit-after" content="1 days" />
  23.        
  24.     <!-- Load required stylesheet -->
  25.     <link rel="stylesheet" href="css/bootstrap.css">
  26.     <link rel="stylesheet" href="css/bootstrap-responsive.css">    
  27.     <link rel="stylesheet" href="css/style.css">   
  28.     <link rel="stylesheet" href="css/style-responsive.css">
  29.     <link rel="stylesheet" href="css/plugin.css">
  30.     <link rel="stylesheet" href="css/mediaelement/mediaelementplayer.css">
  31.     <link rel="stylesheet" href="css/blue.monday/jplayer.blue.monday.css">      
  32.     <link rel="stylesheet" href="css/control.css">
  33.    
  34.     <!-- Load Required Javascript -->
  35.     <script type="text/javascript">
  36.         var contact_url  = "php/contactresponse.php",
  37.             template_css = "css/",         
  38.             ajax_url     = "ajax/",
  39.             jcurtain     = "1",
  40.             curtainstyle = "fade";
  41.     </script>
  42.    
  43.     <script type='text/javascript' src='js/jquery.js'></script>
  44.     <script type='text/javascript' src='js/modernizr.js'></script>
  45.     <script type='text/javascript' src='js/plugins.js'></script>
  46.     <script type='text/javascript' src='js/script.js'></script>
  47.    
  48.     <script type='text/javascript' src='http://www.youtube.com/player_api?ver=3.4'></script>
  49.     <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&#038;ver=3.4'></script>
  50.     <script type='text/javascript' src='http://connect.facebook.net/en_US/all.js?ver=3.4#xfbml=1'></script>
  51.     <script type='text/javascript' src='http://platform.twitter.com/widgets.js?ver=3.4'></script>
  52.    
  53.     <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700&amp;v1' rel='stylesheet' type='text/css'>
  54.     <link href='http://fonts.googleapis.com/css?family=Overlock:italic&amp;v1' rel='stylesheet' type='text/css'>   
  55.     <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular&amp;v1' rel='stylesheet' type='text/css'>
  56. </head>
  57. <body>
  58.  
  59.   <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
  60.        chromium.org/developers/how-tos/chrome-frame-getting-started -->
  61.   <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  62.   <header>     
  63.         <nav>
  64.             <div class="navleft">
  65.                 <div class="navleft-wrapper">
  66.                     <ul class="menu">
  67.                         <li class="bgnav">
  68.                             <a href="blog.html">   
  69.                                 <h3>Blog Page</h3>
  70.                                 <span>Your dailly blog</span>
  71.                             </a>                           
  72.                         </li>
  73.                         <li class="bgnav">
  74.                             <a href="masonry.html">
  75.                                 <h3>Portfolio</h3>
  76.                                 <span>What we have done</span>
  77.                             </a>
  78.                         </li>                      
  79.                     </ul>
  80.                 </div>         
  81.             </div>
  82.             <div class="navright">
  83.                 <div class="navright-wrapper">
  84.                     <ul class="menu">
  85.                         <li class="bgnav">
  86.                             <a href="#!">  
  87.                                 <h3>Page</h3>
  88.                                 <span>Testimonial, shortcode</span>
  89.                             </a>                           
  90.                             <ul class="submenu">
  91.                                 <li class="bgnav">
  92.                                     <a href="shortcode.html">
  93.                                         <h3>Shortcode & Element</h3>           
  94.                                     </a>
  95.                                 </li>
  96.                                 <li class="bgnav">
  97.                                     <a href="#!">
  98.                                         <h3>Layout</h3>                            
  99.                                     </a>
  100.                                     <ul class="submenu">
  101.                                         <li class="bgnav">
  102.                                             <a href="fullwidth.html">  
  103.                                                 <h3>Full Width</h3>                            
  104.                                             </a>
  105.                                         </li>
  106.                                         <li class="bgnav">
  107.                                             <a href="leftsidebar.html">
  108.                                                 <h3>Left Sidebar</h3>                              
  109.                                             </a>
  110.                                         </li>
  111.                                         <li class="bgnav">
  112.                                             <a href="rightsidebar.html">   
  113.                                                 <h3>Right Sidebar</h3>                             
  114.                                             </a>
  115.                                         </li>
  116.                                     </ul>  
  117.                                 </li>
  118.                             </ul>  
  119.                         </li>
  120.                         <li class="bgnav">
  121.                             <a href="contact.html">
  122.                                 <h3>Contact Us</h3>
  123.                                 <span>We won't bite you</span>
  124.                             </a>
  125.                         </li>                      
  126.                     </ul>
  127.                 </div>         
  128.             </div>
  129.         </nav>     
  130.         <div class="logo">
  131.             <a href="index.html">
  132.                 <!-- Logo masuk sini -->
  133.                 <img alt="" src="images/logo.png" />
  134.             </a>
  135.         </div>
  136.         <div class="navselect">
  137.             <select>
  138.                 <option value="#!/">Navigate ...</option>
  139.                 <option  value="blog.html"> Blog Page</option>
  140.                 <option  value="masonry.html"> Portfolio</option>
  141.                 <option  value="#!"> Page</option>
  142.                 <option  value="fullwidth.html">&nbsp;&nbsp; Shortcode</option>
  143.                 <option  value="#!">&nbsp;&nbsp; Layout</option>
  144.                 <option  value="shortcode.html">&nbsp;&nbsp;&nbsp;&nbsp; Full Width</option>
  145.                 <option  value="leftsidebar.html">&nbsp;&nbsp;&nbsp;&nbsp; Left Side</option>
  146.                 <option  value="rightsidebar.html">&nbsp;&nbsp;&nbsp;&nbsp; Right Side</option>
  147.                 <option  value="contact.html"> Contact Us</option>                 
  148.             </select>
  149.         </div>     
  150.  </header>
  151.  
  152.  <div class="notification">
  153.     <div class="notification-wrapper">
  154.         <div class="notification-belt">&nbsp;</div>
  155.         <div class="notification-content"></div>
  156.         <div class="closeme" style="display: block;">
  157.             <div class="icon-remove"></div>
  158.         </div>
  159.     </div>
  160.  </div>
  161.  
  162.    
  163.  <div role="main" id="mainouter">
  164.     <div id="main">
  165.         <div class="container">
  166.             <div class="blog-full-width">
  167.                 <div class="blogentry containerborder">
  168.                     <div class="inner-container">
  169.                         <div class="blog-img"></div>
  170.                         <div class="blogtitle">
  171.                             <h2>Shortcode and Element</h2>
  172.                         </div>
  173.                         <div class="blog-container">
  174.                             <!-- Grid -->
  175.                             <h3>Grid</h3>
  176.                             <hr class="hr-margin">
  177.                             <div class="row show-grid">
  178.                                 <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div>
  179.                                 <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div>
  180.                                 <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div>
  181.                                 <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div>
  182.                             </div>
  183.                             <div class="row show-grid">
  184.                                 <div class="span6">6</div> <div class="span6">6</div>
  185.                             </div>
  186.                             <div class="row show-grid">
  187.                                 <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div>
  188.                             </div>
  189.                             <div class="row show-grid">
  190.                                 <div class="span3">3</div> <div class="span3">3</div>
  191.                                 <div class="span3">3</div> <div class="span3">3</div>
  192.                             </div>
  193.                             <div class="row show-grid">
  194.                                 <div class="span12">12</div>
  195.                             </div>
  196.                             <!-- End Grid -->
  197.                            
  198.                             <!-- Client Testimoni -->
  199.                             <h3>Our Client Testimoni</h3>
  200.                             <hr class="hr-margin">
  201.                             <div class="testibox">             
  202.                                 <div class="testiimage">                   
  203.                                     <img src="images/1352231534_06465a917f-120x120.jpg">               
  204.                                 </div>             
  205.                                 <div class="testicontent">                 
  206.                                     <div class="testitext">                        
  207.                                         <div class="testiwrapper">                     
  208.                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>                        
  209.                                         </div>                 
  210.                                     </div>                 
  211.                                     <div class="testimeta">                        
  212.                                         <author>Jane Doe - Doctor, John Hospital</author>                  
  213.                                     </div>             
  214.                                 </div>         
  215.                             </div>
  216.                             <div class="testibox">
  217.                                 <div class="testiimage">
  218.                                     <img src="images/1351370285_fac6c2db18-120x120.jpg">
  219.                                 </div>
  220.                                 <div class="testicontent">
  221.                                     <div class="testitext">
  222.                                         <div class="testiwrapper">
  223.                                             <p>Pro et option deseruisse, docendi honestatis ex quo. Assum tibique honestatis vix te, ad illud iusto ius. Vivendo conceptam ne has, offendit comprehensam eu eam. Usu at novum graece fastidii, aliquip ex ea commodo consequat.</p>                        
  224.                                         </div>                 
  225.                                     </div>                 
  226.                                     <div class="testimeta">                        
  227.                                         <author>John Doe - Hotel Manager, Private Hotel</author>                   
  228.                                     </div>             
  229.                                 </div>         
  230.                             </div>
  231.                             <!-- End Client Testimoni -->
  232.                            
  233.                             <!-- Image & heading -->                           
  234.                             <h2>Image &amp; Heading</h2>
  235.                             <hr class="hr-margin">
  236.                             <div>
  237.                                 <a data-tourl="false" data-title="Another girl with glass" href="images/1352231534_06465a917f.jpg" class="photoswipe">
  238.                                     <img alt="" src="images/1352231534_06465a917f.jpg" class="span2 alignleft">
  239.                                 </a>
  240.                             </div>
  241.                             <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  242.                             <div>
  243.                                 <a data-tourl="false" data-title="Girl with glass" href="images/3783554835_ebbd481c26_b.jpg" class="photoswipe">
  244.                                     <img alt="" src="images/3783554835_ebbd481c26_b.jpg" class="span2 alignright">
  245.                                 </a>
  246.                             </div>
  247.                             <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  248.                             <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  249.                             <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  250.                            
  251.                            
  252.                             <div style="clear: both;" class="row">
  253.                                 <div class="span4">
  254.                                     <h1>First Heading</h1>
  255.                                     <hr class="hr-margin">
  256.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p> </div>
  257.                                 <div class="span4">
  258.                                     <h2>Second Heading</h2>
  259.                                     <hr class="hr-margin">
  260.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  261.                                 </div>
  262.                                 <div class="span4">
  263.                                     <h3>Third Heading</h3>
  264.                                     <hr class="hr-margin">
  265.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  266.                                 </div>
  267.                             </div>
  268.                            
  269.                             <div class="row">
  270.                                 <div class="span4">
  271.                                     <h4>Forth Heading</h4>
  272.                                     <hr class="hr-margin">
  273.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  274.                                 </div>
  275.                                 <div class="span4">
  276.                                     <h5>Fifth Heading</h5>
  277.                                     <hr class="hr-margin">
  278.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  279.                                 </div>
  280.                                 <div class="span4">
  281.                                     <h6>Sixth Heading</h6>
  282.                                     <hr class="hr-margin">
  283.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  284.                                 </div>
  285.                             </div>                         
  286.                             <!-- End Image & heading -->
  287.                            
  288.                             <!-- Icon -->
  289.                             <h2>Icon provided by Glyphicons</h2>
  290.                             <hr class="hr-margin">
  291.                             <div class="row">
  292.                                 <div class="span3">
  293.                                     <ul class="the-icons">
  294.                                         <li><em class="icon-glass"></em> icon-glass</li>
  295.                                         <li><em class="icon-music"></em> icon-music</li>
  296.                                         <li><em class="icon-search"></em> icon-search</li>
  297.                                         <li><em class="icon-envelope"></em> icon-envelope</li>
  298.                                         <li><em class="icon-heart"></em> icon-heart</li>
  299.                                         <li><em class="icon-star"></em> icon-star</li>
  300.                                         <li><em class="icon-star-empty"></em> icon-star-empty</li>
  301.                                         <li><em class="icon-user"></em> icon-user</li>
  302.                                         <li><em class="icon-film"></em> icon-film</li>
  303.                                         <li><em class="icon-th-large"></em> icon-th-large</li>
  304.                                         <li><em class="icon-th"></em> icon-th</li>
  305.                                         <li><em class="icon-th-list"></em> icon-th-list</li>
  306.                                         <li><em class="icon-ok"></em> icon-ok</li>
  307.                                         <li><em class="icon-remove"></em> icon-remove</li>
  308.                                         <li><em class="icon-zoom-in"></em> icon-zoom-in</li>
  309.                                         <li><em class="icon-zoom-out"></em> icon-zoom-out</li>
  310.                                         <li><em class="icon-off"></em> icon-off</li>
  311.                                         <li><em class="icon-signal"></em> icon-signal</li>
  312.                                         <li><em class="icon-cog"></em> icon-cog</li>
  313.                                         <li><em class="icon-trash"></em> icon-trash</li>
  314.                                         <li><em class="icon-home"></em> icon-home</li>
  315.                                         <li><em class="icon-file"></em> icon-file</li>
  316.                                         <li><em class="icon-time"></em> icon-time</li>
  317.                                         <li><em class="icon-road"></em> icon-road</li>
  318.                                         <li><em class="icon-download-alt"></em> icon-download-alt</li>
  319.                                         <li><em class="icon-download"></em> icon-download</li>
  320.                                         <li><em class="icon-upload"></em> icon-upload</li>
  321.                                         <li><em class="icon-inbox"></em> icon-inbox</li>
  322.                                         <li><em class="icon-play-circle"></em> icon-play-circle</li>
  323.                                         <li><em class="icon-repeat"></em> icon-repeat</li>
  324.                                     </ul>
  325.                                 </div>
  326.                                 <div class="span3">
  327.                                     <ul class="the-icons">
  328.                                         <li><em class="icon-refresh"></em> icon-refresh</li>
  329.                                         <li><em class="icon-list-alt"></em> icon-list-alt</li>
  330.                                         <li><em class="icon-lock"></em> icon-lock</li>
  331.                                         <li><em class="icon-flag"></em> icon-flag</li>
  332.                                         <li><em class="icon-headphones"></em> icon-headphones</li>
  333.                                         <li><em class="icon-volume-off"></em> icon-volume-off</li>
  334.                                         <li><em class="icon-volume-down"></em> icon-volume-down</li>
  335.                                         <li><em class="icon-volume-up"></em> icon-volume-up</li>
  336.                                         <li><em class="icon-qrcode"></em> icon-qrcode</li>
  337.                                         <li><em class="icon-barcode"></em> icon-barcode</li>
  338.                                         <li><em class="icon-tag"></em> icon-tag</li>
  339.                                         <li><em class="icon-tags"></em> icon-tags</li>
  340.                                         <li><em class="icon-book"></em> icon-book</li>
  341.                                         <li><em class="icon-bookmark"></em> icon-bookmark</li>
  342.                                         <li><em class="icon-print"></em> icon-print</li>
  343.                                         <li><em class="icon-camera"></em> icon-camera</li>
  344.                                         <li><em class="icon-font"></em> icon-font</li>
  345.                                         <li><em class="icon-bold"></em> icon-bold</li>
  346.                                         <li><em class="icon-italic"></em> icon-italic</li>
  347.                                         <li><em class="icon-text-height"></em> icon-text-height</li>
  348.                                         <li><em class="icon-text-width"></em> icon-text-width</li>
  349.                                         <li><em class="icon-align-left"></em> icon-align-left</li>
  350.                                         <li><em class="icon-align-center"></em> icon-align-center</li>
  351.                                         <li><em class="icon-align-right"></em> icon-align-right</li>
  352.                                         <li><em class="icon-align-justify"></em> icon-align-justify</li>
  353.                                         <li><em class="icon-list"></em> icon-list</li>
  354.                                         <li><em class="icon-indent-left"></em> icon-indent-left</li>
  355.                                         <li><em class="icon-indent-right"></em> icon-indent-right</li>
  356.                                         <li><em class="icon-facetime-video"></em> icon-facetime-video</li>
  357.                                         <li><em class="icon-picture"></em> icon-picture</li>
  358.                                     </ul>
  359.                                 </div>
  360.                                 <div class="span3">
  361.                                     <ul class="the-icons">
  362.                                         <li><em class="icon-pencil"></em> icon-pencil</li>
  363.                                         <li><em class="icon-map-marker"></em> icon-map-marker</li>
  364.                                         <li><em class="icon-adjust"></em> icon-adjust</li>
  365.                                         <li><em class="icon-tint"></em> icon-tint</li>
  366.                                         <li><em class="icon-edit"></em> icon-edit</li>
  367.                                         <li><em class="icon-share"></em> icon-share</li>
  368.                                         <li><em class="icon-check"></em> icon-check</li>
  369.                                         <li><em class="icon-move"></em> icon-move</li>
  370.                                         <li><em class="icon-step-backward"></em> icon-step-backward</li>
  371.                                         <li><em class="icon-fast-backward"></em> icon-fast-backward</li>
  372.                                         <li><em class="icon-backward"></em> icon-backward</li>
  373.                                         <li><em class="icon-play"></em> icon-play</li>
  374.                                         <li><em class="icon-pause"></em> icon-pause</li>
  375.                                         <li><em class="icon-stop"></em> icon-stop</li>
  376.                                         <li><em class="icon-forward"></em> icon-forward</li>
  377.                                         <li><em class="icon-fast-forward"></em> icon-fast-forward</li>
  378.                                         <li><em class="icon-step-forward"></em> icon-step-forward</li>
  379.                                         <li><em class="icon-eject"></em> icon-eject</li>
  380.                                         <li><em class="icon-chevron-left"></em> icon-chevron-left</li>
  381.                                         <li><em class="icon-chevron-right"></em> icon-chevron-right</li>
  382.                                         <li><em class="icon-plus-sign"></em> icon-plus-sign</li>
  383.                                         <li><em class="icon-minus-sign"></em> icon-minus-sign</li>
  384.                                         <li><em class="icon-remove-sign"></em> icon-remove-sign</li>
  385.                                         <li><em class="icon-ok-sign"></em> icon-ok-sign</li>
  386.                                         <li><em class="icon-question-sign"></em> icon-question-sign</li>
  387.                                         <li><em class="icon-info-sign"></em> icon-info-sign</li>
  388.                                         <li><em class="icon-screenshot"></em> icon-screenshot</li>
  389.                                         <li><em class="icon-remove-circle"></em> icon-remove-circle</li>
  390.                                         <li><em class="icon-ok-circle"></em> icon-ok-circle</li>
  391.                                         <li><em class="icon-ban-circle"></em> icon-ban-circle</li>
  392.                                     </ul>
  393.                                 </div>
  394.                                 <div class="span3">
  395.                                     <ul class="the-icons">
  396.                                         <li><em class="icon-arrow-left"></em> icon-arrow-left</li>
  397.                                         <li><em class="icon-arrow-right"></em> icon-arrow-right</li>
  398.                                         <li><em class="icon-arrow-up"></em> icon-arrow-up</li>
  399.                                         <li><em class="icon-arrow-down"></em> icon-arrow-down</li>
  400.                                         <li><em class="icon-share-alt"></em> icon-share-alt</li>
  401.                                         <li><em class="icon-resize-full"></em> icon-resize-full</li>
  402.                                         <li><em class="icon-resize-small"></em> icon-resize-small</li>
  403.                                         <li><em class="icon-plus"></em> icon-plus</li>
  404.                                         <li><em class="icon-minus"></em> icon-minus</li>
  405.                                         <li><em class="icon-asterisk"></em> icon-asterisk</li>
  406.                                         <li><em class="icon-exclamation-sign"></em> icon-exclamation-sign</li>
  407.                                         <li><em class="icon-gift"></em> icon-gift</li>
  408.                                         <li><em class="icon-leaf"></em> icon-leaf</li>
  409.                                         <li><em class="icon-fire"></em> icon-fire</li>
  410.                                         <li><em class="icon-eye-open"></em> icon-eye-open</li>
  411.                                         <li><em class="icon-eye-close"></em> icon-eye-close</li>
  412.                                         <li><em class="icon-warning-sign"></em> icon-warning-sign</li>
  413.                                         <li><em class="icon-plane"></em> icon-plane</li>
  414.                                         <li><em class="icon-calendar"></em> icon-calendar</li>
  415.                                         <li><em class="icon-random"></em> icon-random</li>
  416.                                         <li><em class="icon-comment"></em> icon-comment</li>
  417.                                         <li><em class="icon-magnet"></em> icon-magnet</li>
  418.                                         <li><em class="icon-chevron-up"></em> icon-chevron-up</li>
  419.                                         <li><em class="icon-chevron-down"></em> icon-chevron-down</li>
  420.                                         <li><em class="icon-retweet"></em> icon-retweet</li>
  421.                                         <li><em class="icon-shopping-cart"></em> icon-shopping-cart</li>
  422.                                         <li><em class="icon-folder-close"></em> icon-folder-close</li>
  423.                                         <li><em class="icon-folder-open"></em> icon-folder-open</li>
  424.                                         <li><em class="icon-resize-vertical"></em> icon-resize-vertical</li>
  425.                                         <li><em class="icon-resize-horizontal"></em> icon-resize-horizontal</li>
  426.                                     </ul>
  427.                                 </div>
  428.                             </div>
  429.                             <!-- End icon -->
  430.                            
  431.                             <!-- Drop Caps -->
  432.                             <h2>Drop Caps</h2>
  433.                             <hr class="hr-margin">
  434.                             <div class="row">
  435.                                 <div class="span3">
  436.                                     <p> <span class="dropcaps">D</span>i vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. </p>
  437.                                 </div>
  438.                                 <div class="span3">
  439.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu.</p> </div> <div class="span3"> <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu.</p>
  440.                                 </div>
  441.                                 <div class="span3">
  442.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu.</p>
  443.                                 </div>
  444.                             </div>
  445.                             <!-- End Drop Caps -->
  446.                            
  447.                             <!-- Block Quote -->
  448.                             <h2>Blockquote</h2>
  449.                             <hr class="hr-margin">
  450.                             <blockquote>
  451.                                 It can be a trap of the photographer to think that his or her best pictures were the ones that were hardest to get.
  452.                                 <author> Timothy Allen - On editing photos </author>
  453.                             </blockquote>
  454.                             <!-- End Block Quote -->
  455.                            
  456.                             <!-- Highlight text with tooltips -->
  457.                             <h2>Highlight Text &amp; Text with tooltips</h2>
  458.                             <hr class="hr-margin">
  459.                             <div class="row">
  460.                                 <div class="span4">
  461.                                     <p>Hightlight&nbsp;<span style="background-color: #000000; color: #ffffff;" class="highlight">This line is mean to be hightlighted</span>&nbsp; id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu.</p>
  462.                                 </div>
  463.                                 <div class="span4">
  464.                                     <p>Hightlight&nbsp;<span style="background-color: #757575; color: #ffffff;" class="highlight">This line is mean to be hightlighted</span>&nbsp; id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu.</p>
  465.                                 </div>
  466.                                 <div class="span4">
  467.                                     <p>Hightlight&nbsp;<span data-rel="tooltip" title="I'm a tooltips" style="background-color: #666666; color: #ffffff;" class="highlight">Text with tooltips</span>&nbsp; id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu.</p>
  468.                                 </div>
  469.                                 <div class="clearboth"></div>
  470.                             </div>
  471.                             <!-- End Highlight text with tooltips -->
  472.                            
  473.                             <!-- List -->
  474.                             <h2>List</h2>
  475.                             <hr class="hr-margin">
  476.                             <div class="row">
  477.                                 <div class="span3">
  478.                                     <ul class="list-check">
  479.                                         <li>Lorem ipsum</li>
  480.                                         <li>Consectetur</li>
  481.                                         <li>Phasellus iaculis</li>
  482.                                         <li>Eget porttitor</li>
  483.                                     </ul>
  484.                                 </div>
  485.                                 <div class="span3">
  486.                                     <ul class="list-chevron">
  487.                                         <li>Lorem ipsum</li>
  488.                                         <li>Consectetur</li>
  489.                                         <li>Phasellus iaculis</li>
  490.                                         <li>Eget porttitor</li>
  491.                                     </ul>
  492.                                 </div>
  493.                                 <div class="span3">
  494.                                     <ul class="list-star">
  495.                                         <li>Lorem ipsum</li>
  496.                                         <li>Consectetur</li>
  497.                                         <li>Phasellus iaculis</li>
  498.                                         <li>Eget porttitor</li>
  499.                                     </ul>
  500.                                 </div>
  501.                                 <div class="span3">
  502.                                     <ul class="list-certificate">
  503.                                         <li>Lorem ipsum</li>
  504.                                         <li>Consectetur</li>
  505.                                         <li>Phasellus iaculis</li>
  506.                                         <li>Eget porttitor</li>
  507.                                     </ul>
  508.                                 </div>
  509.                             </div>
  510.                             <div class="row">
  511.                                 <div class="span3">
  512.                                     <ol class="decimal">
  513.                                         <li>Lorem ipsum</li>
  514.                                         <li>Consectetur</li>
  515.                                         <li>Phasellus iaculis</li>
  516.                                         <li>Eget porttitor</li>
  517.                                     </ol>
  518.                                  </div>
  519.                                  <div class="span3">
  520.                                      <ol class="lowerroman">
  521.                                          <li>Lorem ipsum</li>
  522.                                          <li>Consectetur</li>
  523.                                          <li>Phasellus iaculis</li>
  524.                                          <li>Eget porttitor</li>
  525.                                      </ol>
  526.                                  </div>
  527.                                  <div class="span3">
  528.                                      <ol class="upperroman">
  529.                                          <li>Lorem ipsum</li>
  530.                                          <li>Consectetur</li>
  531.                                          <li>Phasellus iaculis</li>
  532.                                          <li>Eget porttitor</li>
  533.                                      </ol>
  534.                                  </div>
  535.                                  <div class="span3">
  536.                                      <ol class="lowerlatin">
  537.                                          <li>Lorem ipsum</li>
  538.                                          <li>Consectetur</li>
  539.                                          <li>Phasellus iaculis</li>
  540.                                          <li>Eget porttitor</li>
  541.                                      </ol>
  542.                                  </div>
  543.                              </div>
  544.                             <!-- End list -->
  545.                            
  546.                             <!-- Button & Table -->
  547.                             <h2>Button &amp; Table</h2>
  548.                             <table class="table table-bordered table-striped">
  549.                                 <thead>
  550.                                     <tr>
  551.                                         <th>Button</th>
  552.                                         <th>Button Style</th>
  553.                                         <th>Description</th>
  554.                                     </tr>
  555.                                 </thead>
  556.                                 <tbody>
  557.                                     <tr>
  558.                                         <td><button class="btn">Default</button></td>
  559.                                         <td><code>Default button</code></td>
  560.                                         <td>Standard gray button with gradient</td>
  561.                                     </tr>
  562.                                     <tr>
  563.                                         <td><button class="btn btn-primary">Primary</button></td>
  564.                                         <td><code>Primary Button</code></td>
  565.                                         <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
  566.                                     </tr>
  567.                                     <tr>
  568.                                         <td><button class="btn btn-info">Info</button></td>
  569.                                         <td><code>Info Button </code></td>
  570.                                         <td>Used as an alternate to the default styles</td>
  571.                                     </tr>
  572.                                     <tr>
  573.                                         <td><button class="btn btn-success">Success</button></td>
  574.                                         <td><code>Success Button</code></td>
  575.                                         <td>Indicates a successful or positive action</td>
  576.                                     </tr>
  577.                                     <tr>
  578.                                         <td><button class="btn btn-warning">Warning</button></td>
  579.                                         <td><code>Warning Button</code></td>
  580.                                         <td>Indicates caution should be taken with this action</td>
  581.                                     </tr>
  582.                                     <tr>
  583.                                         <td><button class="btn btn-danger">Danger</button></td>
  584.                                         <td><code>Danger Button</code></td>
  585.                                         <td>Indicates a dangerous or potentially negative action</td>
  586.                                     </tr>
  587.                                     <tr>
  588.                                         <td><button class="btn btn-inverse">Inverse</button></td>
  589.                                         <td><code>Inverse Button</code></td>
  590.                                         <td>Alternate dark gray button, not tied to a semantic action or use</td>
  591.                                     </tr>
  592.                                 </tbody>
  593.                             </table>
  594.                             <!-- End Button & Table -->
  595.                            
  596.                             <!-- Alert -->
  597.                             <h2>Alert</h2>
  598.                             <hr class="hr-margin">
  599.                            
  600.                             <div class="alert alert-block">
  601.                                 <a data-dismiss="alert" class="close">×</a>
  602.                                 <strong>Warning!</strong> Best check yo self, you’re not…
  603.                             </div>
  604.                             <div class="alert alert-error">
  605.                                 <a data-dismiss="alert" class="close">×</a>
  606.                                 <strong>Error!</strong> Change a few things up and try submitting again.
  607.                             </div>
  608.                             <div class="alert alert-success">
  609.                                 <a data-dismiss="alert" class="close">×</a>
  610.                                 <strong>Success!</strong> You successfully read this important alert message.
  611.                             </div>
  612.                             <div class="alert alert-info">
  613.                                 <a data-dismiss="alert" class="close">×</a>
  614.                                 <strong>Info!</strong> This alert needs your attention, but it’s not super important.
  615.                             </div>                         
  616.                             <!-- End Alert -->
  617.                            
  618.                             <!-- Tab -->
  619.                             <h2>Tab</h2>
  620.                             <hr class="hr-margin">
  621.                             <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
  622.                            
  623.                             <div data-tab="tab" class="tab-wrapper">
  624.                                 <ul class="nav nav-tabs">
  625.                                     <li class="active"><a href="#" data-tourl='false'>Home</a></li>
  626.                                     <li><a href="#" data-tourl='false'>Profile</a></li>
  627.                                     <li><a href="#" data-tourl='false'>Message</a></li>
  628.                                     <li><a href="#" data-tourl='false'>Setting</a></li>
  629.                                 </ul>
  630.                                 <div class="tab-content">
  631.                                     <div class="tab-pane active">
  632.                                         <span class="dropcaps">A</span>Per cu mucius vivendum, his assentior adolescens cu. Quo ut quod rationibus, amet integre pri te. In suas ignota est. Tale omnium atomorum eam id, in similique contentiones nam, expetenda adipiscing cu sit.<br> Modus putent essent eu nec, diam animal an mel, cu vis nisl lorem possit. Eu est dolore postea legimus, ne mea luptatum explicari. Id audire nominati vel. Ei lobortis tractatos vis, pertinax cotidieque et has.
  633.                                     </div>
  634.                                     <div class="tab-pane">
  635.                                         <span class="dropcaps">B</span>Pro et option deseruisse, docendi honestatis ex quo. Assum tibique honestatis vix te, ad illud iusto ius. Vivendo conceptam ne has, offendit comprehensam eu eam. Usu at novum graece fastidii. Id maluisset incorrupte vis, mel fabellas erroribus expetendis id.<br> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
  636.                                     </div>
  637.                                     <div class="tab-pane">
  638.                                         <span class="dropcaps">C</span>Amet salutandi ad eam. Unum deserunt oportere ex eum, ex esse saepe facilisis est, in eos modo vivendo detracto. Vivendo voluptua officiis ei mei, veri oportere voluptaria ea ius. Abhorreant assueverit cum in. Per ne movet audire, ad labores nominavi reformidans eos. Qui cu justo impetus discere, dicam recusabo disputando eos ea.<br> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
  639.                                     </div>
  640.                                     <div class="tab-pane">
  641.                                         <p><span class="dropcaps">D</span>Modus putent essent eu nec, diam animal an mel, cu vis nisl lorem possit. Eu est dolore postea legimus, ne mea luptatum explicari. Id audire nominati vel. Ei lobortis tractatos vis, pertinax cotidieque et has.<br> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.</p>
  642.                                     </div>
  643.                                 </div>
  644.                             </div>
  645.                             <!-- End Tab -->
  646.                            
  647.                             <!-- Accordion -->
  648.                             <h2>Accordion</h2>
  649.                             <hr class="hr-margin">
  650.                            
  651.                             <div data-accordion="accordion" class="accordion">
  652.                                 <div class="accordion-group">
  653.                                     <div class="accordion-heading">
  654.                                         <a href="#" data-tourl='false' class="accordion-toggle">Collapsible Group Item #1</a>
  655.                                     </div>
  656.                                     <div class="accordion-body" style="display: none;">
  657.                                         <div class="accordion-inner">
  658.                                             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
  659.                                         </div>
  660.                                     </div>
  661.                                 </div>
  662.                                 <div class="accordion-group">
  663.                                     <div class="accordion-heading">
  664.                                         <a href="#" data-tourl='false' class="accordion-toggle">Collapsible Group Item #2</a>
  665.                                     </div>
  666.                                     <div class="accordion-body" style="display: none;">
  667.                                         <div class="accordion-inner">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.</div>
  668.                                     </div>
  669.                                 </div>
  670.                                 <div class="accordion-group">
  671.                                     <div class="accordion-heading">
  672.                                         <a href="#" data-tourl='false' class="accordion-toggle active">Collapsible Group Item #3</a>
  673.                                     </div>
  674.                                     <div class="accordion-body" style="display: block;">
  675.                                         <div class="accordion-inner">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.</div>
  676.                                     </div>
  677.                                 </div>
  678.                             </div>
  679.                             <!-- End Accordion -->
  680.                            
  681.                             <!-- Youtube Vimeo -->
  682.                             <h2>Youtube, Vimeo</h2>
  683.                             <hr class="hr-margin">
  684.                             <div class="row">
  685.                                 <div class="span6">
  686.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  687.                                     <div class="video-wrapper blog-gallery-type" data-type="youtube">      
  688.                                         <div class="video-container" data-src="http://www.youtube.com/watch?v=Szk6Qzj1yys"></div>  
  689.                                     </div>
  690.                                     <div class="clearboth">&nbsp;</div>
  691.                                 </div>
  692.                                 <div class="span6">
  693.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  694.                                     <div class="video-wrapper blog-gallery-type" data-type="vimeo">        
  695.                                         <div class="video-container" data-src="http://vimeo.com/15345816"></div>    
  696.                                     </div>
  697.                                     <div class="clearboth"></div>
  698.                                 </div>
  699.                                 <div class="clearboth"></div>
  700.                             </div>
  701.                             <!-- End Youtube Vimeo -->
  702.                            
  703.                             <!-- HTMl5 Video & Music -->
  704.                             <h2>HTML 5 Video &amp; Music</h2>
  705.                             <hr class="hr-margin" />
  706.                             <div class="row">
  707.                                 <div class="span6">
  708.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  709.                                     <div class="blog-gallery-type video-wrapper span6 " data-type="audio">
  710.                                         <audio id="audioplayer" src="https://dl.dropbox.com/u/31421656/jphotolio/ttfid.mp3" type="audio/mp3" controls="controls">
  711.                                             <object width="640" height="360" type="application/x-shockwave-flash" data="css/mediaelement/flashmediaelement.swf">       
  712.                                                 <param name="movie" value="css/mediaelement/flashmediaelement.swf" />
  713.                                                 <param name="flashvars" value="controls=true&file=https://dl.dropbox.com/u/31421656/jphotolio/ttfid.mp3" />
  714.                                                 <img src="css/mediaelement/flashmediaelement.swf" alt="Here we are" title="No video playback capabilities" />
  715.                                             </object>
  716.                                         </audio>
  717.                                         <img title="" alt ="" src="images/imel2011-3_122413.jpg " />
  718.                                     </div>
  719.                                     <div class="clearboth">&nbsp;</div>
  720.                                 </div>
  721.                                 <div class="span6">
  722.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  723.                                     <div class="blog-gallery-type video-wrapper span6" data-type="video">
  724.                                         <video id="player" poster="images/2732488224_aedf36e837_b.jpg" controls="controls" preload="none">
  725.                                             <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
  726.                                             <source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" />
  727.                                             <source type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" />
  728.                                             <object width="100%" height="100%" type="application/x-shockwave-flash" data="css/mediaelement/flashmediaelement.swf">
  729.                                                 <param name="movie" value="css/mediaelement/flashmediaelement.swf" />
  730.                                                 <param name="flashvars" value="controls=true&file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
  731.                                                 <img src="images/2732488224_aedf36e837_b.jpg" alt="Here we are" title="No video playback capabilities" />
  732.                                             </object>
  733.                                         </video>
  734.                                     </div>
  735.                                     <div class="clearboth">&nbsp;</div>
  736.                                 </div>
  737.                                 <div class="clearboth"></div>
  738.                             </div>
  739.                             <!-- End HTML5 Video & Music -->
  740.                            
  741.                             <!-- Image gallery -->
  742.                             <h2>Image Gallery</h2>
  743.                             <hr class="hr-margin" />
  744.                             <div class="row">
  745.                                 <div class="span6">
  746.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  747.                                 </div>
  748.                                 <div class="span6">
  749.                                     <p>Vi vamus sit amet eros felis, id sollicitudin est. Quisque lacus dolor, vulputate eget sagittis eget, facilisis et quam. Ut id erat ut est volutpat gravida. Suspendisse quis nunc nec purus vestibulum sagittis eget at mauris. Donec dignissim sem libero, ut vehicula arcu. Sed porttitor, ligula eu tincidunt lobortis, velit leo vehicula odio, eu eleifend neque dui vel mauris. Etiam at lacus eros.</p>
  750.                                 </div>
  751.                                 <div class="clearboth"></div>
  752.                             </div>
  753.                             <div class='carousel es-carousel-wrapper blog-gallery'>
  754.                                 <div class='es-carousel'>
  755.                                     <ul>
  756.                                         <li>
  757.                                             <a href='images/7109176877_aeb6e751e1_b1.jpg' data-title='Miniature Cathedral of Trier' data-tourl='false'>
  758.                                                 <span></span>
  759.                                                 <img src='images/7109176877_aeb6e751e1_b1-180x180.jpg' alt=''></img>                       
  760.                                             </a>
  761.                                         </li>
  762.                                         <li>
  763.                                             <a href='images/6694717875_f1f7e7ed84_b1.jpg' data-title='Concorde Explore FP' data-tourl='false'>
  764.                                                 <span></span>
  765.                                                 <img src='images/6694717875_f1f7e7ed84_b1-180x180.jpg' alt=''></img>                       
  766.                                             </a>
  767.                                         </li>
  768.                                         <li>
  769.                                             <a href='images/5957534832_1c6cc4430e_b1.jpg' data-title='Paris - Tour Eiffel' data-tourl='false'>
  770.                                                 <span></span>
  771.                                                 <img src='images/5957534832_1c6cc4430e_b1-180x180.jpg' alt=''></img>                       
  772.                                             </a>
  773.                                         </li>
  774.                                         <li>
  775.                                             <a href='images/5890431924_e41f158e2d_b1.jpg' data-title='Mississauga' data-tourl='false'>
  776.                                                 <span></span>
  777.                                                 <img src='images/5890431924_e41f158e2d_b1-180x180.jpg' alt=''></img>                       
  778.                                             </a>
  779.                                         </li>
  780.                                         <li>
  781.                                             <a href='images/3010975006_808f2fe92e_b1.jpg' data-title='NYC from the Empire State Building' data-tourl='false'>
  782.                                                 <span></span>
  783.                                                 <img src='images/3010975006_808f2fe92e_b1-180x180.jpg' alt=''></img>                       
  784.                                             </a>
  785.                                         </li>
  786.                                         <li>
  787.                                             <a href='images/2981779469_e341e23725_b.jpg' data-title='Stockholm Night' data-tourl='false'>
  788.                                                 <span></span>
  789.                                                 <img src='images/2981779469_e341e23725_b-180x180.jpg' alt=''></img>                    
  790.                                             </a>
  791.                                         </li>
  792.                                         <li>
  793.                                             <a href='images/381811691_8e1519bf7d_b1.jpg' data-title='Paris - Rotonde de Ledoux' data-tourl='false'>
  794.                                                 <span></span>
  795.                                                 <img src='images/381811691_8e1519bf7d_b1-180x180.jpg' alt=''></img>                    
  796.                                             </a>
  797.                                         </li>
  798.                                         <li>
  799.                                             <a href='images/164963669_a8b04e7ac3_b1.jpg' data-title='Notre Dame de Paris' data-tourl='false'>
  800.                                                 <span></span>
  801.                                                 <img src='images/164963669_a8b04e7ac3_b1-180x180.jpg' alt=''></img>                    
  802.                                             </a>
  803.                                         </li>
  804.                                         <li>
  805.                                             <a href='images/126307642_4f3958a62c_b1.jpg' data-title='Paris Metro' data-tourl='false'>
  806.                                                 <span></span>
  807.                                                 <img src='images/126307642_4f3958a62c_b1-180x180.jpg' alt=''></img>                    
  808.                                             </a>
  809.                                         </li>                                      
  810.                                     </ul>
  811.                                 </div>
  812.                                 <div>
  813.                                     <div class='btn-prev'>Prev</div>
  814.                                     <div class='btn-next'>Next</div>
  815.                                 </div>
  816.                             </div>
  817.                         </div>
  818.                        
  819.                         <div class="bottom-bar"> <!-- Blog bottom bar -->                  
  820.                             <div class="blog-like"> <!-- Blog More -->
  821.                                 <ul>
  822.                                     <li>
  823.                                         <a  target="_blank" href="http://www.facebook.com/sharer.php?u=singleblog.html" data-rel="tooltip" title="Share on Facebook"><i class="social-facebook"></i></a>
  824.                                     </li>
  825.                                     <li>
  826.                                         <a target="_blank" href="http://twitter.com/intent/tweet?url=singleblog.html" data-rel="tooltip" title="Share on Twitter"><i class="social-twitter"></i></a>
  827.                                     </li>
  828.                                 </ul>
  829.                             </div> <!-- end blog like -->
  830.                             <div class="clearbottombar"></div>
  831.                         </div>
  832.                        
  833.                     </div>         
  834.                 </div>         
  835.             </div>
  836.             <div class="page-bottom-spacer"></div>
  837.         </div>
  838.         <script type="text/javascript" src="js/jeggallery.js"></script>
  839.         <script type="text/javascript">
  840.             jQuery(document).ready(function($){
  841.                 /** bind jeg default **/
  842.                 $(window).jegdefault({
  843.                     curtain : 1,
  844.                     rightclick  : 0,
  845.                     clickmsg    : "Right mouse click disabled, you can enabled it from admin menu"
  846.                 });
  847.  
  848.                 /** jeg blog **/
  849.                 $("body").jegblog({ minItem : 6 });
  850.             });
  851.         </script>          
  852.         </div> <!-- #main -->
  853.     </div> <!-- mainouter -->
  854.  
  855.   <!-- curtain call :p -->
  856.   <div class="curtain">
  857.     <div class="curtainhead"></div>
  858.     <div class="curtainbg"></div>  
  859.     <div class="curtain-loader"></div> 
  860.   </div>
  861.  
  862.   <div class="mpnotif"></div>
  863.  
  864.   <div id="mplist">
  865.     <div id="jquery_jplayer" class="jp-jplayer"></div>
  866.     <div id="jp_container" class="jp-audio">
  867.         <div class="musicplaylist">
  868.             <h2>Music Player</h2>
  869.             <div class="pwdcls mpcls" alt="Close">
  870.                 <div class="icon-remove icon-white">&nbsp;</div>
  871.             </div>
  872.         </div>
  873.         <div class="jp-type-playlist">
  874.             <div class="jp-gui jp-interface">
  875.                 <ul class="jp-controls">
  876.                     <li><div href="javascript:;" data-tourl="false" class="jp-play" tabindex="1">&nbsp;</div></li>
  877.                     <li><div href="javascript:;" data-tourl="false" class="jp-pause" tabindex="1">&nbsp;</div></li>
  878.                 </ul>
  879.                
  880.                 <div class="jp-current-time"></div>
  881.                
  882.                 <div class="jp-progress">
  883.                     <div class="jp-seek-bar">
  884.                         <div class="jp-play-bar"></div>
  885.                     </div>
  886.                 </div>
  887.                
  888.                 <div class="jp-duration"></div>
  889.                
  890.                 <div href="javascript:;" data-tourl="false" class="jp-mute" tabindex="1" title="mute">&nbsp;</div>
  891.                
  892.                 <div class="jp-volume-bar">
  893.                     <div class="jp-volume-bar-value"></div>
  894.                 </div>
  895.                 <ul class="jp-toggles">
  896.                     <li><div href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">&nbsp;</div></li>
  897.                     <li><div href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">&nbsp;</div></li>
  898.                     <li><div href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">&nbsp;</div></li>
  899.                     <li><div href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">&nbsp;</div></li>
  900.                 </ul>
  901.             </div>
  902.             <div class="jp-playlist">
  903.                 <ul>
  904.                     <li></li>
  905.                 </ul>
  906.             </div>
  907.             <div class="jp-no-solution">
  908.                 <span>Update Required</span>
  909.                 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
  910.             </div>
  911.         </div>
  912.     </div>
  913.   </div>
  914.  
  915.  
  916.   <script type="text/javascript">
  917.  
  918.     var mplang = {
  919.         playlistmuted       : "Music Playlist Muted",
  920.         playlistunmuted     : "Music Playlist UnMuted",
  921.         playliststartplay   : "Playlist started",
  922.     };
  923.  
  924.     var musicplayer = new jPlayerPlaylist({
  925.         jPlayer: "#jquery_jplayer",
  926.         cssSelectorAncestor: "#jp_container"   
  927.     }, [{"title":"Ten To Five - I Do","mp3":"https:\/\/dl.dropbox.com\/u\/31421656\/jphotolio\/ttfid.mp3","oga":"https:\/\/dl.dropbox.com\/u\/31421656\/jphotolio\/ttfid.ogg"},{"title":"Ten To Five - I Will Fly","mp3":"https:\/\/dl.dropbox.com\/u\/31421656\/jphotolio\/ttfiwillfly.mp3","oga":"https:\/\/dl.dropbox.com\/u\/31421656\/jphotolio\/ttfiwillfly.ogg"}] , {
  928.         swfPath: "js",
  929.         supplied: "mp3, oga",
  930.         wmode: "window",
  931.         loop: true,
  932.         volume: 0.5,
  933.         ready : function() {
  934.             mpnotifbox(mplang.playliststartplay);
  935.         },
  936.         playlistOptions: {
  937.                         autoPlay: true,
  938.                         enableRemoveControls: false,
  939.             loopOnPrevious: true
  940.         }
  941.     });
  942.   </script>
  943.    
  944.   <footer>       
  945.     <nav class="foot-left">
  946.         <ul>
  947.             <li>               
  948.                 <a href="index.html">
  949.                     <i class="misc-home"></i>
  950.                     <div class="text-social">home</div>
  951.                 </a>
  952.             </li>
  953.             <li>               
  954.                 <a href="contact.html">
  955.                     <i class="misc-mail"></i>
  956.                     <div class="text-social">contact</div>
  957.                 </a>
  958.             </li>      
  959.             <li>               
  960.                 <a href="#" class="openplaylist" data-tourl="false">
  961.                     <i class="misc-headphone"></i>
  962.                     <div class="text-social">playlist</div>
  963.                 </a>
  964.             </li>
  965.         </ul>
  966.     </nav>
  967.     <nav class="foot-right">
  968.         <ul>       
  969.             <li>
  970.                 <a href="http://facebook.com/home.jsf">
  971.                     <i class="social-facebook"></i>
  972.                     <div class="text-social">facebook</div>
  973.                 </a>
  974.             </li>
  975.             <li>
  976.                 <a href="http://youtube.com/jegbagus">
  977.                     <i class="social-youtube"></i>
  978.                     <div class="text-social">Youtube</div>
  979.                 </a>
  980.             </li>
  981.             <li>
  982.                 <a href="http://twitter.com/#!/jegbagus">
  983.                     <i class="social-twitter"></i>
  984.                     <div class="text-social">twitter</div>
  985.                 </a>
  986.             </li>      
  987.             <li>
  988.                 <a href="http://decilicous.com">
  989.                     <i class="social-delicious"></i>
  990.                     <div class="text-social">Delicious</div>
  991.                 </a>
  992.             </li>
  993.         </ul>
  994.     </nav> 
  995.   </footer>
  996.  
  997.   <!-- JavaScript at the bottom for fast page loading -->
  998.  
  999.   <!-- scripts concatenated and minified via build script -->
  1000.   <!-- end scripts -->
  1001.    
  1002.   </body>
  1003. </html>
Advertisement
Add Comment
Please, Sign In to add comment