<div class="box">
<div class="container">
<div id="straw">
  Stravinsky
  </div>
  <div id="line-one" class="area"></div>
  <div id="line-two" class="area"></div>
  <div id="line-three" class="area"></div>
  <div id="line-four" class="area"></div>
  <div id="fort">
    fortner
  </div>
  <div id="line-five" class="area"></div>
  <div id="line-six" class="area"></div>
  <div id="line-seven" class="area"></div>
  <div id="line-eight" class="area"></div>
  <div id="line-nine" class="area"></div>
  <div id="line-ten" class="area"></div>
  <div id="line-eleven" class="area"></div>
  <div id="line-twelve" class="area"></div>
  <div id="line-thirteen" class="area"></div>
  <div id="line-fourteen" class="area"></div>
  <div id="line-fifteen" class="area"></div>
  <div id="line-sixteen" class="area"></div>
  <div id="line-seventeen" class="area"></div>
  <div id="line-eighteen" class="area"></div>
  <div id="line-nineteen" class="area"></div>
  <div id="berg">
    berg
  </div>
  <div id="lorem">
    lorem ipsum delor sit amet
  </div>
  <div id="line-twenty" class="area"></div>
  <div id="ton">
    tonhalle grosser sall <br/>
donnerstag, den 6.januar 1955 <br/>
20.15 uhr <br/>
    12. volkskonzert<br/>
der tonhalle-gesellschaft
  </div>
  <div id="leit">
    leitung <br/>
erich schmid <br/>
solisten <br/>
touty druey, walter lang, klavier
  </div>
  <div id="i-straw">
    i. Stravinsky <br/>
symphonie d’instruments à vent <br/>
w. fortner <br/>
fantasie über bach <br/>
für zwei klaviere und orchester <br/>
alban berg <br/>
lulu-sinfonie
  </div>
  <div id="karten">
    karten zu fr.1.-.2.-und 3.- <br/>
tonhalle-kasse, hug & co., jecklin, <br/>
reisebureau kuoni <br/>
genossenschaftsbuchhandlung
  </div>
</div>  
</div>
body {
  background: red;
}

.box {
  background: black;
  width: 650px;
  height: 1100px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.container {
  transform: rotate(31deg);
  background: black;
  font-family: Helvetica;
  font-size: 45px;
  font-weight: bold;
  color: white;
  border: 1px solid black;
  width: 1140px;
  height: 1290px;
  display: grid;
  grid-template-columns: 13% 8.5% 13% 2% 2% 3% 7.5% 1.5% 3% 6% 7.7% 16% 16.8%;
  grid-template-rows: 7.5% 7.5% 6.5% 6.5% 4% 4% 4% 3% 4% 2.8% 3% 3% 17% 6.5% 14% 6.5%;
  margin-left: -240px;
  margin-top: -100px;
}

#straw {
  grid-column: 1/ span 3;
  grid-row: 5;
  font-weight: bold;
  margin-left: 50px;
  color: white;
}

.area {
  background: white;
}

#line-one {
  grid-column: 2 / span 6;
  grid-row: 4;
  height: 4px;
  width: 370px;
  align-self: end;
  margin-left: 20px;
  margin-bottom: 4px;
  transform: rotate(-1deg);
}

#line-two {
  grid-column: 2;
  grid-row: 6;
  height: 35px;
  width: 380px;
  transform: rotate(-1deg);
}

#line-three {
  grid-column: 2 / span 5;
  grid-row: 7;
  height: 4px;
  align-self: start;
  margin-left: 20px;
  transform: rotate(-1deg);
}

#line-four {
  grid-column: 2;
  grid-row: 8;
  height: 3px;
  width: 200px;
  align-self: start;
  margin-left: 20px;
  transform: rotate(-1deg);
}

#fort {
  grid-column: 3;
  grid-row: 12;
  font-weight: bold; 
}

#line-five {
  grid-column: 5;
  grid-row: 2;
  width: 3px;
  justify-self: center;
}

#line-six {
  grid-column: 5;
  grid-row: 4 / span 5;
  width: 3px;
  justify-self: center;
  transform: rotate(-1deg);
}

#line-seven {
  grid-column: 4;
  grid-row: 11 / span 3;
  width: 25px;
  margin-top: 30px;
}

#line-eight {
  grid-column: 5;
  grid-row: 12;
  width: 3px;
  height: 400px;
  justify-self: end;
  transform: rotate(-1deg);

}

#line-nine {
  grid-column: 7;
  grid-row: 2;
  height: 220px;
  width: 50px;
}

#line-ten {
  grid-column: 7;
  grid-row: 9 / span 7;
  width: 50px;
  margin-top: 10px;
  transform: rotate(-1deg);
}

#line-eleven {
  grid-column: 7 / span 5;
  grid-row: 8;
  height: 3px;
  transform: rotate(-1deg);
  margin-top:5px;
}

#line-twelve {
  grid-column: 8;
  grid-row: 2 / span 2;
  width: 12px;
/*   transform: rotate(-1deg) */
}

#line-thirteen {
  grid-column: 8;
  grid-row: 6;
/*   transform: rotate(-1deg) */
  width: 12px;
  height: 550px;
}

#line-fourteen {
  grid-column: 9;
  grid-row: 2 / span 4;
  width: 3px;
  justify-self: center;
}

#line-fifteen {
  grid-column: 9 / span 3;
  grid-row: 6;
  height: 4px;
  align-self: end;
  margin-left: 16px;
  transform: rotate(-1deg);
}

#line-sixteen {
  grid-column: 9;
  grid-row: 10;
  width: 3px;
  height: 470px;
  justify-self: end;
}

#line-seventeen {
  grid-column: 10;
  grid-row: 3 / span 10;
  width: 20px;
  justify-self: start;
  margin-left: 18px;
  transform: rotate(-.5deg);
}

#line-eighteen {
  grid-column: 10;
  grid-row: 15;
  width: 20px;
  height: 200px;
  justify-self: start;
  margin-left: 18px;
  transform: rotate(-.5deg);
}

#line-nineteen {
  grid-column: 11;
  grid-row: 6;
  height: 30px;
  width: 120px;
  align-self: start;
}

#berg {
  grid-column: 11;
  grid-row: 7;
  font-weight: bold;
}

#lorem {
  font-size: 6px;
  grid-column: 11;
  grid-row: 14;
  transform: rotate(90deg);
  margin-left: -4px;
  margin-top: 16px;

}

#line-twenty {
  grid-column: 12;
  grid-row: 4;
  height: 3px;
  width: 40px;
  align-self: end;
}

#ton {
  font-size: 10px;
  grid-column: 12;
  grid-row: 11;
  line-height: 1.25;
}

#leit {
  font-size: 10px;
  grid-column: 12;
  grid-row: 13;
    line-height: 1.25;
}

#i-straw {
  font-size: 10px;
  grid-column: 12;
  grid-row: 13;
  align-self: end;
  margin-bottom: 40px;
    line-height: 1.25;
}

#karten {
  font-size: 10px;
  grid-column: 12;
  grid-row: 14;
  margin-top: 20px;
      line-height: 1.25;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.