<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)
Output Should Appear Here.
Edit the code above to see the result.