API tools faq
paste
Advertisement
Guest User

htmlmenusectionseparator

a guest
Apr 23rd, 2016
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
  8.         <title>Kamogawa - boxing for the winners</title>
  9.  
  10.         <meta name="description" content="The famous gymnase offers its services" />
  11.         <meta name="keywords" content="boxing, kamogawa, kurakuen, ippo, makunouchi, takamura, genji, genji kamogawa, miyata" />
  12.         <meta name="author" content="Adrien Horgnies" />
  13.         <meta name="source" content="Codrops">
  14.        
  15.         <link rel="shortcut icon" href="../favicon.ico">
  16.         <!-- <<<CSS>>> -->
  17.         <!-- the followings are a merge between two sources : -->
  18.         <!-- source 1 : http://codepen.io/lukeyphills/pen/FjygE -->
  19.         <!-- source 2 : http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ -->
  20.         <!-- Not really my work thus but I still spent a few hours with demo.scss and component.scss -->
  21.         <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  22.         <link rel="stylesheet" type="text/css" href="css/icons.css" />
  23.         <link rel="stylesheet" type="text/css" href="css/component.css" />
  24.         <link rel="stylesheet" type="text/css" href="css/demo.css" />
  25.         <!-- User -->
  26.         <link rel="stylesheet" type="text/css" href="css/menu.css">
  27.         <link rel="stylesheet" type="text/css" href="css/style.css">
  28.  
  29.         <!-- TODO Icone dans la barre de navigation -->
  30.     </head>
  31.     <body>
  32.         <div class="container">
  33. <!--            HEADER -->
  34.             <div class="codrops-top clearfix">
  35.                 <a class="codrops-icon codrops-icon-prev" href="http://mangafox.me/manga/hajime_no_ippo/v01/c001/1.html" target="_blank"><span>Manga</span></a>
  36.                 <span class="right"><a class="codrops-icon codrops-icon-next" href="https://en.wikipedia.org/wiki/Hajime_no_Ippo" target="_blank"><span>Wikipedia</span></a></span>
  37.             </div>
  38.             <header>
  39.                 <h1>Kamogawa Gym <span>The boxing gymnase of the champions</span></h1> 
  40.             </header>
  41.             <nav id="bt-menu" class="bt-menu">
  42.                 <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
  43.                 <ul>
  44.                     <li><a href="#HOME">Home</a></li>
  45.                     <li><a href="#SERVICES">Services</a></li>
  46.                     <li><a href="#NEWS">News</a></li>
  47.                     <li><a href="#ABOUT">About</a></li>
  48.                     <li><a href="#GALLERY">Gallery</a></li>
  49.                     <li><a href="#CONTACT">Contact</a></li>
  50.                 </ul>
  51.                 <ul>
  52.                     <li><a href="https://twitter.com/ippothechampion" class="bt-icon icon-twitter">Twitter</a></li>
  53.                     <li><a href="https://plus.google.com/communities/108153078724792305017/stream/681f3587-e0c1-49e4-8a30-ec914dbea5d3" class="bt-icon icon-gplus">Google+</a></li>
  54.                     <li><a href="https://www.facebook.com/hajime.noippo.395?fref=ts" class="bt-icon icon-facebook">Facebook</a></li>
  55.                 </ul>
  56.             </nav>
  57.  
  58. <!--            HOME -->
  59.             <section id="HOME" class="col-2 ss-style-triangles">
  60.                 <div class="column text">
  61.                     <h2>Home</h2>
  62.                     <p>Galaxies a still more glorious dawn awaits shores of the cosmic ocean bits of moving fluff the only home we've ever known finite but unbounded colonies astonishment laws of physics a very small stage in a vast cosmic arena brain is the seed of intelligence realm of the galaxies Apollonius of Perga rogue intelligent beings courage of our questions made in the interiors</p>
  63.                 </div>
  64.                 <div class="column">
  65.                     <span class="icon icon-headphones"></span>
  66.                 </div>
  67.             </section>
  68.  
  69. <!--            SERVICES -->
  70.             <section id="SERVICES" class="color">
  71.                 <h2>Services</h2>
  72.                 <p>Galaxies a still more glorious dawn awaits shores of the cosmic ocean bits of moving fluff the only home we've ever known finite but unbounded colonies astonishment laws of physics a very small stage in a vast cosmic arena brain is the seed of intelligence realm of the galaxies Apollonius of Perga rogue intelligent beings courage of our questions made in the interiors of collapsing stars laws of physics how far away, rings of Uranus the carbon in our apple pies rings of Uranus a very small stage in a vast cosmic arena brain is the seed of intelligence preserve and cherish that pale blue dot muse about, globular star cluster ship of the imagination shores of the cosmic ocean, as a patch of light? Ship of the imagination, with pretty stories for which there's little good evidence across the centuries, brain is the seed of intelligence muse about, Vangelis hydrogen atoms?</p>
  73.             </section>
  74.  
  75. <!--            NEWS -->
  76.             <section id="NEWS" class="col-3 ss-style-doublediagonal">
  77.                 <h2>News</h2>
  78.                 <div class="column">
  79.                     <span class="icon icon-home"></span>
  80.                     <p>Take root and flourish. Extraordinary claims require extraordinary evidence, across the centuries venture hundreds of thousands are creatures of the cosmos rich in heavy atoms of brilliant syntheses Cambrian explosion Euclid...</p>
  81.                 </div>
  82.                 <div class="column">
  83.                     <span class="icon icon-bullhorn"></span>
  84.                     <p>Take root and flourish. Extraordinary claims require extraordinary evidence, across the centuries venture hundreds of thousands are creatures of the cosmos rich in heavy atoms of brilliant syntheses Cambrian explosion Euclid...</p>
  85.                 </div>
  86.                 <div class="column">
  87.                     <span class="icon icon-blog"></span>
  88.                     <p>Take root and flourish. Extraordinary claims require extraordinary evidence, across the centuries venture hundreds of thousands are creatures of the cosmos rich in heavy atoms of brilliant syntheses Cambrian explosion Euclid...</p>
  89.                 </div>
  90.             </section>
  91.  
  92. <!--            ABOUT -->
  93.             <section id="ABOUT" class="col-2 ss-style-halfcircle">
  94.                 <div class="column">
  95.                     <span class="icon icon-images"></span>
  96.                 </div>
  97.                 <div class="column text">
  98.                     <h2>About</h2>
  99.                     <p>Galaxies a still more glorious dawn awaits shores of the cosmic ocean bits of moving fluff the only home we've ever known finite but unbounded colonies astonishment laws of physics a very small stage in a vast cosmic arena brain is the seed of intelligence realm of the galaxies Apollonius of Perga rogue intelligent beings courage of our questions made in the interiors</p>
  100.                 </div>
  101.             </section>
  102.  
  103. <!--            GALLERY -->
  104.             <section id="GALLERY" class="color ss-style-bigtriangle">
  105.                 <h2>Gallery</h2>
  106.                 <p>Galaxies a still more glorious dawn awaits shores of the cosmic ocean bits of moving fluff the only home we've ever known finite but unbounded colonies astonishment laws of physics a very small stage in a vast cosmic arena brain is the seed of intelligence realm of the galaxies Apollonius of Perga rogue intelligent beings courage of our questions made in the interiors of collapsing stars laws of physics how far away, rings of Uranus the carbon in our apple pies rings of Uranus a very small stage in a vast cosmic arena brain is the seed of intelligence preserve and cherish that pale blue dot muse about, globular star cluster ship of the imagination shores of the cosmic ocean, as a patch of light? Ship of the imagination, with pretty stories for which there's little good evidence across the centuries, brain is the seed of intelligence muse about, Vangelis hydrogen atoms?</p>
  107.             </section>
  108.             <svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
  109.                 <path d="M0 0 L50 100 L100 0 Z" />
  110.             </svg>
  111.  
  112. <!--            CONTACT -->
  113.             <section id="CONTACT" class="col-3">
  114.                 <h2>Contact</h2>
  115.                 <div class="column">
  116.                     <span class="icon icon-camera"></span>
  117.                     <p>Take root and flourish. Extraordinary claims require extraordinary evidence, across the centuries venture hundreds of thousands are creatures of the cosmos rich in heavy atoms of brilliant syntheses Cambrian explosion Euclid...</p>
  118.                 </div>
  119.                 <div class="column">
  120.                     <span class="icon icon-headphones"></span>
  121.                     <p>Take root and flourish. Extraordinary claims require extraordinary evidence, across the centuries venture hundreds of thousands are creatures of the cosmos rich in heavy atoms of brilliant syntheses Cambrian explosion Euclid...</p>
  122.                 </div>
  123.                 <div class="column">
  124.                     <span class="icon icon-podcast"></span>
  125.                     <p>Take root and flourish. Extraordinary claims require extraordinary evidence, across the centuries venture hundreds of thousands are creatures of the cosmos rich in heavy atoms of brilliant syntheses Cambrian explosion Euclid...</p>
  126.                 </div>
  127.             </section>
  128.                
  129.                 <!-- VISUAL ELEMENT : CLOUD PATTERN -->
  130.                 <svg id="clouds" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
  131.                 <path d="M-5 100 Q 0 20 5 100 Z
  132.                          M0 100 Q 5 0 10 100
  133.                          M5 100 Q 10 30 15 100
  134.                          M10 100 Q 15 10 20 100
  135.                          M15 100 Q 20 30 25 100
  136.                          M20 100 Q 25 -10 30 100
  137.                          M25 100 Q 30 10 35 100
  138.                          M30 100 Q 35 30 40 100
  139.                          M35 100 Q 40 10 45 100
  140.                          M40 100 Q 45 50 50 100
  141.                          M45 100 Q 50 20 55 100
  142.                          M50 100 Q 55 40 60 100
  143.                          M55 100 Q 60 60 65 100
  144.                          M60 100 Q 65 50 70 100
  145.                          M65 100 Q 70 20 75 100
  146.                          M70 100 Q 75 45 80 100
  147.                          M75 100 Q 80 30 85 100
  148.                          M80 100 Q 85 20 90 100
  149.                          M85 100 Q 90 50 95 100
  150.                          M90 100 Q 95 25 100 100
  151.                          M95 100 Q 100 15 105 100 Z">
  152.                 </path>
  153.                 </svg>
  154.  
  155. <!--            FOOTER -->
  156.             <footer id="FOOTER" class="related footer-color">
  157.                 <p>Copyright <a href="https://en.wikipedia.org/wiki/Hajime_no_Ippo">Hajime No Ippo &copy;</a>. Design et dévloppments par Adrien Horgnies</p>
  158.    
  159.             </footer>
  160.         </div><!-- /container -->
  161.     </body>
  162.  
  163.     <script src="js/prefixfree.min.js"></script>
  164.     <script src="js/modernizr.custom.js"></script>
  165.     <script src="js/classie.js"></script>
  166.     <script src="js/borderMenu.js"></script>
  167.  
  168. </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!