css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <main>
  <header class="main-header">
    <hgroup>
      <h1>Lorem ipsum dolor sit amet.</h1>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, minima.</h5>
    </hgroup>
  </header>
  <section class="main-section">
  <article class="main-article">
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quia.
    </h2>
    <figure>
      <img src="https://source.unsplash.com/category/buildings/" alt="title" />
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet assumenda ab perspiciatis ea perferendis possimus deserunt quasi, alias maiores architecto quis molestiae, earum dignissimos. Autem minus sit eum repudiandae eaque nisi quam esse, in? Velit eos minus aspernatur, vel fugit quod, asperiores adipisci cumque molestiae deleniti, laborum a voluptatum error! Esse natus quam, eos modi voluptas impedit sed deleniti, saepe nemo, inventore laborum distinctio rem assumenda! Iusto, nulla. Est, repudiandae fugit quibusdam ut, magnam in aspernatur ab voluptas illo odit vel natus suscipit minima porro consectetur sed. Accusantium reprehenderit, asperiores omnis facere provident consequuntur illum cum, debitis possimus sit non.</p>
    <p>Harum inventore vitae omnis nostrum consequatur ratione itaque quaerat, recusandae fugit. Consectetur dolor consequatur dolorum quia ut quasi et alias, cum corporis eos, exercitationem, veniam dolorem nemo sint a distinctio impedit asperiores nam. Veritatis impedit, sint ipsam sunt asperiores inventore esse, illo accusantium pariatur velit expedita. Iusto praesentium facilis, ipsum, porro commodi iure velit, dolor eum, enim aspernatur amet. Quidem harum doloremque officiis, a vitae accusamus incidunt illo quisquam deleniti similique! Aperiam eligendi nostrum quam architecto commodi fugiat officia vitae tempore quae rem eaque sequi repellat, magni repudiandae recusandae. Explicabo rerum sit laboriosam modi, suscipit ut eius minus perferendis! Delectus.</p>
    <p>Nihil ipsa voluptatibus quaerat consequatur vero minima, eveniet eius ea reiciendis enim voluptas fuga quam ipsum, cupiditate dolore amet harum ex, voluptates dolor. Fugit corporis numquam necessitatibus eaque aut molestiae quia obcaecati repellendus libero esse impedit optio tempora aliquid placeat veritatis explicabo atque perferendis distinctio provident sunt accusamus, deleniti tenetur ea rerum blanditiis. Odit illum quam deserunt nihil ipsam placeat, ut consequatur possimus accusamus voluptates quas. Nam non, autem libero mollitia nisi a labore dolor voluptatum quos corporis maiores excepturi, vero commodi exercitationem expedita molestiae nemo inventore veritatis rem fugiat porro officia quis iusto. Nihil atque reprehenderit eos quo, laudantium.</p>
    <p>Dolorem in consectetur vero itaque eum corporis consequatur, iure natus at impedit iusto delectus, saepe, et officiis ea neque, cumque reprehenderit quis autem corrupti? Magnam facere rem tempore eligendi, quisquam repellat amet perspiciatis a eos consectetur suscipit iusto, doloremque dicta. Libero a accusantium magnam cupiditate, nostrum culpa? Porro repellendus minima, accusantium alias eligendi aperiam, sapiente odit dolor quae totam, optio quidem sit. Porro, in, at? Nemo nulla laboriosam nihil sit amet sunt minus voluptas! Vitae itaque autem unde consequatur reprehenderit, nulla, aliquam porro iusto ullam sed fugiat voluptatem placeat nesciunt nihil tenetur mollitia quia adipisci facilis soluta necessitatibus! Unde, adipisci?</p>
    <p>Sit, beatae. Quibusdam a neque repudiandae adipisci iste corporis sed ipsam amet deleniti molestias doloribus consequuntur repellat unde maxime, praesentium quis consectetur quam ab quas fugit cupiditate placeat porro dolore earum veniam. Adipisci nulla voluptatum quis architecto sit expedita facere obcaecati velit sapiente animi deleniti itaque consequatur neque dicta dolorem similique provident voluptate tenetur, deserunt atque quia minus. Odit laudantium quam temporibus, aliquam culpa harum et error iste eos. Repellendus eaque, sit voluptatum officia voluptatibus doloribus ex architecto, quasi tenetur, quos cupiditate at enim ad molestias repellat voluptate soluta tempora magnam culpa qui quam in incidunt explicabo. Sapiente, nemo, voluptates.</p>
    <p>Inventore sapiente temporibus, dolorem asperiores aperiam tenetur eos mollitia qui illum, molestias deleniti sint porro impedit consequatur possimus recusandae, nemo praesentium voluptatem maiores dolorum voluptas reprehenderit. Est similique natus aperiam ratione repellendus quibusdam minus incidunt fugiat velit inventore soluta eos aspernatur excepturi deleniti illo, quos, tempore odio, nemo sed a sint vero! Nihil culpa id impedit fuga velit quod officia deserunt ipsam delectus, voluptate quis saepe pariatur molestias odio optio, quaerat maxime possimus unde laudantium, voluptatem labore porro! Soluta enim est necessitatibus vel, nam minus, possimus eligendi quae modi laboriosam maxime error sapiente accusamus voluptate laudantium obcaecati cum alias labore.</p>
    <p>Repellendus assumenda, iure quas voluptatibus hic quis iusto molestiae atque quibusdam quisquam, totam sint. Aut neque quam est quod debitis voluptatum harum ea reiciendis blanditiis consequatur suscipit repudiandae iste, expedita maiores quasi odit assumenda quos, eligendi, eum. Ducimus enim accusantium cumque ipsa qui autem? Explicabo quisquam, aliquam beatae. Natus nesciunt voluptates aspernatur sint accusamus molestiae, illum eum tempora iusto nemo cupiditate eius labore corporis cum saepe molestias, quaerat. Fugiat ut suscipit accusantium cupiditate molestias, corrupti ullam laudantium. Ipsum rem nemo, unde, labore blanditiis quis incidunt tempore enim, dolorem debitis repellat, veniam illum! Amet nulla, at voluptatibus deserunt atque blanditiis iure.</p>
    <p>Eius distinctio pariatur consectetur, fuga error ratione dolorum nulla dolore doloremque! Animi nihil iusto obcaecati maxime suscipit iure voluptas, totam, temporibus qui quibusdam quia magni quas, sit ratione error! Consequuntur maiores aliquid magni atque neque voluptates assumenda totam fugit porro ratione eum fugiat minus hic, similique iure ullam, perspiciatis veniam laudantium tempore quisquam. Similique soluta laudantium id, quia, laboriosam nihil consequuntur quas vel obcaecati facilis repellendus, distinctio consequatur unde nobis minima provident vitae dolorem molestiae quidem ex! Totam quo hic, modi sunt deserunt eaque vitae voluptate fugiat fuga aut saepe ad debitis velit soluta commodi magni nihil explicabo omnis excepturi.</p>
    <p>A perferendis est, commodi cum exercitationem, ullam consequuntur cupiditate asperiores aut quod quia illo aspernatur sequi esse ut quo, sed repudiandae doloremque. Nemo eius incidunt velit voluptatum non. Eveniet minus reprehenderit vel nam quas rem eaque voluptatem tempore, minima culpa ab neque ipsa veritatis non nulla ipsam harum debitis libero odit aut modi ducimus. Explicabo ipsam asperiores dolores laborum optio odit quisquam nulla reiciendis incidunt, similique sapiente provident temporibus ab recusandae, tempore doloribus. Beatae pariatur expedita quo impedit adipisci. Autem alias tempora iusto delectus, non obcaecati fugit corrupti explicabo, inventore, at debitis. Exercitationem, fugiat aperiam maiores culpa cumque? Fugit, perspiciatis!</p>
    <p>Quis, iusto tenetur! Maxime, alias. Omnis provident, quos quisquam cumque repellendus id aliquam laborum neque vero rerum inventore. Quas maiores numquam, ipsa id nesciunt quae at cumque quos consequuntur sapiente vitae voluptas provident cum omnis culpa officiis. Fugiat quos magnam, consequuntur, vitae quod tenetur ipsa veritatis mollitia ad omnis facilis alias asperiores minima eaque culpa nam nostrum quia suscipit enim recusandae ab adipisci nemo? Cupiditate, iste recusandae facilis porro est voluptatibus, necessitatibus atque dicta natus dolor, maxime dignissimos odit distinctio officiis magnam quisquam laborum aperiam ipsum modi nam provident hic officia. Veritatis deleniti nobis reprehenderit doloremque ipsa earum alias voluptatem!</p>
  </article>
  <aside class="main-aside">
    <h3>
      Lorem ipsum dolor sit amet.
    </h3>
    <nav>
      <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, aperiam!</a></li>
      <li><a href="#">Sed, harum, beatae. Quas vitae qui beatae quod, tenetur voluptates.</a></li>
      <li><a href="#">Quas officiis at quasi nisi maxime aliquid dignissimos, fugit quam.</a></li>
      <li><a href="#">Laudantium, numquam accusamus? Libero eius facilis, iusto veritatis praesentium odio.</a></li>
      <li><a href="#">Nulla consequuntur reprehenderit laudantium praesentium repellat! Perferendis fuga nostrum in.</a></li>
      <li><a href="#">Possimus assumenda itaque blanditiis deleniti quae, doloribus at, debitis odit.</a></li>
      <li><a href="#">Perspiciatis provident esse sint necessitatibus, vel molestiae corrupti. Perferendis, enim.</a></li>
      <li><a href="#">Ipsam modi, iste quidem quae expedita molestiae magnam corporis omnis!</a></li>
      <li><a href="#">Amet assumenda odit soluta, nobis aliquid impedit reiciendis voluptates consectetur.</a></li>
      <li><a href="#">Officiis veniam, placeat laudantium nostrum deserunt minus repellat perferendis expedita!</a></li>
    </nav>
  </aside>
  </section>
  <footer class="main-footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, odio?</p>
  </footer>
</main>
            
          
!
            
              html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

a {
  color: #2196f3;
}

main {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.main-section {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.main-article {
  flex:  1 1 40em;
  padding: 0 1rem;
}

.main-aside {
  flex:  1 1 20em;
  padding: 0 1rem;
  background: #eee;
}

.main-article figure {
  max-width: 20em;
  width: 100%;
  height: auto;
  float: left;
  padding: 0 1.5em 1em 0;
  margin: 0;
}

.main-article img {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

            
          
!
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.
Loading ..................

Console