cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <section data-library style=opacity:0>
  <article>
    <button data-close onclick=destroyModal()>&times;</button>
    <main>
      <img src=http://placehold.it/100x100 class=cover>
      <h1>Headline for content</h1>
      <div class=meta style=display:none>
        <img src=http://placehold.it/30x30>
        <img src=http://placehold.it/30x30>
        <span>Name 1 & Name 2</span>
      </div>
      <h2>Tagline goes here</h2>
      <p>This is an example of paragraph text</p>
      <ul class=features style=display:none>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </main>
    <footer>
      <span class=oneTime style=display:none>Make a One-Time Payment &amp; Unlock This Call Only:</span>
      <button data-button>Add To Cart - $47</button>
      <img src=http://placehold.it/200x40>
    </footer>
    <div class=upsell style=display:none>
      <h1>Get Instant Access&hellip;</h1>
      <p>Lorem ipsum dolor sit amet&hellip;</p>
    </div>
  </article>
  <div class=overlay onclick=destroyModal()></div>
</section>
<h1>Library Modals</h1>
<h3>Four Modal layouts</h3>
<ul>
  <li><button data-button onclick=spawnModal('tools')>Tools Modal</button>
  <li><button data-button=blue onclick=spawnModal('live')>Live Call Modal</button>
  <li><button data-button=green onclick=spawnModal('report')>Report Modal</button>
  <li><button data-button=grey onclick=spawnModal('course')>Course Modal</button>
</ul>
<h3>Left Side</h3>
<ul>
  <li>image
</ul>
<h3>Right Side</h3>
<ul>
  <li>headline
  <li>(live-call only: call meta info, speakers)
  <li>tagline
  <li>Paragraph style
  <li>(course only: list)
</ul>
<h3>Footer</h3>
<ul>
  <li>Cards
  <li>(live-call only: "Make a One-Time Payment &amp; Unlock This Call Only:")
  <li>Button
  <li>(live-call only: OR upsell)
</ul>
            
          
!
            
              @element '[data-library]' {
  $this,
  $this * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: auto;
  }
  $this {
    opacity: 0;
    pointer-events: none;
    overflow-y: scroll;
  }
  $this,
  $this .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 10pt;
    line-height: 1.4;
    font-weight: 400;
    font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
    transition: all .2s ease-in-out;
  }
  $this .overlay {
    background: rgba(0,0,0,.5);
    z-index: 400;
    cursor: pointer;
  }
  $this article {
    display: block;
    width: 100%;
    max-width: 725px;
    margin: 0 auto;
    padding: 1em;
    background: white;
    position: relative;
    z-index: 500;
    box-shadow: rgba(0,0,0,.15) 0 15px 30px;
    transition: margin .2s ease;
  }
  $this [data-close] {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 1em;
    height: 1em;
    color: rgba(0,0,0,.5);
    transition: color .2s ease-in-out;
    background: transparent;
    border: none;
    font-size: 24pt;
    font-weight: 300;
    line-height: 1em;
    padding: 0 .25em 0 0;
    margin: 0;
    cursor: pointer;
    z-index: 600;
  }
  $this [data-close]:hover {
    color: #c00;
  }
  $this article main {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: eval("document.querySelector('$it .cover').scrollHeight")px;
  }
  $this article .cover {
    max-width: 100px;
  }
  $this article main h1,
  $this article main h2 {
    line-height: 1.2;
    letter-spacing: -.03em;
    font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
    font-weight: 600;
    text-align: center;
  }
  $this article h1 {
    font-size: 24pt;
    font-weight: 700;
    margin: .25em 0 0 0;
  }
  $this article h2 {
    color: #777;
    font-size: 18pt;
    font-weight: 500;
    margin: 0 0 .25em 0;
  }
  $this article .meta {
    display: block;
    margin: 0 0 .5em 0;
    text-align: center;
  }
  $this article .meta:after {
    content: '';
    display: block;
    clear: both;
  }
  $this article .meta img {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: .5em;
    vertical-align: middle;
  }
  $this article .meta span {
    font-weight: 600;
    font-size: 12pt;
    color: #111;
  }
  $this article p {
    color: #333;
    font-size: 12pt;
    line-height: 1.4;
    margin: 0;
    text-align: center;
  }
  $this article p + p {
    margin-top: .75em;
  }
  $this article ul {
    margin: .5em 0 0 0;
    padding: 0 0 0 2em;
  }
  $this article li {
    margin: 0;
    padding: 0;
  }
  $this article img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  $this footer {
    position: relative;
    padding: 1em;
    background: #eee;
    border: 1px solid #ccc;
    color: #333;
    font-size: 10pt;
    margin: 1em auto 0 auto;
  }
  $this footer button {
    margin: 0 auto .5em auto;
  }
  $this footer span {
    display: block;
    text-align: center;
    font-size: 10pt;
    margin-bottom: .5em;
  }
  $this article footer:after {
    content: '';
    display: block;
    clear: both;
  }
  $this article .upsell {
    position: relative;
    margin-top: 1.5em;
    border-top: 2px dotted #eee;
  }
  $this article .upsell:before {
    content: 'or';
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    width: 40px;
    background: white;
    font-size: 16pt;
    color: #777;
    text-align: center;
    line-height: 1;
    margin: -10pt auto 0 auto;
    font-style: italic;
    letter-spacing: -.02em;
  }
}
@element '[data-library]' and (min-width: 450px) {
  $this article main {
    padding-left: calc(100px + 1em);
  }
  $this article .cover {
    position: absolute;
    top: 0;
    left: 0;
  }
  $this article main h1 {
    margin-top: 0;
  }
  $this article main h1,
  $this article main h2,
  $this article .meta,
  $this article p {
    text-align: left;
  }
}
@element '[data-library]' and (min-width: 725px) {
  $this article {
    margin: 50px auto;
  }
  $this article footer {
    padding-left: calc(eval("querySelector('footer img').clientWidth")px + 1em);
    padding-right: calc(eval("querySelector('footer button').scrollWidth")px + 1.5em);
    min-height: 5em;
  }
  $this article footer img {
    position: absolute;
    left: 1em;
    top: calc(50% - 20px);
    margin: 0;
  }
  $this article footer button {
    position: absolute;
    right: .5em;
    top: .5em;
    margin: 0;
  }
  $this article footer span {
    display: inline;
    width: auto;
    padding-top: .75em;
    text-align: right;
    margin-bottom: 0;
  }
}
            
          
!
            
              function spawnModal(theme){
  var modal = document.querySelector('[data-library]')
  modal.querySelector('article').style.marginTop = ''
  modal.style.opacity = 1
  modal.style.pointerEvents = 'all'
  if (theme == 'live'){
    // Reveal Call Meta
    // Reveal 'Make a one-time payment' message beside Buy button
    // Reveal 'OR' upsell in footer of modal
    document.querySelector('[data-library] .meta').style.display =
    document.querySelector('[data-library] .oneTime').style.display =
    document.querySelector('[data-library] .upsell').style.display = 'block'
  }
  if (theme == 'course'){
    // Reveal List
    document.querySelector('[data-library] .features').style.display = 'block'
  }
}
function destroyModal(){
  var modal = document.querySelector('[data-library]')
  modal.querySelector('article').style.marginTop = '-50vh'
  modal.style.opacity = 0
  modal.style.pointerEvents = 'none'
  // For development, re-hide all conditional sections when modal is destroyed
  document.querySelector('[data-library] .meta').style.display =
  document.querySelector('[data-library] .oneTime').style.display =
  document.querySelector('[data-library] .upsell').style.display =
  document.querySelector('[data-library] .features').style.display = 'none'
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console