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

              
                <main id="m">
  <div class="c">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
    </p>
    <!-- All right, finally getting to some important stuff. -->
    <section id="people">
      <!--
			Important to remember:
			In this pen, I'm only messing arund with the JavaScript side of things.
			You should remember to put a real link into the href attribute below so that the site will also work for users who have disabled JavaScript.
		 -->
      <a class="person" href="#">
        <h2>George Washington</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>John Hancock</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>Thomas Jefferson</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>Benjamin Franklin</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>John Adams</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>Patrick Henry</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>Alexander Hamilton</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>James Monroe</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
      <a class="person" href="#">
        <h2>James Madison</h2>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
          </p>
        </div>
      </a>
    </section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, tellus a adipiscing ullamcorper, lectus nisl auctor ipsum, vitae dapibus urna sem quis dui. In pharetra justo vel euismod vestibulum. Mauris vehicula vulputate justo congue luctus. Curabitur eget urna justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non ullamcorper massa. Quisque ultricies, massa vel aliquet tincidunt, quam arcu vestibulum leo, ac sodales elit eros sit amet massa. Nam bibendum purus enim, sed lacinia dui pellentesque quis. Proin aliquam ante non iaculis blandit. Nam luctus leo nec bibendum malesuada. Sed facilisis ligula sit amet vulputate hendrerit.
    </p>
  </div>
</main>
<section id="lightbox"></section>
              
            
!

CSS

              
                // Most of this first part is just to improve basic aestheitics so I don't burn my eyes out
body
{
  // Because TNR is annoying.
  font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight:300;
  line-height:1.625;
}

.c // Container
{
  width:95%;
  max-width:1500px;
  margin:0 auto;
}

h1
{
	font-size:3em;
  padding:1% 0;
}

p
{
  padding:1% 0;
}

// #people is the container for the .person boxes.
#people
{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:1% 2%;
}

// Each .person contains the name of a person and a biography of three paragraphs.
.person
{
  padding:2%;
  margin:2% 0;
  box-sizing:border-box;
  width:30%;
  color:#000;
  background:#ccc;
  text-decoration:none;
  
  h2
  {
    font-size:1.3em;
    text-align:center;
  }
  
  .bio
  {
    // Prevents an excess content from displaying.
    overflow:hidden;
    
    // Forces the overflow property
    max-height:9.5em;
  }
  
}

// The #lightbox. It's hidden by default, but I'll go through the styles one by one.
#lightbox
{
  // Hidden by default.
  display:none;
  
  // Extend the lightbox to fill the entire screen
  position:fixed;
  top:0; left:0;
  height:100%; width:100%;
  
  // Set a translucent background
  background:rgba( 0, 0, 0, 0.5 );
  
  // Any vertical (y-dimension) overflow will allow a scrollbar. This is critical.
  overflow-y:scroll;
  
  // Aesthetics
  &:hover
  {
    cursor:pointer;
  }
  
}

// Note that in the default HTML, there is no element with this ID. When a person is clicked on, the JavaScript will generate an element with this ID.
#lightbox-c
{
  // This removes the position:fixed environment set up by the #lightbox.
  position:static;
  
  // This positions the container inside of the lightbox.
  width:75%;
  max-width:1125px;
  margin:10% auto; // Centering
  padding:5%;
  
  // Aesthetics.
  background:#fff;
  box-shadow:0 0 35px #000;
}

              
            
!

JS

              
                $(document).ready(function() {
  
  // Storing selectors for later use.
  $body = $( 'body' );
  $lb = $( '#lightbox' );
  $persons = $( '.person' );
  
  // When any of the people are clicked...
  $persons.click(function() {
    
    // Store a selector
    $t = $( this );
    
    // The first thing we need to do is set the position of the body element to fixed. This prevents scrolling on the main document area.
    $body.css( 'position', 'fixed' );
    
    // Now, we need to scrape the HTML we need from the bio and store it to use later.
    // jQuery's .find() method essentially just adds onto the end of a previous selector.
    hText = $t.find( 'h2' ).text();
    bio = $t.find( '.bio' ).html();

    // Now that we have all the data we need, we can start building the lightbox content.
    // First, create the lightbox container in memory.
    $store = $( '<div id="lightbox-c"></div>' );
    
    // Now, append our header text to it.
    $store.append( '<h1>' + hText + '</h1>' );
    
    // Lastly, append our biography to it.
    $store.append( bio );
    
    // Now, we need to actually add the lightbox container to the page.
    $lb.append( $store );
    
    // And of course, we need to display it.
    $lb.fadeIn( 250 );

    return false; // prevent default
    
  }); // end click
  
  // Now, we need to remove the lightbox if someone wants to close it.
  // So, if someone clicks the lightbox...
  $lb.click(function() {
    
    // Allow the body to scroll again
    $body.css( 'position', 'initial' );
    
    // Fade out on the lightbox
    $lb.fadeOut( 250 );
    
    // And then remove the lightbox container from it.
    $lb.empty();
    
    return false; // prevent default
    
  }); // end click
    
}); // end ready
    
 
              
            
!
999px

Console