cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quo, fugiat ipsa veritatis ipsum, numquam ut ducimus aut magni rerum provident similique, reiciendis excepturi possimus unde rem recusandae. Earum, illum.</p>
<p>Dicta quis error qui quibusdam nobis optio temporibus quaerat alias dolorum minus. Recusandae eaque aspernatur numquam quae dignissimos nihil voluptates, modi, facere harum veritatis fugiat aliquam dolor a odio id.</p>
<p>Placeat non hic sint magnam perferendis, perspiciatis modi sequi quas, tenetur velit esse id nesciunt similique? Veritatis mollitia perferendis commodi sed eum cum magni fugit ipsum. Deserunt nihil rem sunt.</p>
<p>Incidunt, sunt ratione, nobis ducimus numquam architecto aspernatur quae libero quasi laborum voluptatem, tenetur itaque alias, labore delectus. Temporibus excepturi, recusandae porro nesciunt dolorem tenetur id quae libero assumenda in?</p>
<p>Quas, hic non eligendi rem eum ipsum sunt quod aut minima, nulla tempore veniam sint maxime iure fuga tempora iusto asperiores, totam! Assumenda laborum explicabo optio, odit eos. Animi, sit.</p>
<p>Minus, molestias, esse! Repellendus et adipisci iure incidunt quibusdam error sunt, numquam sapiente distinctio dolores delectus dicta odio enim ut cupiditate id cum vel impedit. Animi et non, rerum earum.</p>
<p>Nulla eligendi amet excepturi ea ipsam! Suscipit maiores iste omnis accusantium in placeat quas perferendis corporis, id libero doloremque quidem nisi consectetur totam excepturi deserunt ipsam, autem cupiditate voluptates expedita?</p>
<p>Doloremque earum odit magni laudantium soluta facilis veniam voluptatem, assumenda placeat! Voluptates doloremque dolore ex qui repudiandae ad commodi, nesciunt error quaerat ipsam deserunt quasi itaque voluptatum. Porro, ullam magni!</p>
<p>Vitae autem, officiis, magnam, vero voluptates quaerat iusto odit qui distinctio hic, minus rerum amet tempora! Molestias rem, excepturi cupiditate eos consequuntur iure laboriosam modi veritatis voluptas necessitatibus, eligendi ipsum!</p>
<p>Nam quam eos voluptate quidem! Ipsum autem sapiente iure quaerat. Similique ex omnis distinctio consequuntur iusto unde excepturi pariatur recusandae voluptates necessitatibus explicabo beatae vero dolor, commodi suscipit non molestiae.</p>
<p>Similique ea commodi nemo, expedita soluta asperiores. Saepe porro non totam. A labore quod, minus excepturi consequatur natus molestias cupiditate dolorem distinctio. Sequi architecto, a cumque recusandae facilis. Cumque, optio?</p>
<p>Eum, ipsa explicabo corporis, iusto neque minima. Nisi distinctio quam eveniet reiciendis corrupti, nobis consequuntur, velit unde quos assumenda atque sunt nihil, facere aliquid tenetur architecto dolores magni. Quibusdam, ipsam!</p>
<p>Laborum eaque quisquam non. Incidunt reprehenderit inventore tempore voluptatum, voluptatibus nam voluptates repellat quis consectetur obcaecati natus vero, dicta nihil aspernatur nobis labore consequatur corporis illo enim aliquam ex rerum?</p>
<p>Autem, quisquam voluptatem rem tempora corporis. Delectus eius adipisci officia facilis iste ipsam recusandae ut sunt inventore alias aliquid corporis possimus quaerat facere, cum quo molestias consectetur voluptate, sequi at.</p>
<p>Maxime nesciunt qui eos. Commodi facere, sed. Nemo repellat quidem repellendus maxime quia, cupiditate assumenda ipsam pariatur, sapiente optio corporis saepe totam fuga ab exercitationem iure voluptatibus numquam voluptates recusandae.</p>
<p>Cupiditate, voluptates, eveniet quaerat ut veritatis iste reiciendis eos, fugiat aliquam ducimus doloremque iusto nulla? Dolorum aspernatur eaque veniam, perspiciatis cum ad doloribus molestiae, porro, sit fuga officiis, ducimus id.</p>
<p>Ipsa molestiae fuga quisquam, dolore voluptatem numquam vel nisi aspernatur deleniti unde voluptates aliquid ducimus adipisci incidunt alias commodi consectetur, error, eos qui beatae soluta. Ea, beatae blanditiis similique non!</p>
<p>Delectus impedit distinctio voluptatum voluptatibus maiores quidem sed assumenda illum aliquid deserunt fugit, labore in dignissimos placeat deleniti quo velit est aliquam incidunt eos natus, cum veniam explicabo. Corporis, odit.</p>
<p>Mollitia consequatur voluptate quo aut ea, nulla veritatis. A repudiandae qui tempore magni ipsum tenetur iste modi, eos, aliquid maiores numquam consectetur in tempora, ut placeat! Inventore neque, optio ratione?</p>
<p>Mollitia ad, accusantium nam nihil magnam, perferendis non quia dolorum! Nulla culpa eveniet quae facere doloremque enim commodi in vitae sequi rem nihil cupiditate at, suscipit quas dolorum incidunt! Consequatur.</p>
<div class="box"></div>
            
          
!
            
              body {
  width: 120%;
  background-color: khaki;
}

.box {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 64px;
  height: 64px;
  background-color: lightgreen;
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console