cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
                <main>
    
      <img class="logo" src="http://labs.jensimmons.com/2016/examples/images/jazz-fest-logo.png">
      <header>
        <h1>Jazz at Lincoln Center</h1>
        <h2>Spring 2017</h2>
      </header>
      
      <footer class="support-note">You are seeing the fallback layout for this design (made of hand-coded floats). If you want to see the Grid layout, use <a href="https://nightly.mozilla.org">Firefox Nightly</a> or another <a href="http://gridbyexample.com/browsers/">supporting browser</a> with the flag turned on.</footer>
      
      <section>
        <h1 class="element-invisible">Schedule of Events</h1>
        <ul>
          <li>
            <h3>Bebop Lives!</h3>
            <p>Celebrating the best of Dizzy Gillespie and Charlie Parker</p>
            <h5>January 26–27, 8pm</h5>
          </li>
          <li>
            <h3>Jazz and Art</h3>
            <p>The Jazz at Lincoln Center Orchestra with Wynton Marsalis & special guest Mark O'Connor</p>
            <h5>February 22–24, 8pm</h5>
          </li>
          <li>
            <h3>Dr. Michael White Quartet</h3>
            <p>With clarinetist Dr. Michael White, banjo player Seva Venet, trumpeter Gregg Stafford, and bassist Vince Giordano</p>
            <h5>March 13, 7:30pm</h5>
          </li>
          <li>
            <h3>New York Youth Symphony: Dedicated to Diz</h3>
            <p>with special guest Jon Faddis</p>
            <h5>March 14, 8pm</h5>
          </li>
          <li>
            <h3>Sinne Eeg</h3>
            <p>With vocalist Sinne Eeg, pianist Jacob Christoffersen, drummer Clarence Penn, and bassist Johanes Weidenmueller</p>
            <h5>March 15, 2:30pm</h5>
          </li>
          <li>
            <h3>Late Night Session: Evan Sherman Entourage</h3>
            <p>Tuesday-Saturday evenings, doors open at 11:15pm for Late Night Sessions.</p>
            <h5>March 15, 11:15pm</h5>
          </li>
          <li>
            <h3>An Evening with Audrey Shakir</h3>
            <p>With vocalist Audrey Shakir, Musical Director/pianist Ted Howe, bassist Tom Kennedy, and drummer Matt Slocum</p>
            <h5>March 16, 8pm</h5>
          </li>
          <li>
            <h3>New York City Opera Concerts</h3>
            <p>The New York City Opera Concert Series launches with the world premiere of David Hertzberg's "Sunday Morning".</p>
            <h5>March 16, 9pm</h5>
          </li>
          <li>
            <h3>Evan Sherman Big Band</h3>
            <p>Tuesday-Saturday evenings, doors open at 11:15pm for Late Night Sessions featuring some of the most talented emerging artists in jazz.</p>
            <h5>March 17–22, 11:15pm</h5>
          </li>
          <li>
            <h3>Aaron Diehl: The Real Deal</h3>
            <p>Pianist Aaron Diehl, known fondly as “The Real Diehl” in jazz circles, has been a Jazz at Lincoln Center favorite since he was named “Outstanding Soloist”.</p>
            <h5>March 18, 7:30pm</h5>
          </li>
          <li>
            <h3>Walter Blanding: Fantasy in Blue</h3>
            <p>With saxophonist Walter Blanding, trumpeter Freddie Hendrix, pianist Emmet Cohen, bassist Yasushi Nakamura, and drummer Ulysses Owens, Jr.</p>
            <h5>March 18, 8pm</h5>
          </li>
        </ul>
      </section>
      
      <section class="ticketinfo">
        <h4>Get Tickets While They Last!</h4>
        <p>This would be box office information, but this is a fake poster. This content might seem real, but it's all made up so I can do a demonstration of new website technology.</p>
      </section>
      
    </main>
            
          
!
            
              * {box-sizing: border-box;}
html {
  font-family: georgia, serif;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  text-size-adjust: 100%;
}
img {
  width: 100%;
}
.element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
}

// Code for the Styling --------------------------------------
html {
  font-size: 18px;
  background: url('http://labs.jensimmons.com/2016/examples/images/Wynton-Marsalis.jpg') no-repeat;
  background-position: right top;
  background-size: cover;
  font-family: Avenir, Helvetica, georgia, serif;  
}
body {
  width: 90%;
  margin: 3vh auto;
}
h1, h2 {
  font-size: 1.4rem;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.1em;
  text-align: right;
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
  padding: 10px;
  border-radius: 4px;
  background: #D4759F;
  line-height: 1.2;
}
h3 {
  margin: 0;
  font-size: 0.7em;
  color: #FFD274;
}
h4 {
  margin: 0;
  font-size: 0.7em;
  color: #fff;
  background: #D4759F;
  padding: 2px;
  text-transform: uppercase;
}
h5 {
  margin: 0;
  font-size: 0.6em;
  color: #FFD274;
}
p {
  margin: 0;
  font-size: 0.6em;
  color: white;  
}
.logo {
  width: 250px;
  margin-bottom: 20px
}

// Basic layout for non-Grid supporting browsers

li {
  width: 300px;
  float: left;
  margin: 10px;
}
.ticketinfo {
  width: 300px;
  float: left;
  margin: 10px;
  margin-bottom: 100px;
  p {
    color: black; 
    margin-top: 5px;
  }
}
.support-note {
  margin-left: 1em;
  max-width: 600px;
  font-size: 80%;
}

// Now the Grid-based Layout -- Two nested grids

@supports (display:grid) {
  .support-note {
    display: none;
  }
  // undo the Basic layout for non-Grid-supporting browsers
  li {
    float: none;
    height: auto;
    width: auto;
    margin: none;
  }
  
  // Ok, lets go Grid! -- Outer Grid, Whole Page
  main {
    display: grid;
    grid-template-rows: repeat(8, 15vw);
    grid-template-columns: repeat(6, 15vw);
  }
  .logo {
    grid-row: 8 / 9;    
    img {
      width: 15vw;
    }
    align-self: end;
  }
  header {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
    padding-top: 2em;
  }
  .ticketinfo {
    grid-row: 6 / 8;
    grid-column: 5 / 6;    
  }  
  .ticketinfo p {
    color: #fff;
    margin-top: 1em;  
  }
  ul {
    grid-row: 2 / 9;  
    grid-columns: 1 / 8; 
  }
  
  // Inner Grid -- Pink boxes of events
  ul {
    display: grid;
    grid-template-rows: repeat(5, 15vw);
    grid-template-columns: repeat(5, 15vw);
  }
  li:nth-child(1) {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }
  li:nth-child(2) {
    grid-row: 2 / 3;
    grid-column: 4 / 5;
  }  
  li:nth-child(3) {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
  li:nth-child(4) {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
  }
  li:nth-child(5) {
    grid-row: 4 / 5;
    grid-column: 4 / 5;
  }
  li:nth-child(6) {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
  }
  li:nth-child(7) {
    grid-row: 5 / 6;
    grid-column: 3 / 4;
  }
  li:nth-child(8) {
    grid-row: 6 / 7;
    grid-column: 2 / 3;
  }
  li:nth-child(9) {
    grid-row: 7 / 8;
    grid-column: 4 / 5;
  }
  li:nth-child(10) {
    grid-row: 8 / 9;
    grid-column: 1 / 2;
  }
  li:nth-child(11) {
    grid-row: 9 / 10;
    grid-column: 3 / 4;
  }
}
            
          
!
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