API tools faq
paste
Advertisement
userdude

Bootstrap Affix demo - HTML

userdude
Sep 25th, 2012
1,144
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 35.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title></title>
  7. <meta name="description" content="">
  8. <meta name="viewport" content="width=device-width">
  9.  
  10. <link rel="stylesheet" href="css/bootstrap.customize.css">
  11. <style>
  12.     body {
  13.         padding-top: 60px;
  14.         padding-bottom: 40px;
  15.     }
  16.     li.active {
  17.         background: #ddd;
  18.     }
  19. </style>
  20. <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
  21. <link rel="stylesheet" href="css/main.css">
  22.  
  23. <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
  24. </head>
  25. <body data-spy="scroll" data-target=".lipsum-sidebar">
  26.  
  27.  <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
  28.  
  29.  <div class="navbar navbar-inverse navbar-fixed-top">
  30.   <div class="navbar-inner">
  31.    <div class="container">
  32.     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
  33.     <a class="brand" href="#">Project name</a>
  34.     <div class="nav-collapse collapse">
  35.      <ul class="nav">
  36.       <li class="active">
  37.        <a href="#">Home</a>
  38.       </li>
  39.       <li>
  40.        <a href="#about">About</a>
  41.       </li>
  42.       <li>
  43.        <a href="#contact">Contact</a>
  44.       </li>
  45.       <li class="dropdown">
  46.        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  47.        <ul class="dropdown-menu">
  48.         <li>
  49.          <a href="#">Action</a>
  50.         </li>
  51.         <li>
  52.          <a href="#">Another action</a>
  53.         </li>
  54.         <li>
  55.          <a href="#">Something else here</a>
  56.         </li>
  57.         <li class="divider"></li>
  58.         <li class="nav-header">
  59.          Nav header
  60.         </li>
  61.         <li>
  62.          <a href="#">Separated link</a>
  63.         </li>
  64.         <li>
  65.          <a href="#">One more separated link</a>
  66.         </li>
  67.        </ul>
  68.       </li>
  69.      </ul>
  70.      <form class="navbar-form pull-right">
  71.       <input class="span2" type="text" placeholder="Email">
  72.       <input class="span2" type="password" placeholder="Password">
  73.       <button type="submit" class="btn">
  74.        Sign in
  75.       </button>
  76.      </form>
  77.     </div><!--/.nav-collapse -->
  78.    </div>
  79.   </div>
  80.  </div>
  81.  
  82.  <div class="container">
  83.  
  84.   <div class="row">
  85.    <div class="span3 lipsum-sidebar">
  86.     <ul class="nav nav-list bs-docs-sidenav" data-spy="affix">
  87.      <li>
  88.       <a href="#lipsum1"><i class="icon-chevron-right"></i> Lipsom 1</a>
  89.      </li>
  90.      <li>
  91.       <a href="#lipsum2"><i class="icon-chevron-right"></i> Lipsom 2</a>
  92.      </li>
  93.      <li>
  94.       <a href="#lipsum3"><i class="icon-chevron-right"></i> Lipsom 3</a>
  95.      </li>
  96.      <li>
  97.       <a href="#lipsum4"><i class="icon-chevron-right"></i> Lipsom 4</a>
  98.      </li>
  99.      <li>
  100.       <a href="#lipsum5"><i class="icon-chevron-right"></i> Lipsom 5</a>
  101.      </li>
  102.      <li>
  103.       <a href="#lipsum6"><i class="icon-chevron-right"></i> Lipsom 6</a>
  104.      </li>
  105.      <li>
  106.       <a href="#lipsum7"><i class="icon-chevron-right"></i> Lipsom 7</a>
  107.      </li>
  108.      <li>
  109.       <a href="#lipsum8"><i class="icon-chevron-right"></i> Lipsom 8</a>
  110.      </li>
  111.      <li>
  112.       <a href="#lipsum9"><i class="icon-chevron-right"></i> Lipsom 9</a>
  113.      </li>
  114.     </ul>
  115.    </div>
  116.  
  117.    <div class="span9">
  118.  
  119.     <section id="lipsum1">
  120.      <p>
  121.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor dapibus justo id consequat. Pellentesque sem massa, tempus quis consequat quis, sodales eu tellus. Pellentesque id ullamcorper diam. Quisque rhoncus, diam ut lobortis auctor, risus libero vestibulum erat, in iaculis purus lacus a sem. Maecenas sodales nunc ac ipsum pulvinar sit amet ultrices risus consectetur. Proin vitae lorem nec quam semper pharetra in ut mauris. Nullam pulvinar lobortis libero eget luctus. Aliquam erat volutpat. In hac habitasse platea dictumst. Maecenas quis eros nulla. Vivamus nec metus eget metus aliquam cursus. Praesent semper tempus neque id bibendum. Curabitur blandit pulvinar leo in adipiscing.
  122.      </p>
  123.      <p>
  124.       Aliquam sit amet est felis. In pulvinar consequat suscipit. Sed accumsan lacinia lacus, sed gravida enim tempor et. Phasellus ut turpis a lacus pellentesque euismod. Proin auctor dui quis odio hendrerit at tristique diam aliquet. Donec est justo, viverra in tincidunt nec, pulvinar sed elit. Ut vel turpis sit amet purus tempor luctus ut vel ante. Fusce consequat mi vel purus congue ultricies. Sed et tellus sit amet mauris fermentum tristique non eu justo. Phasellus tellus nulla, tristique id placerat id, iaculis in purus. In auctor sapien at erat luctus eleifend. Ut mattis, magna vel tincidunt vestibulum, nunc turpis convallis velit, eget varius arcu neque eu nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  125.      </p>
  126.      <p>
  127.       Etiam sollicitudin ornare nunc, sit amet tempor massa consectetur et. Pellentesque vel magna a velit luctus dignissim. Vivamus at diam eu ante placerat lobortis id in elit. Maecenas iaculis dui vitae sapien feugiat ac luctus ipsum aliquam. Nulla adipiscing consectetur quam, non eleifend dolor sollicitudin at. Ut ac dui mauris. Mauris id orci non lorem adipiscing sollicitudin. Etiam at justo in eros pharetra placerat a vel metus. Maecenas aliquam dapibus vehicula.
  128.      </p>
  129.      <p>
  130.       Suspendisse potenti. Morbi odio lorem, scelerisque eu eleifend eget, placerat eget metus. Nulla non elit et sapien tincidunt feugiat. Aliquam nec lacinia arcu. Donec in nisi et nibh aliquet varius. Nunc viverra sapien vitae nisl auctor vitae viverra risus sagittis. Aenean quis arcu ligula, ut gravida ante. Nunc egestas mi eget mi suscipit commodo. Cras id justo est. Nunc varius nunc imperdiet elit aliquam vitae cursus magna adipiscing. Vivamus suscipit justo tortor, eu tempus quam. Donec venenatis sollicitudin augue, sed pharetra erat vehicula vel. Donec in consectetur sem. Vivamus at lectus lorem. Praesent vestibulum leo sed metus egestas fermentum. Mauris tincidunt diam a turpis pellentesque aliquam.
  131.      </p>
  132.     </section>
  133.     <section id="lipsum2">
  134.      <p>
  135.       In hac habitasse platea dictumst. Quisque semper, enim tempor convallis posuere, augue erat faucibus orci, sed tempor orci lacus ac arcu. Integer auctor consequat porta. Nulla viverra, tellus ac porttitor pulvinar, urna sem vestibulum purus, quis viverra augue lectus sed mi. Mauris porta vulputate nisi, a sollicitudin tellus accumsan eget. Donec id elit quis purus tincidunt aliquam. Pellentesque a dolor dolor, et sodales mi. Pellentesque quis augue sed metus euismod porttitor. Nullam fringilla lectus sit amet ligula imperdiet condimentum mollis tortor accumsan. Praesent blandit, enim sed tempor porta, leo tortor lobortis risus, nec iaculis odio est eu magna. Suspendisse potenti. Integer lectus lorem, pretium accumsan vehicula eu, venenatis a leo.
  136.      </p>
  137.      <p>
  138.       Nunc lacinia dignissim ipsum, ut dapibus elit lobortis ac. Integer dignissim lacus in justo ultrices vel auctor lorem auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut congue elit. Phasellus id neque nec nisl bibendum rhoncus. Pellentesque vel enim at dui mollis mattis quis quis diam. Suspendisse ut lorem at mauris feugiat blandit. Etiam et rhoncus ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc urna nunc, mattis a hendrerit vel, tristique ut sem. Nam turpis sapien, rhoncus ut ultrices at, viverra at tortor. Pellentesque est leo, hendrerit vitae eleifend vitae, aliquam et nunc.
  139.      </p>
  140.      <p>
  141.       Nam neque diam, fringilla eu interdum quis, sagittis sit amet risus. Vivamus tempus sodales erat, et aliquet ante semper quis. Proin aliquet erat ut arcu blandit vel condimentum nunc laoreet. Curabitur hendrerit mauris nec lectus pellentesque egestas. Sed euismod ipsum ligula. Nunc volutpat consequat magna, at dictum tellus dignissim ut. Donec vel tristique leo.
  142.      </p>
  143.      <p>
  144.       Praesent eu augue ac ipsum iaculis lobortis commodo vitae nisi. Fusce vestibulum bibendum enim. Sed id eros nunc. Proin ultricies sem nec leo bibendum blandit. Praesent ac nibh felis, eget cursus ipsum. Quisque vel scelerisque justo. Maecenas in enim non quam molestie commodo at id ante. Nullam interdum lectus ut urna condimentum condimentum. Praesent sit amet iaculis sapien. Duis venenatis, turpis sed ornare tristique, libero justo pharetra lacus, sed commodo orci nunc id quam. Nam eu odio ante, et pellentesque ligula. Duis a justo et dolor dictum sodales ac at nibh. Proin sed leo a dui scelerisque semper. Aliquam ac arcu pellentesque nibh pellentesque rutrum. Mauris tincidunt sagittis tellus non rhoncus.
  145.      </p>
  146.     </section>
  147.     <section id="lipsum3">
  148.      <p>
  149.       Sed rutrum volutpat sapien ut ullamcorper. Donec nunc nulla, gravida eget scelerisque non, elementum quis turpis. Suspendisse fringilla dignissim nulla sed egestas. Fusce adipiscing tincidunt pharetra. Quisque consequat ultrices faucibus. Pellentesque vel purus non nisi mattis porta. Ut lacinia sapien interdum mi gravida mattis ut id purus. Nulla sed orci erat. In hac habitasse platea dictumst. Integer tempor suscipit eros, vitae condimentum leo eleifend non. Fusce dui sem, aliquet ut blandit vel, blandit ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mi nisl, imperdiet et vehicula quis, auctor at nulla. Fusce libero ligula, tempor sit amet luctus vel, lobortis ut justo.
  150.      </p>
  151.      <p>
  152.       In at tortor congue nunc laoreet blandit. Aliquam varius, lectus a tincidunt porttitor, tellus nunc commodo enim, fermentum scelerisque nulla eros sed diam. Fusce rutrum, neque ac accumsan pellentesque, justo dolor gravida risus, nec tempor nunc ante in tortor. Suspendisse malesuada felis in velit vehicula volutpat. Praesent tristique viverra elit congue sodales. In at sagittis lacus. Nunc ac est enim, quis cursus sem. Ut justo lorem, tristique in feugiat vitae, fringilla eget mauris. Maecenas ante eros, rutrum sit amet pharetra vestibulum, scelerisque faucibus risus. Sed hendrerit volutpat dolor ac venenatis. Sed eget vehicula tortor.
  153.      </p>
  154.      <p>
  155.       Praesent dui leo, euismod id ullamcorper vitae, suscipit vitae ipsum. Sed nec rhoncus odio. Pellentesque ultrices, nibh et sodales congue, lacus lorem consequat lectus, nec iaculis elit arcu quis libero. Aenean faucibus tristique risus, at dignissim turpis malesuada eget. Aenean ultricies velit convallis odio porta scelerisque varius dui sodales. Sed cursus mollis ornare. Sed sit amet auctor tellus. Proin non quam lacus. Suspendisse porta metus in leo venenatis nec viverra nisl semper. Phasellus ut faucibus velit. Curabitur eleifend vehicula hendrerit. Nulla libero ipsum, eleifend id tempus id, tincidunt ut est. Aliquam iaculis molestie turpis quis blandit. Donec urna dolor, bibendum in interdum quis, pretium nec neque. Aliquam feugiat, sem fermentum scelerisque placerat, libero risus tincidunt turpis, eget porta purus neque vel felis.
  156.      </p>
  157.      <p>
  158.       Vivamus condimentum nisl et neque tempus tristique. Fusce leo arcu, consectetur nec mattis ac, aliquam ac sapien. Nulla id nulla ante, eu pulvinar nulla. Mauris fringilla erat leo, quis euismod ipsum. Praesent tincidunt porta ligula tempor semper. Mauris dictum, nisi eget semper fermentum, nulla nisl fermentum risus, in sodales mi ligula eget orci. Curabitur pellentesque egestas urna eu laoreet. Integer ac venenatis libero. Sed non erat nulla, eu sodales lectus. Nunc fringilla, elit sit amet rutrum suscipit, metus mauris volutpat mi, sed consectetur lacus arcu iaculis ligula. Sed pellentesque dapibus mauris, ac tristique augue sagittis nec. Morbi ut adipiscing ipsum.
  159.      </p>
  160.     </section>
  161.     <section id="lipsum4">
  162.      <p>
  163.       Nunc ultrices ipsum eu nisl vehicula convallis. Donec faucibus massa in lorem rutrum id tristique eros posuere. Sed ac est enim. Suspendisse sollicitudin nunc eu est posuere sodales. Pellentesque faucibus, dolor quis mattis adipiscing, orci augue commodo sem, sit amet ultrices quam libero eu diam. Donec vehicula consectetur lacus eu feugiat. Suspendisse ligula odio, venenatis in dignissim non, malesuada eu erat.
  164.      </p>
  165.      <p>
  166.       Sed aliquet bibendum tellus, vitae sodales nisl varius eget. Donec scelerisque, elit id eleifend hendrerit, elit sem hendrerit risus, non sagittis nisl neque tempor nisl. Etiam magna velit, porta non semper a, accumsan et libero. Quisque quis turpis nisl. Quisque volutpat facilisis venenatis. Aliquam erat volutpat. Phasellus hendrerit venenatis ipsum, vel blandit velit facilisis nec. Sed venenatis est sed nibh tempus iaculis. Nulla libero lacus, ultrices vitae dignissim quis, pellentesque non risus. Fusce augue leo, pulvinar congue feugiat in, consectetur quis mi. Ut turpis eros, ornare quis ultricies quis, sollicitudin vel nulla. Curabitur sodales interdum quam, sed congue eros posuere vitae. Nunc luctus nisi sed mauris vestibulum tempus. Nulla fringilla est sit amet tortor venenatis ut scelerisque turpis bibendum.
  167.      </p>
  168.      <p>
  169.       In hac habitasse platea dictumst. Morbi non purus ac mi sodales congue in sit amet erat. Aliquam tempus posuere volutpat. Aliquam nec sem sed nunc pretium semper. Phasellus dignissim orci erat. Fusce vel dignissim magna. Curabitur tortor nibh, hendrerit sit amet tincidunt sit amet, dictum vitae tortor. Sed id libero id felis tristique convallis et in justo. Pellentesque lacinia elit euismod elit lacinia aliquam. Etiam pretium sem non sapien interdum sed rhoncus eros porta. Nam rutrum blandit malesuada. Aenean vel lorem in purus congue tristique. Suspendisse potenti. Pellentesque molestie vehicula auctor.
  170.      </p>
  171.      <p>
  172.       Phasellus aliquet neque dignissim massa aliquet accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget ipsum a sem facilisis dapibus vitae vel nulla. Aenean eget eros mauris. Aliquam vehicula pulvinar facilisis. Donec cursus malesuada mauris, ut lobortis orci viverra et. Pellentesque sit amet sem turpis, vel gravida lectus. Sed rhoncus dignissim orci, sed bibendum neque dignissim sed. Vestibulum urna arcu, tempor laoreet elementum nec, tincidunt at velit. Mauris at lacus sagittis diam mollis bibendum ac quis odio. Phasellus mollis leo sed enim iaculis dapibus. Integer porta urna sed magna congue sed malesuada ipsum blandit. Nulla pulvinar, nibh eget sodales auctor, velit ligula ullamcorper eros, eget imperdiet turpis nulla eu ipsum. Fusce imperdiet urna ut enim faucibus non aliquet magna dictum.
  173.      </p>
  174.     </section>
  175.     <section id="lipsum5">
  176.      <p>
  177.       Etiam ac semper lorem. Nullam nec lectus arcu, in mollis felis. Fusce imperdiet tristique elit id tincidunt. Nulla ac porttitor enim. Vestibulum condimentum risus sit amet sapien cursus vehicula. Integer in mollis urna. Nulla suscipit mattis mi vitae interdum. Suspendisse id tortor ipsum, in laoreet erat.
  178.      </p>
  179.      <p>
  180.       Aliquam eget quam nec magna luctus bibendum. Nullam vel nulla dolor, vitae hendrerit arcu. Duis fermentum, libero vel laoreet dapibus, est nunc rutrum velit, gravida molestie turpis lorem dapibus tellus. Cras eu rhoncus lorem. Suspendisse potenti. Nullam orci metus, rutrum at laoreet eget, posuere nec mauris. Mauris vel urna turpis, nec lobortis enim. Vestibulum placerat pellentesque bibendum. Donec eget adipiscing erat. Vestibulum eleifend aliquam quam, vitae mollis quam commodo ac. Maecenas dictum, velit nec pellentesque viverra, sapien erat mattis nunc, nec dapibus tortor ipsum ac nisi. Aliquam quis sollicitudin quam. Nam at nulla nisi. In leo urna, congue elementum sagittis eu, pharetra sit amet sem.
  181.      </p>
  182.      <p>
  183.       Quisque at urna est, id elementum sem. In tempor suscipit erat quis accumsan. Praesent placerat, lorem ac laoreet euismod, lacus tortor gravida quam, eget faucibus nisi augue id arcu. Ut eros justo, semper vitae accumsan sed, interdum et sem. Vivamus ultricies ante egestas urna blandit gravida eu et augue. Duis lectus dolor, dignissim a tincidunt id, rhoncus ut turpis. Integer tellus neque, viverra sit amet sagittis a, mollis in ligula. Suspendisse potenti.
  184.      </p>
  185.      <p>
  186.       Morbi tincidunt sagittis sem mattis adipiscing. Cras euismod condimentum lacus pellentesque pulvinar. Vestibulum felis justo, tincidunt eget ultrices et, laoreet accumsan sem. Maecenas sit amet neque tortor, a sagittis odio. Etiam dolor elit, interdum in bibendum lobortis, laoreet ac quam. Vestibulum eget mattis erat. Phasellus orci velit, gravida id pharetra commodo, pretium ut nibh. Vestibulum volutpat egestas justo quis congue. Duis lectus arcu, lacinia vel porta ut, lacinia id mi. Praesent sed ipsum dolor, nec aliquam erat.
  187.      </p>
  188.      <p>
  189.       Pellentesque lobortis tortor ac risus condimentum vehicula. Phasellus malesuada commodo purus sit amet luctus. Nam id tortor magna, eu ullamcorper elit. Ut dapibus magna vitae mi convallis semper. Aenean ligula sem, tincidunt id porta at, bibendum eget urna. Praesent quis quam erat, nec semper nulla. Donec eget velit dolor. Maecenas augue velit, convallis posuere egestas ac, venenatis sed quam. Nulla lacinia vehicula erat vitae vehicula. Ut nec nulla turpis, id pharetra purus. Nullam ullamcorper lorem sit amet mi tempor congue. Mauris hendrerit, libero ac rutrum dignissim, tortor ante sodales sapien, lobortis consectetur felis nibh ut urna. Proin ut ligula non nibh suscipit aliquam. Donec congue fermentum justo, vel mattis nibh pellentesque sed. Donec metus neque, dignissim nec pretium at, pretium a tortor.
  190.      </p>
  191.      <p>
  192.       Donec id velit in erat dignissim malesuada. Nullam egestas mollis erat in dapibus. Morbi ac commodo lacus. Duis consectetur elementum velit, ut condimentum mi vehicula tristique. Aenean molestie aliquet lorem quis dapibus. Duis fermentum mauris ac metus euismod sagittis. Quisque in mauris libero, sed faucibus ligula. Donec adipiscing sagittis lacus, eget imperdiet eros feugiat egestas.
  193.      </p>
  194.      <p>
  195.       Mauris suscipit, tortor quis dignissim sodales, orci sem feugiat felis, vel varius est purus et nunc. In tempor, risus ac eleifend condimentum, justo diam malesuada arcu, nec feugiat nunc ante pretium magna. Praesent scelerisque sagittis semper. Integer imperdiet tellus a nulla cursus sit amet imperdiet lorem ultricies. Quisque rhoncus viverra iaculis. Nunc vel justo at dui vestibulum consequat sed a mauris. Aenean in diam et sapien euismod ullamcorper. Mauris viverra malesuada pulvinar. Sed molestie vehicula ante, non malesuada neque gravida vel. Nulla placerat eros non urna adipiscing at tempor ante dictum. Mauris scelerisque vulputate justo quis dapibus.
  196.      </p>
  197.     </section>
  198.     <section id="lipsum6">
  199.      <p>
  200.       Nam sollicitudin elit sed ipsum volutpat quis imperdiet felis placerat. Nam et libero velit, quis blandit ipsum. Morbi sed semper ipsum. Nulla tincidunt dui eu lacus fermentum lacinia. Donec mollis ultrices ante, nec placerat nibh dignissim a. Aliquam euismod, elit id pretium sodales, ligula arcu ultrices augue, et iaculis nibh diam a libero. Proin non odio nunc. Vestibulum mattis vestibulum dignissim. In vel odio est. Cras ullamcorper augue vulputate neque rhoncus dignissim. Ut tempor diam quam.
  201.      </p>
  202.      <p>
  203.       Aenean diam mauris, fringilla ac fermentum in, fermentum convallis nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent fermentum dictum egestas. Duis mollis blandit lorem imperdiet feugiat. Phasellus ante dolor, sodales id sollicitudin eu, tempor vitae augue. Duis at massa nec quam semper condimentum. Etiam in lacus sapien.
  204.      </p>
  205.      <p>
  206.       Proin pharetra hendrerit lacus, in molestie massa pellentesque sed. Sed feugiat nulla ac erat condimentum a aliquam erat blandit. Sed quis turpis nisi. Maecenas bibendum sagittis ultrices. Aenean pellentesque tincidunt dui, at tristique libero laoreet in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar egestas tortor ac convallis. Mauris sagittis tortor in sapien imperdiet ac faucibus ipsum imperdiet. Ut diam sapien, laoreet sit amet pellentesque eu, auctor quis neque. Sed ullamcorper accumsan ipsum, ac varius ante facilisis eget. Duis fermentum iaculis mattis. Ut ut justo purus, quis vulputate erat. Pellentesque faucibus augue non sapien consectetur aliquam vitae sit amet quam. Etiam a nunc et eros mollis ultrices et vel dui. Cras elementum risus semper velit volutpat tincidunt.
  207.      </p>
  208.      <p>
  209.       Fusce aliquet sodales arcu a ullamcorper. Nullam sapien tellus, laoreet sit amet egestas et, convallis nec enim. Nullam ut elit nulla. Fusce urna est, porttitor nec porttitor vel, pellentesque in ante. Duis pretium massa egestas est gravida dictum. Aliquam luctus gravida bibendum. Nulla sed odio risus, vel eleifend massa. Phasellus ullamcorper, ligula nec vehicula tempor, nibh nisi euismod ligula, nec blandit tortor sem luctus leo.
  210.      </p>
  211.      <p>
  212.       Sed ligula augue, interdum ut condimentum in, bibendum nec nulla. Nunc ipsum orci, iaculis non rhoncus eu, egestas ac mauris. Fusce ultricies vestibulum quam vel blandit. Nam sit amet metus augue, a semper metus. Sed hendrerit arcu id odio dictum ut sodales dolor tempus. Etiam pharetra eleifend lorem in malesuada. Pellentesque mauris velit, pulvinar quis ornare gravida, malesuada ac lorem.
  213.      </p>
  214.     </section>
  215.     <section id="lipsum7">
  216.      <p>
  217.       Nunc quis hendrerit elit. Nam lacinia orci ut diam dapibus cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at lacus vel quam tempor convallis. Nunc vitae ligula sapien, at bibendum neque. Proin sit amet aliquam sem. Curabitur commodo viverra lectus. Phasellus sed enim lobortis dolor ultrices dapibus eget eu justo. Ut vel neque justo, dictum pulvinar velit. Maecenas vitae massa quam, at elementum metus. Donec ornare erat in erat hendrerit at tristique neque vehicula. Duis eu augue augue. Cras euismod metus ut tortor ultricies vulputate. Morbi libero lectus, tempus et imperdiet eget, auctor ac ligula. Proin adipiscing erat ut nunc porta convallis. Donec quis egestas purus.
  218.      </p>
  219.      <p>
  220.       Proin vehicula porttitor sapien, in consectetur diam consequat eu. Aliquam erat volutpat. Morbi mauris justo, venenatis pretium consectetur vel, cursus sed elit. Phasellus pulvinar porta est, eget molestie tortor rhoncus a. Suspendisse ornare orci ac nulla euismod ac varius arcu tempus. In convallis faucibus venenatis. Ut luctus, leo ultrices consequat pellentesque, dolor odio tincidunt ante, in suscipit ligula lorem quis ipsum. Fusce arcu mauris, luctus posuere pretium eu, vulputate in augue. Integer elit urna, bibendum eget pulvinar vel, tincidunt eu est. Morbi elit ante, accumsan ac pharetra nec, porta vel dui. Duis a libero non nulla faucibus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  221.      </p>
  222.      <p>
  223.       Nullam feugiat dui ligula, quis pellentesque risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nibh urna, posuere quis vestibulum id, ullamcorper eget urna. Phasellus turpis orci, sodales laoreet pulvinar vitae, condimentum a neque. Nulla sit amet libero urna. Aenean mattis pellentesque magna, nec congue ipsum porta at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sollicitudin varius tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam urna lorem, malesuada non fringilla elementum, bibendum et nunc. Aenean in elit leo, id faucibus justo. Phasellus in lectus sit amet tellus volutpat facilisis ac vel libero. Sed lorem magna, ultricies vitae volutpat accumsan, porttitor a lacus. Sed aliquet luctus auctor.
  224.      </p>
  225.      <p>
  226.       Cras nec pretium dui. Suspendisse consequat sem quis justo condimentum sed gravida arcu viverra. Phasellus nibh velit, consequat at volutpat quis, placerat et leo. In sit amet dui non lacus scelerisque bibendum. Ut adipiscing nisl metus, at consequat nulla. Proin volutpat massa pulvinar metus ornare blandit. Morbi id tincidunt neque. Vestibulum eu est urna. Donec ac quam lacus. Suspendisse feugiat mattis mi tempor porttitor. Etiam eget orci a lectus dapibus adipiscing.
  227.      </p>
  228.      <p>
  229.       Cras sagittis lorem ornare risus ornare fermentum. Nam vel ligula vel ipsum interdum convallis. Nunc tincidunt, ipsum sit amet pharetra gravida, dui enim pellentesque ligula, et sollicitudin est nisl vitae est. Ut bibendum condimentum convallis. Cras ultrices luctus dolor non vehicula. Morbi eu neque eget erat faucibus vulputate eu hendrerit est. Ut dictum condimentum suscipit. Donec sed consequat magna. Ut metus lacus, commodo sit amet interdum nec, semper eu tellus. Proin aliquet velit pretium dui dapibus tempor. Vestibulum rhoncus egestas nunc eu luctus.
  230.      </p>
  231.      <p>
  232.       Mauris elementum ornare tellus, ut sollicitudin magna bibendum at. Phasellus mauris enim, tincidunt quis vehicula in, mollis sed orci. Ut ut nunc lorem. Suspendisse eu porttitor nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam vitae nisl vitae tortor consequat commodo id non lorem. Maecenas viverra sapien fringilla nisl porta pharetra. Curabitur placerat hendrerit fringilla. Aenean diam elit, facilisis et dignissim ut, semper id augue. In sagittis, urna sed accumsan fringilla, dolor metus lobortis eros, eu volutpat est nisi ut lacus. In hac habitasse platea dictumst.
  233.      </p>
  234.      <p>
  235.       Cras volutpat, ipsum et iaculis vulputate, ligula arcu convallis urna, at consequat dolor felis in enim. Aliquam consequat dignissim arcu eu ullamcorper. Vestibulum egestas ligula sit amet enim vestibulum non eleifend nibh interdum. Cras id eros augue. Aenean quis dolor felis, ac fermentum velit. Phasellus facilisis eleifend laoreet. Etiam feugiat pharetra varius. Aenean sed mi nec sapien eleifend condimentum vitae vitae purus. Etiam cursus lectus ac eros pharetra non egestas nulla commodo. Morbi bibendum risus eu metus semper sit amet pulvinar nulla tempus. Maecenas ac felis ante, vitae laoreet felis. Morbi posuere, tortor vitae vulputate porttitor, lectus nibh faucibus dui, eu cursus velit mauris ullamcorper sem. Duis pretium ultrices tellus, at molestie lacus auctor vitae.
  236.      </p>
  237.     </section>
  238.     <section id="lipsum8">
  239.      <p>
  240.       Donec et sollicitudin odio. Sed erat sem, suscipit nec elementum lacinia, vehicula in turpis. Nulla a dapibus sapien. Proin a neque a nisl fermentum condimentum eu eget turpis. Morbi tincidunt nunc a velit aliquet a auctor augue vehicula. Morbi at odio massa, vel porttitor diam. Praesent nec sodales elit. Curabitur id mi massa. Nunc sed dignissim justo. Vestibulum scelerisque congue purus, at bibendum quam lacinia sodales. Ut porta ultrices justo at tempor. Quisque et elementum ante. Curabitur ut risus elit, vel tincidunt tellus. In sollicitudin, nisl eu consequat venenatis, sem dolor dictum dui, quis auctor velit sapien a diam. Maecenas lobortis, nisi at feugiat volutpat, nulla diam semper eros, ac ornare nibh velit sed erat. Suspendisse a bibendum nisl.
  241.      </p>
  242.      <p>
  243.       Fusce quis placerat sem. Praesent nibh diam, vulputate vitae tincidunt feugiat, dapibus at ipsum. Curabitur varius, lectus sit amet tincidunt gravida, velit erat aliquet purus, et congue eros ligula sagittis mauris. Vivamus sagittis odio eu velit sodales vehicula. Pellentesque sit amet odio nec nulla rhoncus euismod. Quisque eget placerat augue. In ipsum turpis, adipiscing a congue ut, tincidunt pharetra sapien. Ut nulla magna, auctor vel egestas lobortis, posuere a tortor. Aenean semper eros vitae arcu egestas et auctor tellus placerat. Suspendisse volutpat ligula quis nibh suscipit a venenatis lacus blandit. Donec eu arcu mi. Quisque ut nibh nec orci sagittis suscipit.
  244.      </p>
  245.      <p>
  246.       In congue facilisis euismod. Sed pharetra justo in elit semper quis scelerisque nibh dignissim. Proin gravida quam eu felis hendrerit congue. Maecenas eget mi eget nisi lacinia faucibus non sit amet ante. Nunc sodales risus ac enim rutrum placerat. Nam feugiat dolor ante, faucibus aliquet leo. Cras hendrerit turpis vitae libero vulputate posuere suscipit sit amet quam. Vestibulum vel nunc nulla.
  247.      </p>
  248.      <p>
  249.       Pellentesque malesuada ante ut leo imperdiet sit amet mattis lorem vestibulum. Curabitur magna justo, tincidunt non blandit ac, porta at sapien. Nulla eget sem sem. Aenean nec lectus leo, quis consequat tortor. In lacus enim, molestie id lobortis eu, dapibus nec justo. Duis consectetur risus vel enim aliquam elementum. Pellentesque mi lorem, consectetur id pharetra a, venenatis eu massa. Etiam rutrum volutpat rhoncus. Pellentesque commodo consectetur libero hendrerit feugiat. Aliquam erat volutpat. Quisque et tempus dolor.
  250.      </p>
  251.      <p>
  252.       Integer lacinia sem id sapien ultrices pretium. Praesent vel dui vitae lorem suscipit egestas. Ut auctor, enim eu molestie malesuada, augue magna porttitor neque, id euismod est sem sit amet dui. Donec quis justo nunc. Suspendisse diam ligula, tincidunt commodo posuere quis, dapibus quis arcu. Suspendisse ut purus urna, non consequat tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consequat sapien non est iaculis ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien enim, egestas sed lacinia sit amet, blandit vitae quam. Nam ac est nisi, ut mollis diam.
  253.      </p>
  254.      <p>
  255.       Aenean vitae pharetra risus. Sed lacus tellus, mollis eu commodo sit amet, luctus at risus. Quisque adipiscing egestas dolor et semper. Etiam ut nibh adipiscing sapien facilisis laoreet. Sed sit amet libero diam. In eu orci in orci ornare facilisis. In aliquam cursus enim, ac convallis est ultricies eget. Integer vel lacus lacus. Aenean tellus mauris, iaculis in faucibus sit amet, adipiscing in dolor. Nullam at enim vel sapien tempor pretium id quis nibh. In venenatis, ante et vehicula posuere, leo odio luctus ante, ac accumsan diam leo ac lacus.
  256.      </p>
  257.      <p>
  258.       Praesent in diam sed eros posuere bibendum. Integer bibendum, metus ut consectetur auctor, felis nisi faucibus eros, porta pretium urna ante eu magna. Nullam porttitor lectus non risus pretium commodo. Donec tempor aliquam ligula, sagittis rutrum neque varius ut. Quisque ornare consequat velit. Vestibulum vulputate, lacus id auctor facilisis, odio tellus aliquet mi, eget fermentum nisi massa at dolor. Ut et augue mi, vitae consequat diam. Donec magna ante, congue eget lobortis et, gravida sed ante. Aliquam facilisis, metus nec egestas ultricies, mauris sapien auctor enim, a facilisis massa nisi vitae justo. In nec leo lorem, quis egestas lorem.
  259.      </p>
  260.     </section>
  261.     <section id="lipsum9">
  262.      <p>
  263.       Nam id tortor odio. Curabitur scelerisque sodales tortor porttitor luctus. Mauris sodales velit ut ligula dapibus vitae varius mi accumsan. Sed malesuada, sapien ut interdum convallis, lorem turpis viverra turpis, vel ultrices magna lectus vitae neque. Sed vitae diam ligula. Nam sed lorem enim, nec molestie nibh. Curabitur tristique luctus faucibus. Suspendisse potenti. Etiam vel adipiscing sem. Vestibulum velit velit, sollicitudin quis lobortis a, suscipit et odio. Quisque at dictum nulla. Maecenas massa mauris, venenatis sed pulvinar non, pretium eu elit. Sed fermentum diam vitae lorem fringilla vestibulum. Etiam nec leo nec justo hendrerit scelerisque. Vivamus eu congue leo. Etiam viverra lobortis nibh, eu aliquam nibh tincidunt at.
  264.      </p>
  265.      <p>
  266.       Etiam lobortis lorem et enim pellentesque dapibus. Proin id neque non nibh ultricies imperdiet. Aenean aliquet ligula ac quam dapibus eget tristique felis eleifend. Mauris consectetur purus eget ipsum rhoncus congue. Integer cursus, eros tincidunt interdum varius, lorem enim bibendum eros, ut semper lectus nisl at enim. Curabitur non risus leo. Fusce accumsan dapibus tortor a commodo. In mauris neque, iaculis sit amet tristique sit amet, varius nec neque. Sed consectetur ultricies dolor, at porta quam pellentesque pharetra. Pellentesque eget risus urna, ut tristique turpis. Donec pellentesque, dui non venenatis volutpat, dui est imperdiet lacus, et viverra dui neque pellentesque mi. Integer pretium, diam non ultricies auctor, urna nibh hendrerit massa, non imperdiet turpis leo condimentum erat. Donec elementum, dolor vel dignissim blandit, augue lectus venenatis dui, ut euismod purus felis id velit. Phasellus nunc tortor, cursus et adipiscing eu, consequat vitae lacus. Integer urna neque, cursus in aliquam id, volutpat id nibh.
  267.      </p>
  268.      <p>
  269.       Pellentesque libero nisi, egestas quis ultrices eget, scelerisque at mauris. Praesent massa metus, convallis id laoreet at, rhoncus nec eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vel nibh sit amet mauris vestibulum pretium. Quisque elit metus, gravida vitae aliquet eget, tempor nec eros. Aliquam vel cursus dui. Praesent hendrerit consectetur lacus non aliquet.
  270.      </p>
  271.      <p>
  272.       Pellentesque lacinia placerat elit, nec eleifend purus pharetra id. Sed diam velit, vulputate at iaculis ornare, aliquam quis est. Curabitur urna tortor, egestas quis accumsan id, blandit ac dui. Integer hendrerit rhoncus nibh, a egestas purus facilisis sed. Sed laoreet sem in arcu dictum blandit. Nulla hendrerit metus et velit pellentesque faucibus. Praesent malesuada, nulla at euismod tristique, sem lorem tristique purus, quis convallis nisi lorem in orci.
  273.      </p>
  274.      <p>
  275.       Donec metus diam, mollis nec sodales quis, scelerisque quis elit. Aliquam ac nibh quis libero ultricies tempus vitae id nisi. Nunc a mollis ligula. Maecenas consectetur nulla eget orci suscipit pellentesque. Proin enim nisl, venenatis non consectetur ut, lacinia tincidunt felis. Sed porta euismod viverra. Donec a suscipit nibh. Nullam semper, arcu quis consequat vulputate, lacus mi tincidunt velit, in laoreet elit sapien sed nibh.
  276.      </p>
  277.      <p>
  278.       Ut metus orci, dapibus ornare vestibulum non, ultricies sit amet enim. Aliquam gravida facilisis orci a mattis. Nunc vitae laoreet mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget eros ipsum, a luctus sapien. Sed vulputate cursus laoreet. Pellentesque sem dolor, consectetur eget feugiat eget, vulputate eget sem. Duis in porta libero. Curabitur dapibus tempus massa a sodales. Aliquam erat volutpat. Pellentesque at ligula pellentesque est hendrerit semper.
  279.      </p>
  280.      <p>
  281.       Etiam ac tellus orci, vel scelerisque massa. Donec egestas blandit consectetur. Vivamus malesuada tristique lacus vitae condimentum. Etiam a ipsum ante, lobortis condimentum elit. Curabitur mollis eros cursus nulla accumsan vehicula. Morbi urna odio, consectetur vitae viverra nec, sollicitudin vel elit. Mauris hendrerit lectus ac sem cursus nec cursus nibh tempus. Nam vel luctus mi.
  282.      </p>
  283.      <p>
  284.       Quisque et nulla eros, ac vulputate tellus. Pellentesque pulvinar enim id quam porta blandit nec in sapien. Sed mollis risus quis sapien euismod auctor. Donec nec ante purus. Mauris odio turpis, tincidunt sit amet placerat sed, sagittis quis lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam justo urna, convallis vel condimentum vel, suscipit et eros. Ut ac sapien eu quam congue vulputate. Donec pellentesque, velit in fringilla posuere, dolor diam lobortis nisl, in interdum dui urna semper urna. Cras consectetur accumsan congue. Aenean sollicitudin mollis ante facilisis hendrerit.
  285.      </p>
  286.     </section>
  287.  
  288.    </div>
  289.  
  290.   </div>
  291.  
  292.   <hr>
  293.  
  294.   <footer>
  295.    <p>
  296.     &copy; Company 2012
  297.    </p>
  298.   </footer>
  299.  
  300.  </div>
  301.  <!-- /container -->
  302.  
  303.  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
  304.  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.js"><\/script>')</script>
  305.  
  306.  <script src="js/vendor/bootstrap.customize.js"></script>
  307.  
  308.  <script src="js/main.js"></script>
  309. </body>
  310. </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!