Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
  <header style="--color-paper: hotpink;">
    <nav>
      <h1>Alex's Very Professional Blog</h1>
    </nav>
  </header>
  <main>
    <article>
      <h2>Article Title 1</h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe hic perspiciatis rem laborum, officiis quia natus fugit quam quaerat ipsum provident eaque totam officia culpa aperiam dicta illo dolore nostrum?</p>
      <a href="#">Read More...</a>
      <ul>
        <li><a href="#" data-tag="lorem">#Lorem</a></li>
      </ul>
    </article>
    <article>
      <h2>Article Title 2</h2>
      <p>Quam atque beatae maiores sit quae tempora omnis, consequuntur ratione repudiandae labore, exercitationem consectetur sequi porro, hic sed? Officiis commodi corrupti nam, voluptates ipsa voluptas eveniet eaque maiores molestias dicta!</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 3</h2>
      <p>Pariatur sunt, excepturi rem, quis reiciendis delectus necessitatibus explicabo accusantium ab expedita ea quas corrupti eum laborum. Possimus id officia optio eum, accusantium tempora nam velit incidunt ipsam, nulla consequatur.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 4</h2>
      <p>Ullam, consequuntur nam. Labore soluta libero molestias fugit exercitationem nulla dolorem incidunt consectetur perferendis est ipsa iusto, adipisci similique tempore quo fugiat, aliquid ducimus animi magni! Quisquam saepe mollitia quaerat.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 5</h2>
      <p>Ut fuga voluptate molestiae asperiores explicabo tempore magni, et eum laboriosam nihil velit unde maiores enim. Vel nobis, ipsam magnam animi totam, obcaecati explicabo accusamus dolorem, modi tempore possimus labore!</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 6</h2>
      <p>Facilis veritatis harum laudantium quo est aliquid provident minima possimus tenetur delectus consequatur exercitationem, deserunt neque natus, quos obcaecati earum aspernatur. At magnam accusantium rem tenetur asperiores iure et est.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 7</h2>
      <p>Rem laborum ad perferendis suscipit tempore vitae distinctio neque cupiditate sunt esse vero aperiam asperiores qui quae porro ipsum, recusandae necessitatibus temporibus totam voluptate reprehenderit ratione odio libero quos! Quos.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 8</h2>
      <p>Voluptates eveniet quis tenetur voluptatem molestiae, eius ab maiores quas a beatae aspernatur sint aliquam accusantium deleniti nisi recusandae asperiores laudantium ea qui. Rem nihil optio ipsa explicabo reiciendis reprehenderit!</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 9</h2>
      <p>Amet eum veritatis perferendis libero quia non, nulla ut ea deleniti omnis placeat pariatur adipisci velit sapiente cum quas laborum possimus quos atque magnam maiores nemo facere magni iste! Distinctio.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 10</h2>
      <p>Fuga velit quas optio quae odit quidem perspiciatis alias voluptatibus similique at quod beatae explicabo voluptates eaque, repudiandae earum saepe rem error. Quidem labore reprehenderit nostrum sint aut id eveniet?</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 11</h2>
      <p>Voluptates itaque repudiandae cumque! Ea at illum minima incidunt inventore adipisci delectus ipsum nulla accusamus est magnam tempora numquam aut sapiente magni, commodi asperiores voluptates eius harum quam cumque deleniti?</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 12</h2>
      <p>Id ipsa nesciunt ipsam. Reprehenderit, sequi architecto repudiandae dolore consequatur sit incidunt magni voluptate eveniet, numquam accusantium molestiae quo iusto illum! Sed, eius voluptatum. Voluptates unde numquam dolore officiis ducimus!</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 13</h2>
      <p>Perferendis sint illo, quo facilis officiis est, minus unde omnis, fuga impedit voluptates sequi exercitationem a ab corporis perspiciatis. Asperiores pariatur porro harum iusto dolorem eum autem nam amet nemo.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 14</h2>
      <p>Atque quos suscipit saepe quae sit deserunt illo assumenda perferendis odit expedita, adipisci animi ex ullam minus amet tempora maiores quam doloribus eius velit autem dolorum itaque harum cupiditate. Ut.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 15</h2>
      <p>Molestias, a! Similique voluptates earum aut omnis rerum libero ipsum asperiores ipsam eligendi placeat, dicta ipsa veritatis fugiat dolores nobis sit quae molestiae ea quam error necessitatibus. Expedita, temporibus excepturi.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 16</h2>
      <p>Error natus commodi soluta, expedita sit blanditiis doloribus cupiditate nisi eveniet sunt pariatur ab officiis, explicabo impedit ullam. Dolorem voluptates atque quis ab numquam consequuntur repudiandae asperiores dolor et debitis.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 17</h2>
      <p>Commodi, vero odit accusantium omnis cupiditate itaque, excepturi voluptates, soluta laborum nobis veritatis optio reiciendis eligendi repudiandae facere molestias officiis a praesentium. Dolor in veniam quae dignissimos, aliquid numquam quia?</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 18</h2>
      <p>In odit ab obcaecati saepe repellat ipsa fugit incidunt, ipsum itaque ducimus consectetur libero. Doloribus aperiam, nam facere illum debitis saepe in? Corrupti ducimus exercitationem maiores dolor. Ut, ipsam? Velit.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 19</h2>
      <p>Rerum, exercitationem, maxime quisquam consectetur laudantium illum expedita, architecto recusandae ipsa provident nulla id qui sunt accusamus illo delectus tempore! Inventore maiores voluptatum sed est, velit itaque soluta tenetur rem.</p>
      <a href="#">Read More...</a>
    </article>
    <article>
      <h2>Article Title 20</h2>
      <p>Aut quis est qui vero quia iure minima exercitationem animi ipsam, alias beatae odio eos dignissimos doloremque, asperiores deleniti nemo impedit ad minus aperiam magni eveniet. Numquam illum distinctio earum.</p>
      <a href="#">Read More...</a>
    </article>
  </main>
  <footer>
    <p>Alex's Blog</p>
    <p>Please like me.</p>
  </footer>
</div>
              
            
!

CSS

              
                /* Google Fonts import */
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400;1,700&family=Shantell+Sans:BNCE,INFM@97,100&display=swap");

:root {
  --font-defaults: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual,
    cursive;

  --color-paper: lightblue;
  --color-ink: #222;

  background-color: var(--color-paper);
  color: var(--color-ink);

  font-family: "Comic Neue", var(--font-defaults);
  font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Shantell Sans", var(--font-defaults);
  background-color: var(--color-paper);
  color: var(--color-ink);
}

@media screen and (min-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-areas:
      "side content"
      "footer footer";
    gap: 10px;
  }
}

header {
  grid-area: side;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
  background-color: pink;
}

article:has([data-tag="lorem"]) {
  border: 3px solid red;
}

article {
  padding-inline-start: 1em;
  padding-inline-end: 5em;
  padding-block-start: 2em;
  padding-block-end: 4em;
}

              
            
!

JS

              
                
              
            
!
999px

Console