Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

HTML

By: a guest on Dec 19th, 2012  |  syntax: HTML  |  size: 5.96 KB  |  views: 25  |  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>
  2. <html lang="en">
  3. <meta charset="utf-8">
  4.  
  5. <head>
  6.         <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
  7.         <link rel="stylesheet" type="text/css" href="normalize.css" media="all" />
  8.         <link href="style.css" type="text/css" rel="stylesheet" media="all">
  9.         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
  10.         <title>Productions</title>
  11.        
  12.                 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  13.         </script>
  14.        
  15.         <script type="text/javascript" src="isotope.js"></script>
  16.                
  17.                 <script type="text/javascript">
  18.                
  19.                 $(document).ready(function(){
  20.                 var $container = $('#productionwrap');
  21.                 $container.isotope({
  22.                 filter: '*',
  23.                 animationOptions: {
  24.                  duration: 750,
  25.                  easing: 'linear',
  26.                  queue: false,
  27.            }
  28.         });
  29.  
  30.         $('#videofilterswrap a').click(function(){
  31.           var selector = $(this).attr('data-filter');
  32.                 $container.isotope({
  33.                 filter: selector,
  34.                 animationOptions: {
  35.                  duration: 750,
  36.                  easing: 'linear',
  37.                  queue: false,
  38.                  
  39.            }
  40.           });
  41.           return false;
  42.         });
  43.  
  44.         });
  45.                 </script>
  46. </head>
  47.  
  48. <body>
  49.         <div id="container">
  50.  
  51.                 <div id="banner">
  52.                         <h1>Productions</h1>
  53.                         <img src="images/banner.png" id="masthead">    
  54.                         <div id="navigation">
  55.                                 <ul id="navi">
  56.                                         <li class="navilinks"><a class="navilinkstyle" href="index.html">Home</a></li>
  57.                                         <li class="navilinks"><a class="navilinkstyle" href="aboutus.html">About Us</a></li>
  58.                                         <li class="navilinks"><a class="navilinkstyle" href="prices.html">Prices</a></li>
  59.                                         <li class="navilinks"><a class="navilinkstyle" href="productions.html">Productions</a></li>
  60.                                         <li class="navilinks"><a class="navilinkstyle" href="contactus.html">Contact Us</a></li>
  61.                                 </ul>
  62.                         </div>
  63.                 </div>
  64.  
  65.                
  66.                 <div id="videofilterswrap">
  67.                         <ul id="videofilters">
  68.                           <li><a href="" data-filter=".lifestyle">Music & Lifestyle</a></li>
  69.                           <li><a href="" data-filter=".wedding">Weddings</a></li>
  70.                           <li><a href="" data-filter=".business">Business & Advertising</a></li>
  71.                           <li><a href="" data-filter=".other">Other</a></li>
  72.                         </ul>
  73.                 </div>
  74.                
  75.                 <div id="productionwrap">
  76.                 <div class="productioncontainer lifestyle">
  77.                         <a href="http://www.youtube.com/watch?v=TqIXhRVt-NE&feature=plcp" target="_blank">
  78.                                 <h4 class="productiontitles">BARRY JOHN MBE - IN THE STUDIO</h4>
  79.                                 <div class="vidwrapper">
  80.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/aqr-jpgnlnQ" frameborder="0" allowfullscreen></iframe>
  81.                                 </div>
  82.                         </a>
  83.                 </div>
  84.  
  85.                 <div class="productioncontainer lifestyle">
  86.                         <a href="http://www.youtube.com/watch?v=TqIXhRVt-NE&feature=plcp" target="_blank">
  87.                                 <h4 class="productiontitles">Dan Bettridge - We Can Be Strong</h4>
  88.                                 <div class="vidwrapper">
  89.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/F4ZxdFU26I0" frameborder="0" allowfullscreen></iframe>
  90.                                 </div>
  91.                         </a>
  92.                 </div>
  93.                
  94.                 <div class="productioncontainer lifestyle">
  95.                         <a href="http://www.youtube.com/watch?v=TqIXhRVt-NE&feature=plcp" target="_blank">
  96.                                 <h4 class="productiontitles">Dan Fairhurst - Drifting Together</h4>
  97.                                 <div class="vidwrapper">
  98.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/V_2jnEquKPA" frameborder="0" allowfullscreen></iframe>
  99.                                 </div>
  100.                         </a>
  101.                 </div>
  102.                
  103.                 <div class="productioncontainer lifestyle">
  104.                         <a href="http://www.youtube.com/watch?v=TqIXhRVt-NE&feature=plcp" target="_blank">
  105.                                 <h4 class="productiontitles">NIGHT SESSIONS</h4>
  106.                                 <div class="vidwrapper">
  107.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/T03CA5IzW08" frameborder="0" allowfullscreen></iframe>
  108.                                 </div>
  109.                         </a>
  110.                 </div>
  111.                
  112.                 <div class="productioncontainer wedding">
  113.                         <a href="http://www.youtube.com/watch?v=hupozwKlzMQ&feature=plcp" target="_blank">
  114.                                 <h4 class="productiontitles">Sweet Sunny Wedding</h4>
  115.                                 <div class="vidwrapper">
  116.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/hupozwKlzMQ" frameborder="0" allowfullscreen></iframe>
  117.                                 </div>
  118.                         </a>
  119.                 </div>
  120.                
  121.                
  122.                 <div class="productioncontainer lifestyle">
  123.                         <a href="http://www.youtube.com/watch?v=0aXFAKYkOPA&feature=plcp" target="_blank">
  124.                                 <h4 class="productiontitles">Barry John - Exhibition</h4>
  125.                                 <div class="vidwrapper">
  126.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/0aXFAKYkOPA" frameborder="0" allowfullscreen></iframe>
  127.                                 </div>
  128.                         </a>
  129.                 </div>
  130.  
  131.                 <div class="productioncontainer other">
  132.                         <a href="http://www.youtube.com/watch?v=hS5tmMsjyVg&feature=plcp" target="_blank">
  133.                                 <h4 class="productiontitles">Llantwit Major MMA</h4>
  134.                                 <div class="vidwrapper">
  135.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/hS5tmMsjyVg" frameborder="0" allowfullscreen></iframe>
  136.                                 </div>
  137.                         </a>
  138.                 </div>
  139.                
  140.                 <div class="productioncontainer lifestyle">
  141.                         <a href="http://www.youtube.com/watch?v=TqIXhRVt-NE&feature=plcp" target="_blank">
  142.                                 <h4 class="productiontitles">Dan Bettridge - Artist</h4>
  143.                                 <div class="vidwrapper">
  144.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/TqIXhRVt-NE" frameborder="0" allowfullscreen></iframe>
  145.                                 </div>
  146.                         </a>
  147.                 </div>
  148.                
  149.                 <div class="productioncontainer lifestyle">
  150.                         <a href="http://www.youtube.com/watch?v=TqIXhRVt-NE&feature=plcp" target="_blank">
  151.                                 <h4 class="productiontitles">From Cardiff to Berlin</h4>
  152.                                 <div class="vidwrapper">
  153.                                         <iframe width="560" height="315" src="http://www.youtube.com/embed/IehqcVZNPpk" frameborder="0" allowfullscreen></iframe>
  154.                                 </div>
  155.                         </a>
  156.                 </div>
  157.                 </div>
  158.                
  159.        
  160.         <script src="jquery.fitvids.js"></script>
  161.         <script>
  162.         $(document).ready(function(){
  163.                 // Target your .container, .wrapper, .post, etc.
  164.                 $(".vidwrapper").fitVids();
  165.         });
  166.         </script>
  167.                
  168.  
  169.         </div>
  170.        
  171.         <div id="footer">
  172.                 <div id="footerwrapper">
  173.                                 <img src="images/filmstrap.png" id="filmstrap">
  174.                 </div> 
  175.                
  176.         </div>
  177. </body>
  178.  
  179. </html>