API tools faq
paste
Advertisement
Guest User

HTML

a guest
Dec 19th, 2012
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.96 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!