cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

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.

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;}
.element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
}

// Code for the Styling --------------------------------------
html {
  font-size: 1.1rem;
  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
Loading ..................

Console