API tools faq
paste
Advertisement
richter_h

niu

richter_h
Aug 29th, 2014
391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  9.     <link rel="shortcut icon" href="images/favicon.png">
  10.  
  11.     <title>Illustrations | Nusakana</title>
  12.  
  13.     <!-- core CSS; reset, Bootstrap-->
  14.     <link href="css/bootstrap.min.css" rel="stylesheet">
  15.     <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  16.     <link href="css/nivo-lightbox.css" rel="stylesheet">
  17.     <link href="css/box/default.css" rel="stylesheet">
  18.     <link href="css/transitions.css" rel="stylesheet">
  19.     <link href="css/style.css" rel="stylesheet">
  20.  
  21.      <script src="js/jquery-1.10.2.js" type="text/javascript"></script>
  22.      <script src="js/modernizr.js"></script>
  23.      <script src="js/prefixfree.min.js"></script>
  24.      <script src="js/respond.proxy.js"></script>
  25.      <script src="js/bootstrap.min.js"></script>
  26.      <script src="js/jquery.collagePlus.min.js"></script>
  27.      <script src="js/extras/jquery.removeWhitespace.min.js"></script>
  28.      <script src="js/extras/jquery.collageCaption.min.js"></script>
  29.      <script src="js/nivo-lightbox.min.js"></script>
  30.  
  31.      <script type="text/javascript">
  32.  
  33.     // All images need to be loaded for this plugin to work so
  34.     // we end up waiting for the whole window to load in this example
  35.     $(window).load(function () {
  36.         $(document).ready(function(){
  37.             collage();
  38.             $('.Collage').collageCaption();
  39.         });
  40.     });
  41.  
  42.  
  43.     // Here we apply the actual CollagePlus plugin
  44.     function collage() {
  45.         $('.Collage').removeWhitespace().collagePlus(
  46.             {
  47.                 'fadeSpeed'     : 1000,
  48.                 'targetHeight'  : 200
  49.             }
  50.         );
  51.     };
  52.  
  53.     // This is just for the case that the browser window is resized
  54.     var resizeTimer = null;
  55.     $(window).bind('resize', function() {
  56.         // hide all the images until we resize them
  57.         $('.Collage .Image_Wrapper').css("opacity", 0);
  58.         // set a timer to re-apply the plugin
  59.         if (resizeTimer) clearTimeout(resizeTimer);
  60.         resizeTimer = setTimeout(collage, 50);
  61.     });
  62.   </script>
  63.   <script type="text/javascript">
  64.     $(document).ready(function(){
  65.         $('a').nivoLightbox({
  66.           effect: 'fade'
  67.         });
  68.     });
  69.   </script>
  70.  
  71.   </head>
  72.  
  73.   <body>
  74.     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu-collapse">
  75.       <i class="fa fa-align-justify fa-lg"></i></span><span class="sr-only">Toggle navigation</span>
  76.     </button>
  77.     <div class="collapse navbar-collapse" id="main-menu-collapse">
  78.       <ul class="navbar-nav visible-xs">
  79.         <li><a class="btn home" href="index.html"><i class="fa fa-home fa-lg"></i>Home</a></li>
  80.         <li><a class="btn about" href="index.html"><i class="fa fa-question-circle fa-lg"></i>About</a></li>
  81.         <li><a class="btn about" href="index.html"><i class="fa fa-book fa-lg"></i>Story</a></li>
  82.         <li><a class="btn about" href="index.html"><i class="fa fa-male fa-lg"></i>Characters</a></li>
  83.         <li><a class="btn media" href="index.html"><i class="fa fa-camera-retro fa-lg"></i>Media</a></li>
  84.         <li><a class="btn downloads" href="index.html"><i class="fa fa-download fa-lg"></i>Download</a></li>
  85.         <li><a class="btn contact" href="index.html"><i class="fa fa-comments-o fa-lg"></i>Contact</a></li>
  86.         <li><a class="btn illust" href="illust.html"><i class="fa fa-picture-o fa-lg"></i>Illustrations</a></li>
  87.         <li><a class="btn concart" href="index.html"><i class="fa fa-pencil-square-o fa-lg"></i>Concept Art</a></li>
  88.         <li><a class="btn yonkoma" href="index.html"><i class="fa fa-cogs fa-lg"></i>4-koma</a></li>
  89.       </ul>
  90.     </div>
  91.  
  92.     <header>
  93.       <section class="wrapper">
  94.         <h1 class="pull-left">
  95.           Nusakana
  96.         </h1>
  97.         <span class="pull-right hidden-xs">Follow us! <a href="#" class="socialicon b">Blogger</a> <a href="#" class="socialicon f">Fesbuk</a></span>
  98.         <br clear="both" />
  99.  
  100.         <nav role="navigation" class="hidden-xs col-md-3">
  101.           <div>
  102.           <span class="border top"></span>
  103.           <h2>&#9830;<u>Menu</u>&#9830;</h2>
  104.           <ul>
  105.             <li><a class="btn home" href="index.html"><i class="fa fa-home fa-lg"></i>Home</a></li>
  106.             <li><a class="btn about" href="about.html"><i class="fa fa-question-circle fa-lg"></i>About</a></li>
  107.             <li></span><a class="btn about" href="story.html"><i class="fa fa-book fa-lg"></i>Story</a></li>
  108.             <li></span><a class="btn about" href="index.html"><i class="fa fa-male fa-lg"></i>Characters</a></li>
  109.             <li><a class="btn media" href="index.html"><i class="fa fa-camera-retro fa-lg"></i>Media</a></li>
  110.             <li><a class="btn downloads" href="index.html"><i class="fa fa-download fa-lg"></i>Download</a></li>
  111.             <li><a class="btn contact" href="index.html"><i class="fa fa-comments-o fa-lg"></i>Contact</a></li>
  112.           </ul>
  113.           <h2>&#9830;<u>Omake</u>&#9830;</h2>
  114.           <ul>
  115.             <li><a class="btn illust" href="illust.html"><i class="fa fa-picture-o fa-lg"></i>Illustrations</a></li>
  116.             <li><a class="btn concart" href="cart.html"><i class="fa fa-pencil-square-o fa-lg"></i>Concept Art</a></li>
  117.             <li><a class="btn yonkoma" href="Yonkoma.html"><i class="fa fa-cogs fa-lg"></i>4-koma</a></li>
  118.           </ul>
  119.           <h2>Affiliates</h2>
  120.           <span class="border bottom"></span>
  121.           </div>
  122.         </nav>
  123.       </section>
  124.     </header>
  125.    
  126.     <section id="container" class="wrapper">
  127.       <section class="col-md-12 col-xs-12">
  128.         <section id="content" class="col-md-9 col-xs-12 pull-right">
  129.           <section class="Collage">
  130.             <div class="Image_Wrapper" data-caption="Nusakana parody!"><a class="box" href="images/nusakana-bg.jpg" data-lightbox-gallery="gallery"><img src="images/nusakana-bg.jpg" alt="" /></a></div>
  131.             <div class="Image_Wrapper" data-caption="Lakeside"><a class="box" href="images/nusakana-lake.jpg" data-lightbox-gallery="gallery"><img src="images/nusakana-lake.jpg" alt="" /></a></div>
  132.             <div class="Image_Wrapper" data-caption="Beach time!"><a class="box" href="images/nusakana-beach.jpg" data-lightbox-gallery="gallery"><img src="images/nusakana-beach.jpg" alt="" /></a></div>
  133.             <div class="Image_Wrapper" data-caption="When she wears the Mc's outfit..."><a class="box" href="images/orcaswap.jpg" data-lightbox-gallery="gallery"><img src="images/orcaswap.jpg" alt="" /></a></div>
  134.             <div class="Image_Wrapper" data-caption="Nusakana-esque Zodiac"><a class="box" href="images/molaquarius.jpg" data-lightbox-gallery="gallery" title="Molaquarius!"><img src="images/molaquarius.jpg" alt="" /></a></div>
  135.             <div class="Image_Wrapper" data-caption="Last day of summer"><a class="box" href="images/summerover.jpg" data-lightbox-gallery="gallery"><img src="images/summerover.jpg" alt="" /></a></div>
  136.             <div class="Image_Wrapper" data-caption="Funfact: Molamola"><a class="box" href="images/funfact_molamola.jpg" data-lightbox-gallery="gallery"><img src="images/funfact_molamola.jpg" alt="" /></a></div>
  137.             <div class="Image_Wrapper" data-caption="Funfact: Mica"><a class="box" href="images/funfact_mica.jpg" data-lightbox-gallery="gallery"><img src="images/funfact_mica.jpg" alt="" /></a></div>
  138.             <div class="Image_Wrapper" data-caption="Funfact: Mako"><a class="box" href="images/funfact_shark.jpg" data-lightbox-gallery="gallery"><img src="images/funfact_shark.jpg" alt="" /></a></div>
  139.             <div class="Image_Wrapper" data-caption="Funfact: Auria"><a class="box" href="images/funfact_goldfish.jpg" data-lightbox-gallery="gallery"><img src="images/funfact_goldfish.jpg" alt="" /></a></div>
  140.           </section>
  141.         </section>
  142.       </section>
  143.     </section>
  144.  
  145.     <footer class="hidden-xs">
  146.       Nusakana© - Namaapa Studio. All rights reserved.
  147.     </footer>
  148.  
  149.     <section class="footer visible-xs col-xs-12">
  150.       <section class="wrapper">
  151.         Affiliates
  152.       </section>
  153.       Nusakana© - Namaapa Studio. All rights reserved.
  154.     </section>
  155.    
  156.   </body>
  157. </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!