<div class="grid">
  <div class="pro-features">
    <h1>CodePen PRO Features</h1>
    <p>CodePen has many PRO features including these four!</p>
  </div>
  <div class="feature-privacy">
    <h2>Privacy</h2>
    <p>You can make as many <a href="https://codepen.io/pro/privacy/">Private</a> Pens, Private Posts, and Private Collections as you wish! Private <a href="https://codepen.io/pro/projects">Projects</a> are only limited by how many total Projects your plan has.</p>
  </div>
  <div class="feature-collab">
    <h2>Collab Mode</h2>
    <p><a href="https://blog.codepen.io/documentation/pro-features/collab-mode/">Collab Mode</a> allows more than one person to edit a Pen <em>at the same time</em>.</p>
  </div>
  <div class="feature-assets">
    <h2>Asset Hosting</h2>
    <p>You'll be able to <a href="https://blog.codepen.io/documentation/pro-features/asset-hosting/">upload files</a> directly to CodePen to use in anything  you build. Drag and drop to the Asset Manager and you'll get a URL to use. Edit your text assets at any time.</p>
  </div>
  <div class="feature-debug">
    <h2>Debug View</h2>
    <p><a href="https://blog.codepen.io/documentation/pro-features/live-view/">Live View</a> is a full-page version of your Pens or Projects that updates as you update your code. Similarly, <a href="https://blog.codepen.io/documentation/views/debug-view/">Debug View</a> is a full page view of your code, but has no CodePen wrapping iframe or other influence, so it's great for testing. With PRO you don't need to log in to use it.</p>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 
     200px  1fr  1fr;
  grid-template-areas:
    "pro    1    2"
    "pro    3    4";
  
  max-width: 1000px;
  margin: 0 auto;
}
.pro-features {
  grid-area: pro;
}

a {
  text-decoration-color: orange;
  text-decoration-style: double; 
  text-decoration-skip: none;
  color: inherit;
  font-weight: bold;
  
  display: inline-block;
}

.grid > div {
  background: #444;
  color: white;
  border-radius: 1rem;
  padding: 1rem;
  border-top: 1px solid #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

h1, h2 {
  margin: 0;
  line-height: 1;
}
body {
  background: #222;
  margin: 0;
  padding: 1rem;
  line-height: 1.3;
  font-family: Roboto, sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.