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.

            
              <!--
design borrowed from
https://www.swissted.com/
-->
<div class="container">
    <article id="poster" itemscope="" itemtype="http://schema.org/MusicEvent" data-display="grid">
      <!--H1 band name is visible when not using grid layout. To achieve letter spacing on grid, use vanilla js to retrieve letters separated by " " from content="". Each letter is wrapped into individual html element (which is positioned on the grid). Maybe it could be done with svg shapes (Approach <use>: define somewhere in document, later assign grid cell = not working). Precisely placing text items on grid is problematic because of the line-height - would be great if could align-text:bottom /top    -->
      <h1 itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><a id="venueBand" content="t h c u r e" href="https://en.wikipedia.org/wiki/The_Cure" itemprop="name">the cure</a></h1>
      <h2 itemprop="performer" itemscope="" itemtype="http://schema.org/Person">with special guests<br/>
        <a href="https://en.wikipedia.org/wiki/Joy_Division" itemprop="name">joy divison<a> & <a href="" itemprop="name">back to zero</a></h2>
      <div class="venuePlace">
        <time itemprop="startDate" content="1979-06-16" datetime="1979-06-16">saturday, june 16 1979</time>
        <p itemprop="location" itemscope="" itemtype="http://schema.org/MusicVenue">live at <a href="#" itemprop="name">cantenbury odeon</a></p>
      </div>
      <p itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">tickets:<br/>
        <meta itemprop="priceCurrency" content="GB">&pound;</meta><span itemprop="price">1.25</span>
        <span>advance / </span>
        <meta itemprop="priceCurrency" content="GB">&pound;</meta><span itemprop="price">2.50</span>
        <span>door</span>
      </p>
      <footer id="footer" itemprop="organizer" itemscope="" itemtype="http://schema.org/organizer">presented by <a itemprop="name">university of kent<br/> catenbury students' union</a></footer>
    </article>
  </div>
            
          
!
            
              
@function pxToEm ($size) {
  @return $size / 16 * 1em;
}

$gray: #839098;
$white: #dfe2d7;
$black: #000113;
//General page style
* {
  box-sizing: border-box 
}
html {
  font-size: 62.5%;
  color: $white;
  background: $white;
}
body {
  font-family: Arial, sans-serif;
  font-size: 1.6em;
  font-size: 1.6rem;
  line-height: 1.3;
}
p {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  background-color: $black;
  max-width: pxToEm(716);//IE8
  max-width: 71.6rem;
  padding: 1em;
  margin: 0 auto;
  height: (1008/716 * 100%);
}
.venuePlace,
footer {
  text-align: right;
}
aside{
  display: none;
} 
h1 {
  font-size: 20em; //IE8
  font-size: 20vmin;
  line-height: 1;
  margin-top: 0;
  font-weight: bold;
}   
//Small screen and non-grid layout
@media screen and (max-width: pxToEm(716)) {
  article > * {
    margin-bottom: 2vh
  }
}
a {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s linear, color 0.2s linear;
  &:hover {
    background: #fff;
    color: $black;
  }
}
article {
  padding: 2rem;
}
h2 {
  margin-top: 0;
  font-size: 1.6rem;
  text-align: right;
  color: $gray;
}
//Grid layout
@media screen and (min-width: pxToEm(716)) {
  @supports (display: grid) {
    .container {
      height: 100.8rem;
    }
    /*hide visually, but leave for screen reader */
    h1 {
      position:absolute;
      left:-10000px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    } 
    h2 {
      margin: 0;
      grid-column-start: 3;
      grid-row-start: 2;
      align-self: end;
      grid-column-end: span 4;
    }
    article[data-display="grid"] {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-row-gap: 4vh;
    }
    [itemprop="offers"] {
      grid-column-start: 1;
      grid-column-end: span 2; 
      grid-row-start: 3;
      margin-top: pxToEm(45);
      align-self: baseline;
    }
    [itemprop="location"] {
      align-self: end;
    }
    .venuePlace {
      grid-column-start: 3;
      grid-column-end: span 2;
      grid-row-start: 1;
      align-self: end;
      grid-column-end: span 4; 
    }
    footer {
      grid-column-start: 3; 
      grid-row-start: 2;
      align-self: start;
      grid-column-end: span 4;
      margin-top: pxToEm(40);
    }
    #poster {
      height: 100%; //of parent, to preserve original aspect ratio
      padding-top: 0;
      aside {
        display: block;
        font-size: pxToEm(280);
        line-height: 0.7;
        font-weight: bold;
      }
      & aside:nth-of-type(1) {
        grid-column-start: 1;
        grid-row-start: 4;
        color: $gray;
        margin-left: 8px;
      }
      & aside:nth-of-type(2) {
        grid-column-start: 2;
        grid-row-start: 4;
        color: $gray;
        margin-left: 20%;
        transform: translateX(50%);
      }
      
      & aside:nth-of-type(3) {
        grid-column-start: 1;
        grid-row-start: 1;
      }
      & aside:nth-of-type(4) {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      & aside:nth-of-type(5) {
        grid-column-start: 3;
        grid-row-start: 3;
        transform: translateX(50%);
      }
      & aside:nth-of-type(6) {
        grid-column-start: 4;
        grid-row-start: 4;
        text-align: right;
      }
    }  
  } 
}
            
          
!
            
              // Progressive enhancement: if js & modern browser > IE10, then add js, otherwise do nothing
if ('visibilityState' in document) { 
  
  document.addEventListener("DOMContentLoaded", function () {

    var article = document.getElementById('venueBand'),
      poster = document.getElementById("poster"),
      text = article.getAttribute("content"),
      textArray = text.split(" "),
      length = textArray.length;

    for (var i = 0; i < length; i++) {
      var char = textArray[i]
      var element = document.createElement("aside");
      element.append(char);
      poster.append(element);
    }
  })
}

            
          
!
999px
Loading ..................

Console