123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="row">
      <div class="small-3 columns" data-sticky-container>
      <div class="sticky" data-sticky data-anchor="magex1">
        <aside>
          <ul class="menu vertical" data-magellan>
              <li><a href="#linkmag1">Chapitre 1</a></li>
              <li><a href="#linkmag2">Chapitre 2</a></li>
              <li><a href="#linkmag3">Chapitre 3</a></li>
              <li><a href="#linkmag4">Chapitre 4</a></li>
              <li><a href="#linkmag5">Chapitre 5</a></li>
              <li><a href="#linkmag6">Chapitre 6</a></li>
          </ul>
        </aside>
      </div>
    </div>
    <div id="magex1" class="small-9 columns">
        <section id="linkmag1" data-magellan-target="linkmag1">
            <h1>Chapitre 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam amet autem blanditiis consectetur delectus deleniti dignissimos distinctio ea eius enim, esse hic impedit in iste magni minus necessitatibus neque nostrum pariatur provident quidem reiciendis ullam ut vel voluptate voluptatum. Harum impedit nam odit porro tempore? Adipisci aperiam autem dolore enim eum eveniet in incidunt ipsa neque obcaecati quisquam reprehenderit, sint tempora tempore temporibus voluptas voluptates. Asperiores commodi facere iusto molestiae necessitatibus numquam placeat possimus quibusdam quod rerum! Ad alias aliquam animi commodi deserunt distinctio ea earum est excepturi facilis, fugiat fugit illo illum impedit minima, odit pariatur, reprehenderit similique totam ullam voluptas voluptates voluptatum! Adipisci alias aperiam atque autem debitis dicta dolore ea eius eos error facere harum id inventore iure maxime, natus non nulla optio perferendis provident quo quos ratione repellendus saepe suscipit tempora vel veniam. Consequatur culpa cupiditate earum expedita iusto perspiciatis placeat quam recusandae. Ab aliquam consequatur consequuntur delectus esse facere fugit illum, impedit magnam nisi quibusdam quis quo repellat repellendus reprehenderit sed sint sunt unde voluptatibus voluptatum? Earum et expedita, iure odit quisquam similique! Eveniet excepturi facere, fugit in labore officia perspiciatis repellat totam! Aspernatur commodi consequuntur dolorum facere fugiat hic libero magni, porro recusandae!</p>
        </section>
        <section id="linkmag2" data-magellan-target="linkmag2">
            <h1>Chapitre 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque expedita ipsam iste iure laudantium similique unde ut! Esse est impedit iste laudantium, minus neque nulla odit provident, quas quasi suscipit totam vel velit? Ad alias amet beatae dolorum ducimus, eaque facere impedit ipsam natus obcaecati odit, quisquam quo ratione, repellat sint veniam veritatis. Laboriosam magni placeat praesentium quam voluptatem? Adipisci deserunt dolores exercitationem facilis, iure laborum nihil obcaecati optio quasi quos! Architecto aspernatur autem beatae dolores expedita harum ipsam, iste laboriosam minima nam, nesciunt nobis non officia porro quas temporibus veniam? Adipisci amet asperiores aspernatur ea pariatur rem rerum saepe sequi tempora veniam. Architecto asperiores, consectetur consequatur delectus deleniti distinctio dolorum, enim eos fugiat id ipsam itaque laboriosam libero maiores maxime minima molestiae non nulla officia perspiciatis porro qui quisquam quod ratione rem sit veritatis voluptatem? Accusantium ad aliquam distinctio dolorum earum excepturi facilis fugit, illo inventore iusto labore, laboriosam minima nostrum perferendis quos repudiandae saepe soluta totam vitae voluptas! Amet assumenda consectetur culpa non officiis qui! Accusantium aliquam at autem cumque dicta, ducimus iure magnam magni molestias nam, nemo nesciunt praesentium quod temporibus veniam. Commodi consectetur cupiditate earum fugiat id nobis nulla obcaecati quae, rem temporibus ullam ut veritatis?</p>
        </section>
        <section id="linkmag3" data-magellan-target="linkmag3">
            <h1>Chapitre 3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consectetur eius excepturi inventore iusto nemo neque sapiente voluptates voluptatibus voluptatum. Maxime sequi sit ut vel. Asperiores beatae corporis cumque debitis esse exercitationem expedita explicabo in inventore iure laboriosam, modi molestiae obcaecati odit praesentium recusandae reiciendis sapiente, sunt voluptas voluptatum. Dolores eius eum facere fugit? Ab debitis excepturi expedita magnam nostrum odio quo! Accusamus alias aliquam, aliquid animi blanditiis consequuntur dolor ea eaque earum eligendi error et ex exercitationem fuga in ipsam itaque laborum libero maxime molestiae mollitia natus nemo neque nisi nulla perferendis, porro quae qui quos recusandae reiciendis repellat, sequi suscipit tenetur ullam veritatis vero? Accusantium, architecto beatae consequatur consequuntur cumque deserunt dicta doloribus eaque exercitationem expedita facilis laudantium minima necessitatibus neque nesciunt non perferendis reprehenderit rerum suscipit voluptatem! Adipisci aliquam distinctio maiores omnis similique tenetur ullam voluptate. Aperiam asperiores aut autem consequatur dolor, dolores ea eligendi explicabo facere facilis illo incidunt laborum minima nam nesciunt quae quibusdam reiciendis rem repellendus rerum sequi ullam vel vitae? A alias aspernatur, assumenda consectetur consequuntur dolorem, dolorum ducimus et facilis fugiat harum in itaque laboriosam magnam minus natus obcaecati officia porro quis ratione repellendus tempora velit! Animi consequuntur expedita sed sit voluptate.</p>
        </section>
        <section id="linkmag4" data-magellan-target="linkmag4">
            <h1>Chapitre 4</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cupiditate delectus deserunt dolor dolores, et, fuga in itaque iusto laboriosam magni nam necessitatibus neque nulla perspiciatis provident saepe sapiente similique tempore voluptatum? Aliquid cum ducimus, ex facilis ipsam iure, labore, natus nemo nihil officiis quos repellat veniam! A consectetur, culpa dolore doloremque ea eveniet, facilis fugit illo incidunt maxime minus non quibusdam repudiandae sequi, tenetur vel voluptate voluptatibus? A accusamus consectetur deleniti deserunt dolor dolore ea earum esse et ex impedit incidunt maxime modi, molestiae, neque odio odit perspiciatis quae quam quasi reiciendis reprehenderit saepe sint, sit vel vero voluptatem. Accusamus ad earum eligendi eos error est natus quia repellat sint unde. Ducimus error molestiae neque nostrum repellendus, voluptates voluptatum. Amet at beatae, cupiditate ipsam labore non obcaecati quos ratione sunt tempore ut veritatis, voluptas voluptatum? Ab accusantium, animi blanditiis dicta distinctio earum eos excepturi expedita explicabo facere fuga libero nisi nulla pariatur provident quisquam saepe sit soluta suscipit temporibus veniam vitae voluptates! Assumenda, at cum exercitationem expedita facere laudantium modi numquam perspiciatis porro quidem, rerum sit? A at blanditiis dignissimos et ipsam labore, modi quae tempore veniam voluptatem! Corporis dolorem magni maxime nemo officia perferendis quas reiciendis sed veritatis.</p>
        </section>
        <section id="linkmag5" data-magellan-target="linkmag5">
            <h1>Chapitre 5</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda autem blanditiis commodi consequatur consequuntur corporis cum cumque dignissimos eaque eius est, eveniet exercitationem explicabo illo impedit inventore ipsum iste iure minima natus necessitatibus numquam obcaecati odio perferendis, possimus quaerat qui quos rem repudiandae sapiente sed sint suscipit velit veniam voluptas voluptate! Architecto aut delectus dolorem eveniet illum ipsum magni nesciunt quo veritatis voluptas! Aliquid asperiores aut cupiditate distinctio esse explicabo nam perspiciatis reiciendis velit! Est ex, totam. Corporis dicta eaque enim, esse fugiat illo libero perspiciatis quaerat quos suscipit ut veritatis! Alias aliquam amet aperiam aspernatur assumenda at blanditiis consequuntur, cumque debitis dolor eaque earum eius harum illo impedit inventore ipsa iste maxime, modi non obcaecati provident quae quaerat quisquam ratione reprehenderit rerum sint totam ullam vel velit veritatis vitae voluptates! Alias amet assumenda aut beatae blanditiis culpa cumque deserunt dignissimos doloremque doloribus dolorum eaque ex exercitationem facere impedit iure magni maxime minima molestias nesciunt nisi nobis non nostrum obcaecati officiis pariatur quam quidem quod quos rem reprehenderit, rerum similique tempore vel velit voluptate voluptatem! Beatae eveniet fugit illum nobis optio quae ratione. Beatae dolores fugit laborum libero, non placeat quos tempore veniam! Expedita, rerum ullam. Accusantium, quod, quos!</p>
        </section>
        <section id="linkmag6" data-magellan-target="linkmag6">
            <h1>Chapitre 6</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut earum vero vitae? Atque distinctio dolores error ratione sed! Architecto consequuntur cum delectus dicta dolor dolorem doloribus ducimus earum error et eveniet ex facilis fuga hic id in incidunt itaque labore laudantium libero maiores molestiae molestias mollitia necessitatibus neque non officia officiis perferendis perspiciatis praesentium provident, quia quidem quos, ratione repellat temporibus voluptatem. Culpa dignissimos eaque error nemo quam. Adipisci alias aliquam blanditiis culpa cum debitis dolor eligendi eos esse ipsam laborum, laudantium magnam, maiores nobis non officiis, perspiciatis placeat provident quae quis rerum tempora veniam. Ad alias architecto cupiditate ea eius eum explicabo, facilis fugiat harum minus nam nesciunt porro provident quaerat, quam ratione reiciendis veniam. Accusantium blanditiis doloremque laudantium maiores non repellat repudiandae saepe similique, temporibus! Ab asperiores illum laudantium modi natus nisi placeat sequi similique ut voluptatem! Aliquam, cum dignissimos est id libero maxime, nihil non quaerat recusandae repellendus, saepe temporibus vitae voluptate. Doloribus dolorum ex odio rerum totam! Aliquid animi aperiam architecto, assumenda aut, cum cupiditate deleniti deserunt dicta earum eius enim error eum inventore laborum magnam minus molestiae placeat quae quas quia quibusdam recusandae reiciendis sequi temporibus voluptas voluptate voluptatem. Commodi distinctio facere in placeat totam.</p>
        </section>
      <div class="empty-block"></div>
    </div>
</div>
            
          
!
            
              .active {
  background: #333;
  color: #FE49FF !important;
}
.empty-block {
  height: 4000px;
  background: transparent;
}
            
          
!
            
              $(document).foundation();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console