Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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.

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

              
                <header class="pageHeader">
  <h1>Boxes</h1>
</header>

<main class="boxes">
  <section class="box box1">
    <h1>box1</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium, officiis?</p>
  </section>
  <section class="box box2">
    <h1>box2</h1>
    <p>Totam asperiores quas dolor quia iusto. Repudiandae corporis numquam dignissimos.</p>
  </section>
  <section class="box box3">
    <h1>box3</h1>
    <p>Quae mollitia laboriosam laborum? Error adipisci sequi magni odio quod.</p>
  </section>
  <section class="box box4">
    <h1>box4</h1>
    <p>Esse necessitatibus ut repellendus excepturi nulla laudantium, dicta ipsam laborum?</p>
  </section>
  <section class="box box5">
    <h1>box5</h1>
    <p>Optio incidunt vel quidem dolorum magni qui commodi explicabo inventore!</p>
  </section>
  <section class="box box6">
    <h1>box6</h1>
    <div class="intro">
      <img src="https://picsum.photos/150" alt="random dummy image">
      <img src="https://picsum.photos/150" alt="random dummy image">
      <p>Minima ipsam tenetur placeat explicabo distinctio ratione fugit! Vero, minima!</p>
    </div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae, debitis.</p>
  </section>
  <section class="box box7">
    <h1>box7</h1>
    <p>Eius, soluta optio cumque iste in enim sequi assumenda vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, rerum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse ipsa laborum ut aliquam totam numquam nobis rem animi consectetur eius!</p>
  </section>
  <section class="box box8">
    <h1>box8</h1>
    <p>Ipsum earum, iusto officia tempore temporibus cum fugiat officiis perspiciatis.</p>
  </section>
  <section class="box box9">
    <h1>box9</h1>
    
  </section>
  <section class="box box10">
    <h1>box10</h1>
    <div class="intro">
      <img src="https://placeimg.com/150/150/any" alt="random dummy image">
      <p>Incidunt minus laboriosam expedita doloribus cumque obcaecati ratione esse. Ab.</p>
      </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut? </p>
  </section>
</main>
<aside class="sidebar">
  <h2>aside</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae distinctio laboriosam impedit eius velit repudiandae.  </p>
</aside>

<footer>
  <h2>Footer</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laborum similique eaque distinctio vero veritatis.</p>
</footer>
              
            
!

CSS

              
                /* Float images in the intros */
.intro img{
  float: left; 
  margin: 0 1rem 1rem 0;
}

.box{
  outline: 1px solid black;
  clear: both;
  overflow: auto;
}

/* GRID LAYOUT */
.boxes{
  display: grid;
  grid-template-columns: 175px 2fr 1fr;
  grid-template-columns: repeat(3, 1fr);
/*   special responsive columns (from una kravets 1 line layouts) */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 1rem;
}

body{
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  body{
    grid-template-columns: 1fr 175px;
    grid-gap: 1rem;
  }
  .pageHeader{
    grid-column:1/3;
    grid-column: span 3;
    grid-column: 1/-1; /* span all columns */
  }
}/* end (min-width: 768px) */

/* flexbox styling */
.box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
/*   justify-content: center;
  align-items: center; */
}



/* =====================================================
   GENERAL STYLING
   makes boxes orange and changes default font
   not necessary for teh layout, just makes it look nicer
   ===================================================== */

/* General Typography */
body{
  font-family: sans-serif;
 }
h1{
  font-size: 3rem;
}
p{
  font-size:1.5rem;
}

/*basic color to see box */
.box{
  background-color: orange;
  padding: 1rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console