Editor

  <html>
  <head>
  <style type="text/css">
@font-face {
 font-family: bayer;
 src: url("bayer.eot") /* EOT file for IE */
}
@font-face {
 font-family: bayer;
 src: url("bayer.ttf") /* TTF file for CSS3 browsers */
}

background {
    background-color: #5d91ca;
    display: block;
    height: 550px;
    width: 389px;
    z-index: 13;
} 
  
h1 {
  position: absolute;
  left: 8px;
  top: -15px;
  width: 389px;
  height: 550px;
  z-index: 13;
  font-family: bayer, dead, Helvetica, sans-serif;
  font-size: 76pt;
  font-style:normal;
  line-height: 0em;
  text-decoration: none;
  color: #b3c7df;
  }

ball{
  background-color: #fff;
  position: absolute;
  left: 206px;
  top: 132px;
  width: 145px;
  height: 143px;
  z-index: 12;
  -webkit-border-radius: 100px;
}

square{
  background-color: #fff;
  display: block;
  position: absolute;
  left: 50px;
  top: 263px;
  width: 134px;
  height: 131px;
  z-index: 10;
}

triangle{
  position: absolute;
  left: 222px;
  top: 352px;
  width: 167px;
  height: 151px;
  z-index: 6;
}



p {
  position: absolute;
  left: 65px;
  top:200px;
  z-index: 10;
  font-family: bayer, dead, Helvetica, sans-serif;
  font-size: 25pt;
  font-style:normal;
  line-height: 0em;
  text-decoration: none;
  color: #b3c7df;
  -webkit-transform: rotate(90deg); 
  }
  
</style>
</head>
<body>
<background></background>
<h1>bauhaus</h1>
<ball></ball>
<square></square>
<triangle></triangle>
<p>Herbert Bayer</p>
</body>
</html>
(Title should appear here)
Edit the code above to see the result.