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.

            
              <div class='container'>
  <div class='comingsoon-container'>
    <div>
      <iframe src="https://www.youtube.com/embed/zBS2fBdTsxA?ecver=2&loop=1&controls=0&mute=1&autoplay=1&showinfo=0&rel=0&playlist=zBS2fBdTsxA" frameborder="0"></iframe>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 412 109" enable-background="new 0 0 412 109" xml:space="preserve">
        <title>31 Nights of Horror 2017</title>
        <desc>My personal 31 Nights of Horror series continues this year and will launch 29.09.2017. Follow the calendar here: https://yuschick.github.io/31-Nights-of-Horror-2017</desc>
            <defs>
              <g id="text">
                <path d="M65.3 35.1c1.1 0.4 1.9 1 2.4 1.8 0.5 0.8 0.8 2.8 0.8 5.9 0 2.3-0.3 4.1-0.8 5.3 -0.5 1.3-1.4 2.2-2.7 2.9 -1.3 0.7-2.9 1-4.9 1 -2.3 0-4.1-0.4-5.3-1.1 -1.3-0.8-2.1-1.7-2.6-2.8 -0.4-1.1-0.6-3-0.6-5.8v-2.3h7.2v4.7c0 1.2 0.1 2 0.2 2.4 0.1 0.3 0.5 0.5 1 0.5 0.6 0 0.9-0.2 1.1-0.6s0.3-1.5 0.3-3.3v-2c0-1.1-0.1-1.9-0.4-2.4 -0.2-0.5-0.6-0.8-1.1-1 -0.5-0.2-1.4-0.3-2.8-0.3v-4.2c1.7 0 2.8-0.1 3.2-0.2 0.4-0.1 0.7-0.4 0.9-0.9 0.2-0.4 0.3-1.1 0.3-2.1V29c0-1-0.1-1.7-0.3-2 -0.2-0.3-0.5-0.5-1-0.5 -0.5 0-0.8 0.2-1 0.5 -0.2 0.3-0.3 1.1-0.3 2.2v2.4h-7.2v-2.4c0-2.7 0.6-4.6 1.9-5.6 1.3-1 3.2-1.4 6-1.4 3.4 0 5.7 0.7 6.9 2 1.2 1.3 1.8 3.2 1.8 5.6 0 1.6-0.2 2.8-0.7 3.5C67.2 33.8 66.4 34.5 65.3 35.1z"/>
                <path d="M82.2 22.6v28.7H75V36c0-2.2-0.1-3.6-0.2-4 -0.1-0.4-0.4-0.8-0.9-1 -0.5-0.2-1.5-0.3-3.2-0.3H70v-3.3c3.5-0.7 6.1-2.3 7.9-4.6H82.2z"/>
                <path d="M108.2 22.6v28.7h-6.5l-3.9-13v13h-6.2V22.6h6.2l4.2 12.9V22.6H108.2z"/>
                <path d="M118.7 22.6v28.7h-7.5V22.6H118.7z"/>
                <path d="M138.8 33.2h-7.5v-2.6c0-1.6-0.1-2.7-0.2-3.1 -0.1-0.4-0.5-0.6-1-0.6 -0.5 0-0.8 0.2-0.9 0.5 -0.2 0.4-0.2 1.3-0.2 2.7v13.8c0 1.3 0.1 2.1 0.2 2.5 0.2 0.4 0.5 0.6 1 0.6 0.5 0 0.9-0.2 1.1-0.7 0.2-0.5 0.3-1.4 0.3-2.7v-3.4H130v-4.4h8.7v15.4h-4.7l-0.7-2.1c-0.5 0.9-1.2 1.6-1.9 2 -0.8 0.4-1.7 0.7-2.7 0.7 -1.3 0-2.4-0.3-3.5-0.9s-1.9-1.4-2.5-2.3c-0.6-0.9-0.9-1.8-1.1-2.8 -0.1-1-0.2-2.5-0.2-4.4V33c0-2.7 0.1-4.7 0.4-6 0.3-1.2 1.1-2.4 2.5-3.4s3.2-1.6 5.4-1.6c2.2 0 4 0.4 5.4 1.3 1.4 0.9 2.4 2 2.8 3.2 0.4 1.2 0.7 3 0.7 5.4V33.2z"/>
                <path d="M158.8 22.6v28.7h-7.5V39.3h-2.2v12.1h-7.5V22.6h7.5v10.3h2.2V22.6H158.8z"/>
                <path d="M176.9 22.6v5.7h-4.4v23H165v-23h-4.4v-5.7H176.9z"/>
                <path d="M194.4 31.3h-6.9v-2.1c0-1-0.1-1.6-0.3-1.9 -0.2-0.3-0.5-0.4-0.9-0.4 -0.4 0-0.8 0.2-1 0.6 -0.2 0.4-0.3 0.9-0.3 1.7 0 1 0.1 1.7 0.4 2.2 0.2 0.5 1 1.1 2.1 1.8 3.3 2 5.4 3.6 6.3 4.9 0.9 1.3 1.3 3.3 1.3 6.1 0 2-0.2 3.6-0.7 4.5s-1.4 1.8-2.8 2.4c-1.4 0.7-3 1-4.8 1 -2 0-3.7-0.4-5.1-1.1 -1.4-0.8-2.3-1.7-2.8-2.9 -0.4-1.2-0.7-2.8-0.7-5v-1.9h6.9v3.5c0 1.1 0.1 1.8 0.3 2.1 0.2 0.3 0.5 0.5 1 0.5 0.5 0 0.9-0.2 1.1-0.6 0.2-0.4 0.4-1 0.4-1.7 0-1.7-0.2-2.8-0.7-3.3 -0.5-0.5-1.6-1.4-3.5-2.6 -1.9-1.2-3.1-2.1-3.7-2.7 -0.6-0.6-1.1-1.3-1.5-2.3 -0.4-1-0.6-2.2-0.6-3.8 0-2.2 0.3-3.8 0.8-4.8 0.6-1 1.5-1.8 2.7-2.4s2.8-0.9 4.5-0.9c1.9 0 3.6 0.3 5 0.9 1.4 0.6 2.3 1.4 2.7 2.4 0.4 1 0.7 2.6 0.7 4.8V31.3z"/>
                <path d="M220.8 39.5c0 2.9-0.1 4.9-0.2 6.1 -0.1 1.2-0.6 2.3-1.3 3.3 -0.7 1-1.7 1.8-2.9 2.3 -1.2 0.5-2.6 0.8-4.3 0.8 -1.5 0-2.9-0.3-4.1-0.8 -1.2-0.5-2.2-1.3-3-2.3 -0.7-1-1.2-2.1-1.3-3.3 -0.1-1.2-0.2-3.2-0.2-6.2v-4.9c0-2.9 0.1-4.9 0.2-6.1 0.1-1.2 0.6-2.3 1.3-3.3 0.7-1 1.7-1.8 2.9-2.3 1.2-0.5 2.6-0.8 4.3-0.8 1.5 0 2.9 0.3 4.1 0.8 1.2 0.5 2.2 1.3 3 2.3s1.2 2.1 1.3 3.3c0.1 1.2 0.2 3.2 0.2 6.2V39.5zM213.3 30c0-1.3-0.1-2.2-0.2-2.6 -0.1-0.4-0.5-0.6-0.9-0.6 -0.4 0-0.7 0.2-0.9 0.5 -0.2 0.3-0.3 1.2-0.3 2.7v13.4c0 1.7 0.1 2.7 0.2 3.1 0.1 0.4 0.5 0.6 0.9 0.6 0.5 0 0.8-0.2 1-0.7 0.1-0.4 0.2-1.5 0.2-3.2V30z"/>
                <path d="M223.6 22.6h12.6v5.7H231v5.4h4.6v5.5H231v12.1h-7.5V22.6z"/>
                <path d="M261.6 22.6v28.7h-7.5V39.3h-2.2v12.1h-7.5V22.6h7.5v10.3h2.2V22.6H261.6z"/>
                <path d="M281.6 39.5c0 2.9-0.1 4.9-0.2 6.1 -0.1 1.2-0.6 2.3-1.3 3.3 -0.7 1-1.7 1.8-2.9 2.3 -1.2 0.5-2.6 0.8-4.3 0.8 -1.5 0-2.9-0.3-4.1-0.8 -1.2-0.5-2.2-1.3-3-2.3 -0.7-1-1.2-2.1-1.3-3.3 -0.1-1.2-0.2-3.2-0.2-6.2v-4.9c0-2.9 0.1-4.9 0.2-6.1 0.1-1.2 0.6-2.3 1.3-3.3 0.7-1 1.7-1.8 2.9-2.3 1.2-0.5 2.6-0.8 4.3-0.8 1.5 0 2.9 0.3 4.1 0.8 1.2 0.5 2.2 1.3 3 2.3 0.7 1 1.2 2.1 1.3 3.3 0.1 1.2 0.2 3.2 0.2 6.2V39.5zM274.2 30c0-1.3-0.1-2.2-0.2-2.6 -0.1-0.4-0.5-0.6-0.9-0.6 -0.4 0-0.7 0.2-0.9 0.5 -0.2 0.3-0.3 1.2-0.3 2.7v13.4c0 1.7 0.1 2.7 0.2 3.1 0.1 0.4 0.5 0.6 0.9 0.6 0.5 0 0.8-0.2 1-0.7 0.1-0.4 0.2-1.5 0.2-3.2V30z"/>
                <path d="M284.4 22.6h5.3c3.5 0 5.9 0.1 7.2 0.4 1.2 0.3 2.3 1 3 2.1 0.8 1.1 1.2 2.9 1.2 5.3 0 2.2-0.3 3.7-0.8 4.5 -0.6 0.8-1.6 1.2-3.3 1.4 1.5 0.4 2.5 0.9 3 1.5 0.5 0.6 0.8 1.2 0.9 1.7 0.1 0.5 0.2 1.9 0.2 4.2v7.6h-6.9v-9.5c0-1.5-0.1-2.5-0.4-2.9 -0.2-0.4-0.9-0.5-1.9-0.5v12.9h-7.5V22.6zM291.9 27.6v6.4c0.8 0 1.4-0.1 1.8-0.3 0.3-0.2 0.5-1 0.5-2.2v-1.6c0-0.9-0.2-1.5-0.5-1.8C293.3 27.7 292.7 27.6 291.9 27.6z"/>
                <path d="M304 22.6h5.3c3.5 0 5.9 0.1 7.2 0.4 1.2 0.3 2.3 1 3 2.1 0.8 1.1 1.2 2.9 1.2 5.3 0 2.2-0.3 3.7-0.8 4.5 -0.6 0.8-1.6 1.2-3.3 1.4 1.5 0.4 2.5 0.9 3 1.5 0.5 0.6 0.8 1.2 0.9 1.7 0.1 0.5 0.2 1.9 0.2 4.2v7.6h-6.9v-9.5c0-1.5-0.1-2.5-0.4-2.9 -0.2-0.4-0.9-0.5-1.9-0.5v12.9H304V22.6zM311.4 27.6v6.4c0.8 0 1.4-0.1 1.8-0.3 0.3-0.2 0.5-1 0.5-2.2v-1.6c0-0.9-0.2-1.5-0.5-1.8C312.9 27.7 312.3 27.6 311.4 27.6z"/>
                <path d="M340.6 39.5c0 2.9-0.1 4.9-0.2 6.1 -0.1 1.2-0.6 2.3-1.3 3.3 -0.7 1-1.7 1.8-2.9 2.3 -1.2 0.5-2.6 0.8-4.3 0.8 -1.5 0-2.9-0.3-4.1-0.8 -1.2-0.5-2.2-1.3-3-2.3 -0.7-1-1.2-2.1-1.3-3.3 -0.1-1.2-0.2-3.2-0.2-6.2v-4.9c0-2.9 0.1-4.9 0.2-6.1 0.1-1.2 0.6-2.3 1.3-3.3 0.7-1 1.7-1.8 2.9-2.3 1.2-0.5 2.6-0.8 4.3-0.8 1.5 0 2.9 0.3 4.1 0.8 1.2 0.5 2.2 1.3 3 2.3 0.7 1 1.2 2.1 1.3 3.3 0.1 1.2 0.2 3.2 0.2 6.2V39.5zM333.1 30c0-1.3-0.1-2.2-0.2-2.6 -0.1-0.4-0.5-0.6-0.9-0.6 -0.4 0-0.7 0.2-0.9 0.5 -0.2 0.3-0.3 1.2-0.3 2.7v13.4c0 1.7 0.1 2.7 0.2 3.1 0.1 0.4 0.5 0.6 0.9 0.6 0.5 0 0.8-0.2 1-0.7 0.1-0.4 0.2-1.5 0.2-3.2V30z"/>
                <path d="M343.3 22.6h5.3c3.5 0 5.9 0.1 7.2 0.4 1.2 0.3 2.3 1 3 2.1 0.8 1.1 1.2 2.9 1.2 5.3 0 2.2-0.3 3.7-0.8 4.5 -0.6 0.8-1.6 1.2-3.3 1.4 1.5 0.4 2.5 0.9 3 1.5 0.5 0.6 0.8 1.2 0.9 1.7 0.1 0.5 0.2 1.9 0.2 4.2v7.6h-6.9v-9.5c0-1.5-0.1-2.5-0.4-2.9 -0.2-0.4-0.9-0.5-1.9-0.5v12.9h-7.5V22.6zM350.8 27.6v6.4c0.8 0 1.4-0.1 1.8-0.3 0.3-0.2 0.5-1 0.5-2.2v-1.6c0-0.9-0.2-1.5-0.5-1.8C352.3 27.7 351.7 27.6 350.8 27.6z"/>
                <path d="M173.7 80.8v3.7h-12l0-3.1c3.6-5.8 5.7-9.4 6.4-10.8 0.7-1.4 1-2.5 1-3.2 0-0.6-0.1-1-0.3-1.3 -0.2-0.3-0.5-0.4-0.9-0.4s-0.7 0.2-0.9 0.5c-0.2 0.3-0.3 1-0.3 1.9v2.1h-4.9v-0.8c0-1.2 0.1-2.2 0.2-2.9 0.1-0.7 0.4-1.4 0.9-2.1 0.5-0.7 1.1-1.2 1.9-1.6 0.8-0.4 1.7-0.5 2.9-0.5 2.2 0 3.8 0.5 4.9 1.6 1.1 1.1 1.7 2.4 1.7 4.1 0 1.3-0.3 2.6-0.9 4 -0.6 1.4-2.5 4.4-5.5 8.9H173.7z"/>
                <path d="M175.8 78.7h5.5c0 1 0 1.7 0 1.9 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.5 0.3 0.8 0.3 0.3 0 0.5-0.1 0.7-0.3 0.2-0.2 0.3-0.4 0.3-0.7 0-0.3 0-0.8 0-1.6v-3.5c-0.3 0.6-0.7 1-1.2 1.3 -0.5 0.3-1.2 0.4-2 0.4 -1 0-1.9-0.3-2.7-0.8 -0.8-0.5-1.3-1.2-1.5-2 -0.2-0.8-0.3-1.8-0.3-3.1v-1.7c0-1.5 0.1-2.7 0.2-3.4 0.1-0.7 0.4-1.4 0.9-2.1 0.5-0.6 1.2-1.1 2.1-1.5 0.9-0.4 1.9-0.5 3.1-0.5 1.5 0 2.7 0.2 3.6 0.6 0.9 0.4 1.7 1 2.2 1.8 0.5 0.8 0.8 1.6 0.9 2.4 0.1 0.8 0.1 2.5 0.1 4.9v3c0 2.6 0 4.4-0.1 5.2 -0.1 0.9-0.4 1.7-0.9 2.5 -0.6 0.8-1.3 1.4-2.3 1.8 -0.9 0.4-2 0.6-3.3 0.6 -1.5 0-2.8-0.2-3.8-0.7 -1-0.5-1.7-1.2-2.1-2.1S175.8 80.1 175.8 78.7zM181.3 71.9c0 0.9 0.1 1.5 0.4 1.7 0.2 0.2 0.5 0.3 0.7 0.3 0.4 0 0.7-0.1 0.8-0.4 0.2-0.3 0.3-0.8 0.3-1.6v-4c0-1-0.1-1.6-0.3-1.9s-0.4-0.4-0.8-0.4c-0.2 0-0.5 0.1-0.7 0.3 -0.3 0.2-0.4 0.9-0.4 1.9V71.9z"/>
                <path d="M194.5 80.1v4.5h-4.1v-4.5H194.5z"/>
                <path d="M208.9 70.1v7.3c0 1.7-0.1 2.9-0.3 3.6 -0.2 0.8-0.6 1.5-1.1 2.1 -0.6 0.7-1.3 1.1-2.1 1.4 -0.8 0.3-1.7 0.4-2.7 0.4 -1.3 0-2.4-0.2-3.3-0.5 -0.9-0.3-1.6-0.8-2.1-1.4 -0.5-0.6-0.9-1.3-1.1-2 -0.2-0.7-0.3-1.8-0.3-3.4v-7.7c0-2 0.2-3.5 0.5-4.5 0.3-1 1-1.8 2.1-2.4 1-0.6 2.3-0.9 3.8-0.9 1.2 0 2.3 0.2 3.2 0.6 0.9 0.4 1.7 0.9 2.1 1.5 0.5 0.6 0.8 1.3 1 2C208.8 67.2 208.9 68.4 208.9 70.1zM203.4 68.2c0-1.2-0.1-1.9-0.2-2.2 -0.1-0.3-0.4-0.4-0.8-0.4 -0.4 0-0.7 0.2-0.8 0.5 -0.1 0.3-0.2 1-0.2 2.2v10.7c0 1.3 0.1 2 0.2 2.3 0.1 0.3 0.4 0.4 0.8 0.4 0.4 0 0.7-0.2 0.8-0.5 0.1-0.3 0.2-1 0.2-2.1V68.2z"/>
                <path d="M210.8 78.7h5.5c0 1 0 1.7 0 1.9 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.5 0.3 0.8 0.3 0.3 0 0.5-0.1 0.7-0.3 0.2-0.2 0.3-0.4 0.3-0.7 0-0.3 0-0.8 0-1.6v-3.5c-0.3 0.6-0.7 1-1.2 1.3 -0.5 0.3-1.2 0.4-2 0.4 -1 0-1.9-0.3-2.7-0.8s-1.3-1.2-1.5-2c-0.2-0.8-0.3-1.8-0.3-3.1v-1.7c0-1.5 0.1-2.7 0.2-3.4 0.1-0.7 0.4-1.4 0.9-2.1 0.5-0.6 1.2-1.1 2.1-1.5 0.9-0.4 1.9-0.5 3.1-0.5 1.5 0 2.7 0.2 3.6 0.6 0.9 0.4 1.7 1 2.2 1.8 0.5 0.8 0.8 1.6 0.9 2.4 0.1 0.8 0.1 2.5 0.1 4.9v3c0 2.6 0 4.4-0.1 5.2 -0.1 0.9-0.4 1.7-0.9 2.5 -0.6 0.8-1.3 1.4-2.3 1.8 -0.9 0.4-2 0.6-3.3 0.6 -1.5 0-2.8-0.2-3.8-0.7 -1-0.5-1.7-1.2-2.1-2.1S210.8 80.1 210.8 78.7zM216.3 71.9c0 0.9 0.1 1.5 0.4 1.7 0.2 0.2 0.5 0.3 0.7 0.3 0.4 0 0.7-0.1 0.8-0.4 0.2-0.3 0.3-0.8 0.3-1.6v-4c0-1-0.1-1.6-0.3-1.9s-0.4-0.4-0.8-0.4c-0.2 0-0.5 0.1-0.7 0.3 -0.3 0.2-0.4 0.9-0.4 1.9V71.9z"/>
                <path d="M229.5 80.1v4.5h-4.1v-4.5H229.5z"/>
                <path d="M239.4 62.6v21.9H234V72.8c0-1.7 0-2.7-0.1-3.1 -0.1-0.3-0.3-0.6-0.7-0.8s-1.2-0.3-2.4-0.3h-0.5v-2.6c2.6-0.6 4.7-1.7 6-3.5H239.4z"/>
                <path d="M251.2 62.6v4.8l-3.5 17.2h-5.4l3.9-18h-5.4v-3.9H251.2z"/>
              </g>
              <mask id="mask" x="0" y="0" width="100" height="50">
                <rect x="0" y="-100" width="640" height="320" fill="#fff"/>
                <use xlink:href="#text"/>
              </mask>
            </defs>
            <rect x="0" y="-100" width="640" height="320" mask="url(#mask)" fill-opacity="1"/>
            <use xlink:href="#text" mask="url(#mask)"/>
          </svg>
      <img class='teaser' src='https://yuschick.github.io/31-Nights-of-Horror-2017/teaser-share-image.jpg' alt="31 Nights of Horror - 29.09.17" />
    </div>
  </div>
</div>
            
          
!
            
              * {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #000;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 1280px;
  min-height: 100vh;
  width: 100%;
}

.comingsoon-container {
  max-width: 640px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

iframe {
  display: block;
  height: 360px;
  max-height: 360px;
  width: 100%;
}

.video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

svg {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.teaser {
  display: none;
}

@media screen and (max-width: 650px) {
  .teaser {
    display: block;
    width: 100%;
  }
  iframe, svg {
    display: none;
  }
}

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

Console