API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 25th, 2015
204
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.74 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Cats are cool</title>
  6.     <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.4/jquery.fullPage.css'>
  7.     <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
  8.     <style>
  9.         .next {
  10.             bottom: 0;
  11.             position: fixed;
  12.             left: 50%;
  13.             width: 20%;
  14.             margin-left: -10%;
  15.             text-align: center;
  16.             padding: 1em;
  17.         }
  18.         .next > a {
  19.             color: white;
  20.         }
  21.         .header {
  22.             background: url("https://i.imgur.com/o9q0zid.gif");
  23.             background-repeat: no-repeat;
  24.             background-size: 100% auto;
  25.             color: white;
  26.             background-color: #000;
  27.         }
  28.         nav > ul {
  29.             z-index: 1;
  30.             position: fixed;
  31.             list-style: none;
  32.             padding: 0;
  33.             background-color: rgba(0,0,0,0.9);
  34.             width: 100%;
  35.             margin: 0;
  36.         }
  37.         nav > ul > li {
  38.             float: left;
  39.             margin-left: 0.5em;
  40.         }
  41.         nav > ul > li.active > a {
  42.             color: pink;
  43.         }
  44.         nav > ul > li > a {
  45.             color: white;
  46.             text-decoration: none;
  47.         }
  48.         nav > ul > li {
  49.             padding: 0.5em;
  50.         }
  51.         h1 {
  52.             padding: 1em;
  53.         }
  54.         p {
  55.             padding: 1em;
  56.         }
  57.         nav > ul {
  58.             box-shadow: 0 1px 5px #000;
  59.         }
  60.     </style>
  61. </head>
  62.  
  63. <body>
  64. <nav>
  65.     <ul>
  66.         <li data-menuanchor="first" class="active">
  67.         <a href="#first"><i class="fa fa-home"></i> Home</a>
  68.         </li>
  69.         <li data-menuanchor="second">
  70.         <a href="#second"><i class="fa fa-heart"></i> Cat info</a>
  71.         </li>
  72.         <li data-menuanchor="third">
  73.         <a href="#third">Third section</a>
  74.         </li>
  75.         <li data-menuanchor="fourth">
  76.         <a href="#fourth">Fourth section</a>
  77.         </li>
  78.     </ul>
  79. </nav>
  80. <div id="fullpage">
  81.   <div class="section header">
  82.     <h1>We are cat lovers</h1>
  83.     <div class="next">
  84.       <a href="#second">
  85.         <i class="fa fa-chevron-down"></i>
  86.       </a>
  87.     </div>
  88.   </div>
  89.   <div class="section">
  90.     <p>Some section</p>
  91.   </div>
  92.   <div class="section">
  93.     <p>
  94.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec odio id est laoreet faucibus non ut orci. In sed nibh massa. Vestibulum in nulla tempus nunc lacinia sagittis at sit amet sapien. Mauris sit amet nibh a ante condimentum finibus et
  95.       a justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer tempor blandit sapien eget mollis. Nulla vitae scelerisque risus. Sed aliquam purus magna, eget sollicitudin mi ultrices in. Suspendisse eget
  96.       ex laoreet diam dignissim tincidunt non et nisi. Donec mollis accumsan lacus id euismod. Donec quis laoreet tortor, quis tincidunt leo. Nulla vestibulum consequat accumsan. Nunc sed dui non est iaculis tempus. Morbi lacinia iaculis gravida.
  97.     </p>
  98.     <p>Maecenas pulvinar finibus elit, in maximus massa sollicitudin et. Proin varius ultricies odio ac suscipit. Integer accumsan nibh eu diam consectetur, eget ornare sapien aliquam. Quisque eget dictum justo. Maecenas augue odio, facilisis ut malesuada
  99.       at, ullamcorper sed tellus. Nulla nec enim et elit pellentesque venenatis quis id leo. Integer sagittis dui quis neque rutrum sollicitudin. Curabitur eleifend leo et nulla posuere hendrerit. In bibendum lorem eu metus pharetra, sed dignissim eros
  100.       laoreet. Maecenas facilisis laoreet tempus. Aliquam suscipit fringilla euismod. Nullam malesuada felis eu lacus volutpat, ac congue dolor vestibulum. Aenean mattis condimentum velit, auctor faucibus mi vehicula sit amet. Cras a velit imperdiet risus
  101.       tempor vulputate sit amet non tortor. Pellentesque quis ex tortor. Nullam vehicula, dui at posuere euismod, tortor massa maximus lorem, et pretium quam sem vitae tellus. Duis ullamcorper elementum tellus a efficitur. Integer rhoncus orci vel tortor
  102.       dapibus, et bibendum lacus condimentum. Nam tortor felis, tristique vitae tristique ut, faucibus non nisi. Cras egestas aliquam quam ac dignissim. Proin volutpat ipsum in faucibus lobortis. Donec pellentesque tristique interdum. Proin vitae dui
  103.       a neque gravida sollicitudin nec ut dolor. Sed elementum lectus at arcu interdum ultricies. Nam quis ornare felis. Praesent a iaculis turpis. Etiam dictum sollicitudin dolor, eget congue libero sodales sed. Nulla vitae congue mi. Duis sagittis posuere
  104.       est, lacinia molestie lorem rhoncus vel. Pellentesque euismod magna ac posuere tempor. Nunc nibh nunc, ultrices sit amet congue eget, pretium non enim. Morbi auctor maximus eros id ullamcorper. Maecenas pulvinar pulvinar urna vitae pharetra. Integer
  105.       ornare at tortor sed cursus. Sed pretium purus dui. Pellentesque viverra eu eros in lacinia. Quisque quis erat tristique, interdum est et, varius risus. Nunc eget mi vel leo mollis ornare cursus ullamcorper lectus. Quisque libero nisl, luctus dapibus
  106.       mauris quis, malesuada aliquet nisl. Praesent hendrerit, sapien et interdum condimentum, arcu est efficitur ipsum, porttitor lobortis diam felis id ante. Phasellus vestibulum neque nec tortor ornare, ac luctus nibh vehicula. Sed consequat finibus
  107.       consectetur. Donec id commodo ligula.</p>
  108.     <p>
  109.       Pellentesque neque arcu, faucibus eu erat egestas, mollis malesuada lectus. Curabitur hendrerit congue enim nec pretium. Phasellus eget tempor velit. Pellentesque faucibus commodo feugiat. Ut blandit, sem id maximus vulputate, turpis tellus accumsan erat,
  110.       nec tempus quam neque eu ligula. Nunc quis dui at ex congue porttitor id vitae nunc. Nulla finibus velit non mollis efficitur. Aliquam erat volutpat. Donec suscipit augue mauris, ornare aliquet ligula sollicitudin sed. Vivamus accumsan est sed justo
  111.       porttitor porttitor. Vestibulum euismod mi a pharetra vulputate. Suspendisse pretium pharetra nisi, id facilisis augue consequat volutpat. Vestibulum lacinia augue turpis, vel mattis orci vulputate cursus. Lorem ipsum dolor sit amet, consectetur
  112.       adipiscing elit. Vestibulum nec odio id est laoreet faucibus non ut orci. In sed nibh massa. Vestibulum in nulla tempus nunc lacinia sagittis at sit amet sapien. Mauris sit amet nibh a ante condimentum finibus et a justo. Cum sociis natoque penatibus
  113.       et magnis dis parturient montes, nascetur ridiculus mus. Integer tempor blandit sapien eget mollis. Nulla vitae scelerisque risus. Sed aliquam purus magna, eget sollicitudin mi ultrices in. Suspendisse eget ex laoreet diam dignissim tincidunt non
  114.       et nisi. Donec mollis accumsan lacus id euismod. Donec quis laoreet tortor, quis tincidunt leo. Nulla vestibulum consequat accumsan. Nunc sed dui non est iaculis tempus. Morbi lacinia iaculis gravida. Maecenas pulvinar finibus elit, in maximus massa</p>
  115.     <p>
  116.       sollicitudin et. Proin varius ultricies odio ac suscipit. Integer accumsan nibh eu diam consectetur, eget ornare sapien aliquam. Quisque eget dictum justo. Maecenas augue odio, facilisis ut malesuada at, ullamcorper sed tellus. Nulla nec enim et elit
  117.         pellentesque venenatis quis id leo. Integer sagittis dui quis neque rutrum sollicitudin. Curabitur eleifend leo et nulla posuere hendrerit. In bibendum lorem eu metus pharetra, sed dignissim eros laoreet. Maecenas facilisis laoreet tempus. Aliquam
  118.         suscipit fringilla euismod. Nullam malesuada felis eu lacus volutpat, ac congue dolor vestibulum. Aenean mattis condimentum velit, auctor faucibus mi vehicula sit amet. Cras a velit imperdiet risus tempor vulputate sit amet non tortor. Pellentesque
  119.         quis ex tortor. Nullam vehicula, dui at posuere euismod, tortor massa maximus lorem, et pretium quam sem vitae tellus. Duis ullamcorper elementum tellus a efficitur. Integer rhoncus orci vel tortor dapibus, et bibendum lacus condimentum. Nam tortor
  120.         felis, tristique vitae tristique ut, faucibus non nisi. Cras egestas aliquam quam ac dignissim. Proin volutpat ipsum in faucibus lobortis. Donec pellentesque tristique interdum. Proin vitae dui a neque gravida sollicitudin nec ut dolor. Sed elementum
  121.         lectus at arcu interdum ultricies. Nam quis ornare felis. Praesent a iaculis turpis. Etiam dictum sollicitudin dolor, eget congue libero sodales sed. Nulla vitae congue mi. Duis sagittis posuere est, lacinia molestie lorem rhoncus vel. Pellentesque
  122.         euismod magna ac posuere tempor. Nunc nibh nunc, ultrices sit amet congue eget, pretium non enim. Morbi auctor maximus eros id ullamcorper. Maecenas pulvinar pulvinar urna vitae pharetra. Integer ornare at tortor sed cursus. Sed pretium purus dui.
  123.         Pellentesque viverra eu eros in lacinia. Quisque quis erat tristique, interdum est et, varius risus. Nunc eget mi vel leo mollis ornare cursus ullamcorper lectus. Quisque libero nisl, luctus dapibus mauris quis, malesuada aliquet nisl. Praesent
  124.         hendrerit,</p>
  125.         <p>
  126.         sapien et interdum condimentum, arcu est efficitur ipsum, porttitor lobortis diam felis id ante. Phasellus vestibulum neque nec tortor ornare, ac luctus nibh vehicula. Sed consequat finibus consectetur. Donec id commodo ligula. Pellentesque neque arcu,
  127.         faucibus eu erat egestas, mollis malesuada lectus. Curabitur hendrerit congue enim nec pretium. Phasellus eget tempor velit. Pellentesque faucibus commodo feugiat. Ut blandit, sem id maximus vulputate, turpis tellus accumsan erat, nec tempus quam
  128.         neque eu ligula. Nunc quis dui at ex congue porttitor id vitae nunc. Nulla finibus velit non mollis efficitur. Aliquam erat volutpat. Donec suscipit augue mauris, ornare aliquet ligula sollicitudin sed. Vivamus accumsan est sed justo porttitor porttitor.
  129.         Vestibulum euismod mi a pharetra vulputate. Suspendisse pretium pharetra nisi, id facilisis augue consequat volutpat. Vestibulum lacinia augue turpis, vel mattis orci vulputate cursus.</p>
  130.     </div>
  131.   <div class="section">
  132.     <p>xDDD</p>
  133.   </div>
  134. </div>
  135.  
  136.     <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
  137.     <script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.4/vendors/jquery.slimscroll.js'></script>
  138.     <script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.4/jquery.fullPage.js'></script>
  139.     <script type="text/javascript">
  140.         $(document).ready(function() {
  141.             $('#fullpage').fullpage({
  142.                 anchors: [
  143.                 'first',
  144.                 'second',
  145.                 'third',
  146.                 'fourth'
  147.                 ],
  148.                 scrollOverflow: true,
  149.                 menu: 'nav > ul'
  150.             });
  151.         });
  152.     </script>
  153.  
  154. </body>
  155.  
  156. </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!