Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
 <div id="container">
    <div id="msg" class="bubble">
        <h1>Arrgh! It&#39;s a 500.</h1>
        <p>Something went wrong. <br> We have an Internal Server Error. <br> We&#39;ll fix that. <br>
 <br>Please try again later, <br> <a href="#home"> return to the front page </a> or <a href="#go_to_support"> contact us. </a></p>
    </div>
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="800px" height="625.9px" viewBox="0 0 800 625.9" style="enable-background:new 0 0 800 625.9;"
	 xml:space="preserve">
<style type="text/css">
	.st0{fill:#ED1C24;}
	.st1{opacity:0.1;fill:#ED1C24;}
	.st2{opacity:0.3;fill:#ED1C24;}
	.st3{fill:#FFFFFF;}
	.st4{clip-path:url(#clippingpath_2_);}
	.st5{fill:#5B4B42;}
	.st6{fill:#FDE9EA;}
	.st7{clip-path:url(#clippingpath_3_);}
</style>
<defs>
</defs>
<g id="base_1_">
	<rect y="582.1" class="st0" width="800" height="4"/>
	<rect y="585.9" class="st1" width="800" height="40"/>
</g>
<g id="kiosk_1_">
	<path class="st0" d="M556,154.1v22H4v-22H556 M560,150.1H0v30h560V150.1L560,150.1z"/>
	<path class="st0" d="M456,246.1v166H104v-166H456 M460,242.1H100v174h360V242.1L460,242.1z"/>
	<path class="st0" d="M476,416.1v8H84v-8H476 M480,412.1H80v16h400V412.1L480,412.1z"/>
	<path class="st0" d="M530,180.1v22H30v-22H530 M534,176.1H26v30h508V176.1L534,176.1z"/>
	<path class="st0" d="M60,206.1v350H38v-350H60 M64,202.1H34v358h30V202.1L64,202.1z"/>
	<path class="st0" d="M74,560.1v22H22v-22H74 M78,556.1H18v30h60V556.1L78,556.1z"/>
	<path class="st0" d="M524,206.1v350h-22v-350H524 M528,202.1h-30v358h30V202.1L528,202.1z"/>
	<path class="st0" d="M538,560.1v22h-52v-22H538 M542,556.1h-60v30h60V556.1L542,556.1z"/>
	<g>
		<rect x="39.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="53.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="67.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="81.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="95.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="109.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="123.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="137.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="151.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="165.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="179.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="193.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="207.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="221.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="235.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="249.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="263.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="277.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="291.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="305.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="319.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="333.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="347.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="361.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="375.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="389.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="403.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="417.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="431.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="445.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="459.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="473.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="487.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="501.5" y="176.1" class="st0" width="4" height="30"/>
		<rect x="515.5" y="176.1" class="st0" width="4" height="30"/>
	</g>
	<rect x="60" y="424.1" class="st0" width="442" height="4"/>
	<rect x="60" y="504.1" class="st0" width="442" height="4"/>
	<rect x="120" y="134.1" class="st0" width="4" height="16"/>
	<rect x="434" y="134.1" class="st0" width="4" height="16"/>
	<g>
		<g>
			<g>
				<path class="st0" d="M136,451.3v54.8H94v-54.8H136 M138,449.3H92v58.8h46V449.3L138,449.3z"/>
				<rect x="98" y="455.3" class="st2" width="34" height="6"/>
				<rect x="98" y="463.3" class="st2" width="16" height="24"/>
				<rect x="116" y="463.3" class="st2" width="16" height="10"/>
				<rect x="116" y="475.3" class="st2" width="16" height="8"/>
				<rect x="116" y="485.3" class="st2" width="16" height="16"/>
				<rect x="98" y="489.3" class="st2" width="16" height="12"/>
			</g>
		</g>
		<g>
			<g>
				<path class="st0" d="M202,451.3v54.8h-42v-54.8H202 M204,449.3h-46v58.8h46V449.3L204,449.3z"/>
				<rect x="164" y="455.3" class="st2" width="34" height="6"/>
				<rect x="164" y="463.3" class="st2" width="16" height="16"/>
				<rect x="182" y="463.3" class="st2" width="16" height="12"/>
				<rect x="182" y="477.3" class="st2" width="16" height="10"/>
				<rect x="182" y="489.3" class="st2" width="16" height="12"/>
				<rect x="164" y="481.3" class="st2" width="16" height="20"/>
			</g>
		</g>
		<g>
			<g>
				<path class="st0" d="M466,451.3v54.8h-42v-54.8H466 M468,449.3h-46v58.8h46V449.3L468,449.3z"/>
				<rect x="428" y="455.3" class="st2" width="34" height="6"/>
				<rect x="428" y="463.3" class="st2" width="16" height="16"/>
				<rect x="446" y="463.3" class="st2" width="16" height="12"/>
				<rect x="446" y="477.3" class="st2" width="16" height="10"/>
				<rect x="446" y="489.3" class="st2" width="16" height="12"/>
				<rect x="428" y="481.3" class="st2" width="16" height="20"/>
			</g>
		</g>
		<g>
			<g>
				<path class="st0" d="M268,451.3v54.8h-42v-54.8H268 M270,449.3h-46v58.8h46V449.3L270,449.3z"/>
				<rect x="230" y="455.3" class="st2" width="34" height="6"/>
				<rect x="230" y="463.3" class="st2" width="16" height="22"/>
				<rect x="248" y="463.3" class="st2" width="16" height="22"/>
				<rect x="248" y="487.3" class="st2" width="16" height="14"/>
				<rect x="230" y="495.3" class="st2" width="16" height="6"/>
				<rect x="230" y="487.3" class="st2" width="16" height="6"/>
			</g>
		</g>
		<g>
			<g>
				<path class="st0" d="M334,451.3v54.8h-42v-54.8H334 M336,449.3h-46v58.8h46V449.3L336,449.3z"/>
				<rect x="296" y="455.3" class="st2" width="34" height="6"/>
				<rect x="296" y="463.3" class="st2" width="16" height="12"/>
				<rect x="314" y="463.3" class="st2" width="16" height="8"/>
				<rect x="314" y="473.3" class="st2" width="16" height="28"/>
				<rect x="296" y="495.3" class="st2" width="16" height="6"/>
				<rect x="296" y="477.3" class="st2" width="16" height="16"/>
			</g>
		</g>
		<g>
			<g>
				<path class="st0" d="M400,451.3v54.8h-42v-54.8H400 M402,449.3h-46v58.8h46V449.3L402,449.3z"/>
				<rect x="362" y="455.3" class="st2" width="34" height="4"/>
				<rect x="362" y="461.3" class="st2" width="16" height="18"/>
				<rect x="380" y="461.3" class="st2" width="16" height="10"/>
				<rect x="380" y="473.3" class="st2" width="16" height="12"/>
				<rect x="380" y="487.3" class="st2" width="16" height="14"/>
				<rect x="362" y="495.3" class="st2" width="16" height="6"/>
				<rect x="362" y="481.3" class="st2" width="16" height="12"/>
			</g>
		</g>
	</g>
	<g>
		<rect x="92" y="582.1" class="st0" width="46" height="2"/>
		<rect x="92" y="578.1" class="st0" width="46" height="2"/>
		<rect x="92" y="574.1" class="st0" width="46" height="2"/>
		<rect x="92" y="570.1" class="st0" width="46" height="2"/>
		<rect x="92" y="566.1" class="st0" width="46" height="2"/>
		<rect x="92" y="562.1" class="st0" width="46" height="2"/>
		<rect x="92" y="558.1" class="st0" width="46" height="2"/>
		<rect x="92" y="554.1" class="st0" width="46" height="2"/>
		<rect x="92" y="550.1" class="st0" width="46" height="2"/>
		<rect x="92" y="546.1" class="st0" width="46" height="2"/>
		<rect x="92" y="542.1" class="st0" width="46" height="2"/>
		<rect x="92" y="538.1" class="st0" width="46" height="2"/>
		<rect x="92" y="534.1" class="st0" width="46" height="2"/>
		<rect x="92" y="530.1" class="st0" width="46" height="2"/>
	</g>
	<g>
		<rect x="422" y="582.1" class="st0" width="46" height="2"/>
		<rect x="422" y="578.1" class="st0" width="46" height="2"/>
		<rect x="422" y="574.1" class="st0" width="46" height="2"/>
		<rect x="422" y="570.1" class="st0" width="46" height="2"/>
		<rect x="422" y="566.1" class="st0" width="46" height="2"/>
		<rect x="422" y="562.1" class="st0" width="46" height="2"/>
		<rect x="422" y="558.1" class="st0" width="46" height="2"/>
		<rect x="422" y="554.1" class="st0" width="46" height="2"/>
		<rect x="422" y="550.1" class="st0" width="46" height="2"/>
		<rect x="422" y="546.1" class="st0" width="46" height="2"/>
		<rect x="422" y="542.1" class="st0" width="46" height="2"/>
		<rect x="422" y="538.1" class="st0" width="46" height="2"/>
		<rect x="422" y="534.1" class="st0" width="46" height="2"/>
		<rect x="422" y="530.1" class="st0" width="46" height="2"/>
		<rect x="422" y="526.1" class="st0" width="46" height="2"/>
		<rect x="422" y="522.1" class="st0" width="46" height="2"/>
	</g>
	<g>
		<rect x="224" y="582.1" class="st0" width="46" height="2"/>
		<rect x="224" y="578.1" class="st0" width="46" height="2"/>
		<rect x="224" y="574.1" class="st0" width="46" height="2"/>
		<rect x="224" y="570.1" class="st0" width="46" height="2"/>
		<rect x="224" y="566.1" class="st0" width="46" height="2"/>
		<rect x="224" y="562.1" class="st0" width="46" height="2"/>
		<rect x="224" y="558.1" class="st0" width="46" height="2"/>
		<rect x="224" y="554.1" class="st0" width="46" height="2"/>
		<rect x="224" y="550.1" class="st0" width="46" height="2"/>
		<rect x="224" y="546.1" class="st0" width="46" height="2"/>
		<rect x="224" y="542.1" class="st0" width="46" height="2"/>
	</g>
	<g>
		<rect x="356" y="582.1" class="st0" width="46" height="2"/>
		<rect x="356" y="578.1" class="st0" width="46" height="2"/>
		<rect x="356" y="574.1" class="st0" width="46" height="2"/>
		<rect x="356" y="570.1" class="st0" width="46" height="2"/>
		<rect x="356" y="566.1" class="st0" width="46" height="2"/>
		<rect x="356" y="562.1" class="st0" width="46" height="2"/>
		<rect x="356" y="558.1" class="st0" width="46" height="2"/>
		<rect x="356" y="554.1" class="st0" width="46" height="2"/>
		<rect x="356" y="550.1" class="st0" width="46" height="2"/>
	</g>
	<g>
		<rect x="290" y="582.1" class="st0" width="46" height="2"/>
		<rect x="290" y="578.1" class="st0" width="46" height="2"/>
		<rect x="290" y="574.1" class="st0" width="46" height="2"/>
		<rect x="290" y="570.1" class="st0" width="46" height="2"/>
		<rect x="290" y="566.1" class="st0" width="46" height="2"/>
		<rect x="290" y="562.1" class="st0" width="46" height="2"/>
		<rect x="290" y="558.1" class="st0" width="46" height="2"/>
		<rect x="290" y="554.1" class="st0" width="46" height="2"/>
		<rect x="290" y="550.1" class="st0" width="46" height="2"/>
		<rect x="290" y="546.1" class="st0" width="46" height="2"/>
		<rect x="290" y="542.1" class="st0" width="46" height="2"/>
		<rect x="290" y="538.1" class="st0" width="46" height="2"/>
		<rect x="290" y="534.1" class="st0" width="46" height="2"/>
		<rect x="290" y="530.1" class="st0" width="46" height="2"/>
	</g>
	<g>
		<rect x="158" y="582.1" class="st0" width="46" height="2"/>
		<rect x="158" y="578.1" class="st0" width="46" height="2"/>
		<rect x="158" y="574.1" class="st0" width="46" height="2"/>
		<rect x="158" y="570.1" class="st0" width="46" height="2"/>
		<rect x="158" y="566.1" class="st0" width="46" height="2"/>
		<rect x="158" y="562.1" class="st0" width="46" height="2"/>
		<rect x="158" y="558.1" class="st0" width="46" height="2"/>
		<rect x="158" y="554.1" class="st0" width="46" height="2"/>
	</g>
	<g>
		<path class="st3" d="M54.2,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C79.9,218.1,68.3,229.3,54.2,229.3z"/>
		<path class="st0" d="M77.9,206.1C76.4,218,66.4,227.3,54,227.3s-22.4-9.3-23.8-21.2h47.3 M82.4,202.1H26c0,0.3,0,0.6,0,1
			c0,15.6,12.6,28.2,28.2,28.2s28.2-12.6,28.2-28.2C82.4,202.8,82.4,202.4,82.4,202.1L82.4,202.1z"/>
	</g>
	<g>
		<path class="st2" d="M110.7,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C136.3,218.1,124.8,229.3,110.7,229.3z"/>
		<path class="st0" d="M134.1,206.1c-1.5,11.9-11.4,21.2-23.7,21.2s-22.2-9.3-23.7-21.2h46.9 M138.8,202.1H82.5c0,0.3,0,0.6,0,1
			c0,15.6,12.6,28.2,28.2,28.2c15.6,0,28.2-12.6,28.2-28.2C138.9,202.8,138.9,202.4,138.8,202.1L138.8,202.1z"/>
	</g>
	<g>
		<path class="st3" d="M167.1,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C192.8,218.1,181.2,229.3,167.1,229.3z"/>
		<path class="st0" d="M191.3,206.1c-1.5,11.9-11.8,21.2-24.1,21.2c-12.3,0-22.6-9.3-24.1-21.2h48.4 M195.3,202.1h-56.3
			c0,0.3,0,0.6,0,1c0,15.6,12.6,28.2,28.2,28.2c15.6,0,28.2-12.6,28.2-28.2C195.3,202.8,195.3,202.4,195.3,202.1L195.3,202.1z"/>
	</g>
	<g>
		<path class="st2" d="M223.6,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C249.2,218.1,237.7,229.3,223.6,229.3z"/>
		<path class="st0" d="M247.5,206.1c-1.5,11.9-11.7,21.2-24,21.2c-12.3,0-22.5-9.3-24-21.2H247.5 M251.7,202.1h-56.3
			c0,0.3,0,0.6,0,1c0,15.6,12.6,28.2,28.2,28.2s28.2-12.6,28.2-28.2C251.8,202.8,251.7,202.4,251.7,202.1L251.7,202.1z"/>
	</g>
	<g>
		<path class="st3" d="M280,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C305.7,218.1,294.1,229.3,280,229.3z"/>
		<path class="st0" d="M303.8,206.1c-1.5,11.9-11.6,21.2-23.9,21.2s-22.4-9.3-23.9-21.2h47.5 M308.2,202.1h-56.3c0,0.3,0,0.6,0,1
			c0,15.6,12.6,28.2,28.2,28.2s28.2-12.6,28.2-28.2C308.2,202.8,308.2,202.4,308.2,202.1L308.2,202.1z"/>
	</g>
	<g>
		<path class="st2" d="M336.4,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C362.1,218.1,350.6,229.3,336.4,229.3z"/>
		<path class="st0" d="M360,206.1c-1.5,11.9-11.5,21.2-23.8,21.2c-12.3,0-22.3-9.3-23.8-21.2h47.1 M364.6,202.1h-56.3
			c0,0.3,0,0.6,0,1c0,15.6,12.6,28.2,28.2,28.2s28.2-12.6,28.2-28.2C364.7,202.8,364.6,202.4,364.6,202.1L364.6,202.1z"/>
	</g>
	<g>
		<path class="st3" d="M392.9,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C418.6,218.1,407,229.3,392.9,229.3z"/>
		<path class="st0" d="M416.2,206.1c-1.5,11.9-11.3,21.2-23.7,21.2c-12.3,0-22.2-9.3-23.7-21.2h46.6 M421.1,202.1h-56.3
			c0,0.3,0,0.6,0,1c0,15.6,12.6,28.2,28.2,28.2s28.2-12.6,28.2-28.2C421.1,202.8,421.1,202.4,421.1,202.1L421.1,202.1z"/>
	</g>
	<g>
		<path class="st2" d="M449.3,229.3c-14.1,0-25.7-11.2-26.2-25.2h52.4C475,218.1,463.4,229.3,449.3,229.3z"/>
		<path class="st0" d="M473.4,206.1c-1.5,11.9-11.7,21.2-24.1,21.2c-12.3,0-22.6-9.3-24.1-21.2H473.4 M477.5,202.1h-56.3
			c0,0.3,0,0.6,0,1c0,15.6,12.6,28.2,28.2,28.2s28.2-12.6,28.2-28.2C477.6,202.8,477.5,202.4,477.5,202.1L477.5,202.1z"/>
	</g>
	<g>
		<path class="st3" d="M505.8,229.3c-14.1,0-25.7-11.2-26.2-25.2H532C531.4,218.1,519.9,229.3,505.8,229.3z"/>
		<path class="st0" d="M529.7,206.1c-1.5,11.9-11.6,21.2-24,21.2c-12.3,0-22.5-9.3-24-21.2h47.8 M534,202.1h-56.3c0,0.3,0,0.6,0,1
			c0,15.6,12.6,28.2,28.2,28.2c15.6,0,28.2-12.6,28.2-28.2C534,202.8,534,202.4,534,202.1L534,202.1z"/>
	</g>
	<rect x="54" y="228.1" class="st2" width="6" height="328"/>
	<rect x="68" y="560.1" class="st2" width="6" height="22"/>
	<rect x="518" y="224.1" class="st2" width="6" height="332"/>
	<rect x="30" y="180.1" class="st2" width="500" height="6"/>
	<rect x="64" y="508.1" class="st2" width="434" height="6"/>
	<rect x="64" y="428.1" class="st2" width="434" height="6"/>
	<rect x="532" y="560.1" class="st2" width="6" height="22"/>
</g>
<g id="curtainsGroup_1_" class="st4">
	<defs>
		<rect id="clippingpath_1_" x="103.5" y="246.1" width="353" height="166"/>
	</defs>
	<clipPath id="clippingpath_2_">
		<use xlink:href="#clippingpath_1_"  style="overflow:visible;"/>
	</clipPath>
	<g id="hipster">
		<g>
			<path class="st5" d="M216.3,360c0,0-48.3,22-50.6,45.6c-2.3,23.6-1.2,64.8,1.1,69.8c1.9,4.3,9.1,7.2,11.2,8
				c0.4,0.1,0.7,0.4,0.9,0.7l38.3,60c0.3,0.5,0.9,0.8,1.5,0.8H229c1,0,1.8-0.8,1.8-1.8v-32.7c0-1,0.8-1.8,1.8-1.8l0,0
				c1,0,1.8,0.8,1.8,1.8v32.7c0,1,0.8,1.8,1.8,1.8h11.7c0.6,0,1.2-0.3,1.6-0.9l39.2-64.7c0.2-0.3,0.5-0.6,0.9-0.8
				c2.4-0.9,11.9-4.8,13.5-8.8c1.8-4.5-1.4-53.9-3-67.1c-3.6-30.6-51.2-42.1-51.2-42.1l7.1,89.7c0.1,1-0.7,1.9-1.8,2L211,453
				c-1.1,0-1.9-0.9-1.8-2L216.3,360z"/>
			<polygon class="st5" points="226.1,359.4 229.6,356.4 237.8,356.4 240.5,358.8 236.9,366.7 242.2,434.1 234.7,446.7 226.1,434.3 
				229.6,366.4 			"/>
			<path class="st5" d="M217.5,549.5l-1.8,3.6c-0.6,1.2,0.3,2.6,1.6,2.6H229c1,0,1.8-0.8,1.8-1.8v-3.6c0-1-0.8-1.8-1.8-1.8h-9.9
				C218.4,548.5,217.8,548.9,217.5,549.5z"/>
			<path class="st5" d="M247.7,549.5l1.8,3.6c0.6,1.2-0.3,2.6-1.6,2.6h-11.6c-1,0-1.8-0.8-1.8-1.8v-3.6c0-1,0.8-1.8,1.8-1.8h9.9
				C246.8,548.5,247.4,548.9,247.7,549.5z"/>
		</g>
		<g id="head_1_">
			<path class="st5" d="M211.2,280.3c0,0-1.7-12.6,18.1-13.2c15.3-0.5,19.7,5,25.8,9.2c1.8,1.2,4.9,0.5,6.2-1.7
				c1.3-2.2,1.4-3.6,1.4-3.6s8.8,12.3,2.5,23c-6.8,11.6-18.8,4.8-23.4,2.3c-6.6-3.5-12.6-11.4-19.7-11.5c-7.5-0.2-8.7,6.5-8.7,6.5
				s-3.4-3.3-5.5-1.8c-2.1,1.6-2.8,5.2-2.7,11.7c0.1,6.5,0,4.7,0,4.7l-1.3,0.1c0,0-1.1-7.8-2.6-16c-1.5-8.2,3.3-11,5.7-11
				S211,279.7,211.2,280.3z"/>
			<path class="st5" d="M255.4,304.7c-6-0.4-6.6-0.9-13,0.3c-3.4,0.7-5.2,1.5-7.3,1.5c-2.5,0-4.2-0.8-7.5-1.5
				c-6.4-1.3-8.7-0.8-14.7-0.3c-6,0.4-9.4,0.5-9.4,0.5v5.6c0,0,1.8-0.4,3.3,1.9s1.3,4.7,5.1,7.4c3.8,2.7,10.2,2.8,14,1.7
				c3.8-1.1,6-3.4,7-7c1-3.6,2.5-3.5,2.5-3.5s1.3-0.1,2.3,3.5c1,3.6,3,5.9,6.8,7c3.8,1.1,11,0.8,13.7-1.7c2.4-2.3,2.8-3.4,3.7-6.8
				c0.4-1.3,0.7-2.5,0.7-2.5v-5.6C262.5,305.2,261.4,305.1,255.4,304.7z M229.6,318c-2.2,2.6-5,2.9-8.9,3c-3.8,0.1-9.9-0.2-10.7-7.6
				c-0.8-7.4,3.8-7.6,10.7-7.8c0,0,5.1,0.2,8,1.6C232.4,309,232.7,314.3,229.6,318z M260.6,313.4c-0.8,7.4-6.9,7.7-10.7,7.6
				c-3.8-0.1-6.7-0.4-8.9-3c-3.1-3.7-2.8-9,0.9-10.8c2.8-1.4,8-1.6,8-1.6C256.8,305.8,261.4,306,260.6,313.4z"/>
			<path class="st5" d="M262.9,296.1H261c0,0,0.6,20-0.3,25.4s-3.8,7.9-8.2,9.4c-4.4,1.5-10.7-0.8-10.7-0.8s-1-0.4-3.1,0.3
				c-2.1,0.8-5.2,0.8-5.2,0.8s-3.1,0-5.1-0.8c-2.1-0.8-3.1-0.3-3.1-0.3s-6.3,2.3-10.7,0.8c-4.4-1.5-7.3-4-8.2-9.5
				s-0.3-11.4-0.3-11.4h-1.9c0,0-2.8,31.5,2.3,36.1c4.4,4.1,6.6,5.1,14.6,5.3c8,0.2,12.5,0.1,12.5,0.1s4.5,0.1,12.6-0.1
				c8-0.2,10.2-1.2,14.6-5.3C265.6,341.6,262.9,296.1,262.9,296.1z M240.6,336.6c-2.5,1.4-5,1.8-7.2,1.8c-4.3,0-7.6-1.7-7.8-1.8
				c-0.5-0.3-0.7-0.9-0.4-1.4c0.3-0.5,0.9-0.7,1.4-0.4c0.1,0.1,6.8,3.5,13.2,0c0.5-0.3,1.1-0.1,1.4,0.4
				C241.3,335.7,241.1,336.3,240.6,336.6z"/>
			<g>
				<path class="st5" d="M210.6,307.3c-0.6,0-1.3-0.3-1.7-0.9c-0.6-0.9-0.4-2.2,0.5-2.8c0.3-0.2,6.9-4.6,17.4-1.9
					c1.1,0.3,1.7,1.4,1.4,2.4c-0.3,1.1-1.4,1.7-2.4,1.4c-8.8-2.2-14.1,1.3-14.1,1.3C211.4,307.1,211,307.3,210.6,307.3z"/>
			</g>
			<g>
				<path class="st5" d="M256.4,307.3c0.6,0,1.3-0.3,1.7-0.9c0.6-0.9,0.4-2.2-0.5-2.8c-0.3-0.2-6.9-4.6-17.4-1.9
					c-1.1,0.3-1.7,1.4-1.4,2.4c0.3,1.1,1.4,1.7,2.4,1.4c8.8-2.2,14.1,1.3,14.1,1.3C255.7,307.1,256,307.3,256.4,307.3z"/>
			</g>
			<g>
				<circle class="st5" cx="222.5" cy="313.9" r="2.8"/>
				<circle id="eyeball_3_" class="st3" cx="223.2" cy="314.2" r="1"/>
			</g>
			<g id="eye_1_">
				<circle class="st5" cx="247.5" cy="313.9" r="2.8"/>
				<circle id="eyeball_2_" class="st3" cx="247.2" cy="314.2" r="1"/>
			</g>
		</g>
	</g>
    <g id="stars">
		<polygon id="star6" class="st5" points="317.5,293.6 318.7,295.9 321.2,296.3 319.4,298.1 319.8,300.7 317.5,299.5 
			315.2,300.7 315.6,298.1 313.8,296.3 316.3,295.9 		"/>
		<polygon id="star5" class="st5" points="335.5,321.8 337,324.9 340.5,325.4 338,327.8 338.6,331.2 335.5,329.6 332.4,331.2 
			333,327.8 330.5,325.4 333.9,324.9 		"/>
		<polygon id="star4" class="st5" points="293.5,266.3 295,269.4 298.5,269.9 296,272.4 296.6,275.8 293.5,274.2 290.4,275.8 
			291,272.4 288.5,269.9 291.9,269.4 		"/>
		<polygon id="star3" class="st5" points="260.5,283.3 262,286.4 265.5,286.9 263,289.4 263.6,292.8 260.5,291.2 257.4,292.8 
			258,289.4 255.5,286.9 258.9,286.4 		"/>
		<polygon id="star2" class="st5" points="340.5,274.4 342,277.5 345.5,278 343,280.5 343.6,283.9 340.5,282.3 337.4,283.9 
			338,280.5 335.5,278 339,277.5 		"/>
		<polygon id="star1" class="st5" points="292,307.4 293.2,310 296,310.4 294,312.3 294.5,315.1 292,313.8 289.5,315.1 290,312.3 
			288,310.4 290.8,310 		"/>
	</g>
	<g id="curtains">
		<rect id="curtain" x="366.5" y="246.1" class="st6" width="311.4" height="166"/>
		<rect id="stick" x="362.5" y="242.1" class="st0" width="4" height="174"/>
	</g>
	
</g>
<g>
	<g>
		<g>
			<rect x="437.5" y="262.5" class="st3" width="44" height="56.8"/>
			<path class="st0" d="M480.5,263.5v54.8h-42v-54.8H480.5 M482.5,261.5h-46v58.8h46V261.5L482.5,261.5z"/>
		</g>
		<rect x="442.5" y="267.5" class="st2" width="34" height="6"/>
		<rect x="442.5" y="275.5" class="st2" width="16" height="24"/>
		<rect x="460.5" y="275.5" class="st2" width="16" height="10"/>
		<rect x="460.5" y="287.5" class="st2" width="16" height="8"/>
		<rect x="460.5" y="297.5" class="st2" width="16" height="16"/>
		<rect x="442.5" y="301.5" class="st2" width="16" height="12"/>
	</g>
</g>
<g>
	<g>
		<g>
			<rect x="437.5" y="328.5" class="st3" width="44" height="56.8"/>
			<path class="st0" d="M480.5,329.5v54.8h-42v-54.8H480.5 M482.5,327.5h-46v58.8h46V327.5L482.5,327.5z"/>
		</g>
		<rect x="442.5" y="333.5" class="st2" width="34" height="6"/>
		<rect x="442.5" y="341.5" class="st2" width="16" height="24"/>
		<rect x="460.5" y="341.5" class="st2" width="16" height="10"/>
		<rect x="460.5" y="353.5" class="st2" width="16" height="8"/>
		<rect x="460.5" y="363.5" class="st2" width="16" height="16"/>
		<rect x="442.5" y="367.5" class="st2" width="16" height="12"/>
	</g>
</g>
<g id="sign">
	<path class="st3" d="M460,34.1H100v100h360V34.1L460,34.1z"/>
	<path class="st0" d="M456,38.1v92H104v-92H456 M460,34.1H100v100h360V34.1L460,34.1z"/>
	<circle class="st0" cx="116" cy="50.1" r="2"/>
	<circle class="st0" cx="116" cy="118.1" r="2"/>
	<circle class="st0" cx="444" cy="50.1" r="2"/>
	<circle class="st0" cx="444" cy="118.1" r="2"/>
	<path class="st0" d="M450,44.1v80H110v-80H450 M452,42.1H108v84h344V42.1L452,42.1z"/>
	<path id="wm_x5F_logo_1_" class="st0" d="M173.6,71.3L169,90h-0.1l-5-18.7h-7.1l-5,18.7h-0.1l-4.4-18.7H140l8,28h6.7l5.5-19h0.1
		l5.5,19h6.7l8-28H173.6z M205.1,74.5c-1.4-1.3-3-2.2-4.9-2.9c-1.9-0.7-3.9-1-6.1-1c-2.2,0-4.2,0.3-6.1,1c-1.9,0.7-3.5,1.7-4.8,2.9
		c-1.4,1.3-2.4,2.8-3.2,4.6c-0.8,1.8-1.1,3.8-1.1,6.1c0,2.2,0.4,4.2,1.1,6.1c0.8,1.8,1.8,3.4,3.2,4.7c1.4,1.3,3,2.3,4.8,3
		c1.9,0.7,3.9,1.1,6.1,1.1c2.2,0,4.2-0.4,6.1-1.1c1.9-0.7,3.5-1.7,4.9-3c1.4-1.3,2.4-2.9,3.2-4.7c0.8-1.8,1.1-3.9,1.1-6.1
		c0-2.2-0.4-4.3-1.1-6.1C207.5,77.3,206.4,75.8,205.1,74.5z M201.6,88.7c-0.4,1.1-1,2-1.7,2.8c-0.7,0.8-1.6,1.4-2.5,1.8
		c-1,0.4-2.1,0.7-3.2,0.7s-2.3-0.2-3.2-0.7c-1-0.4-1.8-1-2.5-1.8c-0.7-0.8-1.2-1.7-1.6-2.8c-0.4-1.1-0.6-2.2-0.6-3.5
		c0-1.2,0.2-2.4,0.6-3.4c0.4-1.1,0.9-2,1.6-2.7c0.7-0.8,1.6-1.3,2.5-1.8c1-0.4,2.1-0.7,3.2-0.7s2.3,0.2,3.3,0.7s1.8,1,2.5,1.8
		c0.7,0.8,1.2,1.7,1.6,2.7c0.4,1.1,0.6,2.2,0.6,3.4C202.1,86.5,202,87.7,201.6,88.7z M229.7,89.6h-0.1l-11.3-18.3h-7.7v28h6.6
		L217,81h0.1l11.3,18.3h7.7v-28h-6.6L229.7,89.6z M258.8,74.3c-1.5-1.1-3.2-1.8-5.2-2.3c-1.9-0.5-3.9-0.7-5.9-0.7h-10.1v28h10.5
		c1.9,0,3.8-0.3,5.7-0.8c1.9-0.5,3.6-1.4,5.1-2.5c1.5-1.1,2.7-2.6,3.6-4.4s1.4-3.9,1.4-6.4c0-2.6-0.5-4.9-1.4-6.7
		C261.6,76.8,260.3,75.4,258.8,74.3z M256,89.2c-0.5,1.1-1.2,1.9-2.1,2.5c-0.9,0.6-1.8,1.1-3,1.4c-1.1,0.3-2.3,0.4-3.5,0.4h-3.2
		V77.1h3.4c1.2,0,2.3,0.1,3.4,0.4c1.1,0.3,2.1,0.7,2.9,1.3c0.9,0.6,1.5,1.5,2.1,2.5c0.5,1,0.8,2.4,0.8,3.9
		C256.8,86.8,256.6,88.1,256,89.2z M272,87.7h11.6v-5.4H272V77h12.3v-5.7h-18.9v28h19.6v-5.8h-13V87.7z M306.6,84.6
		c1-1.3,1.5-2.9,1.5-4.8c0-1.6-0.3-3-0.9-4c-0.6-1.1-1.4-2-2.4-2.6c-1-0.7-2.2-1.1-3.4-1.4c-1.3-0.3-2.6-0.4-3.9-0.4h-10.7v28h6.6
		V88.2h2.3l6.1,11.1h7.9l-7.3-12C304.1,86.8,305.5,85.9,306.6,84.6z M301,81.6c-0.3,0.4-0.7,0.8-1.2,1c-0.5,0.2-1,0.4-1.6,0.5
		c-0.6,0.1-1.2,0.1-1.7,0.1h-3.2v-6.5h3.6c0.5,0,1,0,1.6,0.1s1,0.2,1.5,0.5c0.4,0.2,0.8,0.5,1.1,1c0.3,0.4,0.4,0.9,0.4,1.6
		C301.4,80.6,301.3,81.2,301,81.6z M327.1,89.3H327l-6.4-18H311v28h6.4l-0.2-19.8h0.1l7.1,19.8h4.8l7.3-19.8h0.1l-0.2,19.8h6.7v-28
		h-9.8L327.1,89.3z M355.6,71.3l-11.8,28h7.4l2.1-5.5h10.9l2.2,5.5h7.5l-11.6-28H355.6z M355.2,88.4l3.6-9.6l3.5,9.6H355.2z
		 M385.9,88.3h5.3v5.1c-0.6,0.3-1.3,0.5-2,0.6c-0.7,0.1-1.5,0.2-2.3,0.2c-1.4,0-2.6-0.2-3.7-0.7c-1.1-0.4-2-1-2.7-1.8
		c-0.7-0.8-1.3-1.7-1.6-2.8c-0.4-1.1-0.6-2.3-0.6-3.6c0-1.3,0.2-2.4,0.6-3.5c0.4-1.1,1-2,1.7-2.8c0.7-0.8,1.6-1.4,2.6-1.8
		c1-0.4,2.1-0.7,3.3-0.7c1.4,0,2.6,0.2,3.7,0.7c1.1,0.5,2,1.1,2.6,1.9l4.3-4.9c-1.2-1.1-2.7-2-4.6-2.7c-1.9-0.7-4-1-6.2-1
		c-2.1,0-4.1,0.3-6,1c-1.8,0.7-3.5,1.7-4.8,3c-1.4,1.3-2.4,2.8-3.2,4.7c-0.8,1.8-1.2,3.9-1.2,6.1c0,2.2,0.4,4.2,1.1,6
		c0.8,1.8,1.8,3.4,3.2,4.7c1.4,1.3,3,2.3,4.9,3c1.9,0.7,4,1.1,6.2,1.1c2.2,0,4.2-0.2,6-0.7c1.8-0.4,3.4-1,4.8-1.7V82.8h-11.6V88.3z
		 M417,84.9c-0.8-0.6-1.8-1.1-2.8-1.5c-1-0.4-2-0.7-3-1c-0.7-0.2-1.3-0.4-1.8-0.6c-0.5-0.2-1-0.4-1.4-0.7c-0.4-0.2-0.7-0.5-0.9-0.8
		c-0.2-0.3-0.3-0.7-0.3-1.2c0-0.6,0.1-1,0.4-1.4c0.3-0.4,0.6-0.6,0.9-0.9c0.4-0.2,0.8-0.4,1.2-0.5c0.5-0.1,0.9-0.1,1.4-0.1
		c0.9,0,1.8,0.2,2.7,0.7c0.9,0.4,1.7,1,2.3,1.8l4.3-4.6c-1.2-1.1-2.7-2-4.3-2.6c-1.7-0.6-3.3-0.9-4.9-0.9c-1.3,0-2.6,0.2-3.9,0.5
		c-1.3,0.3-2.5,0.9-3.5,1.6c-1,0.7-1.9,1.6-2.5,2.7c-0.6,1.1-1,2.4-1,4c0,1.3,0.2,2.3,0.6,3.2c0.4,0.9,1,1.6,1.6,2.3
		c0.7,0.6,1.4,1.1,2.3,1.5c0.9,0.4,1.7,0.7,2.6,1c0.9,0.3,1.7,0.6,2.5,0.8c0.7,0.3,1.3,0.5,1.8,0.8c0.5,0.3,0.9,0.6,1.1,1
		c0.3,0.4,0.4,0.8,0.4,1.3c0,0.6-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,1s-0.8,0.4-1.2,0.5c-0.5,0.1-1,0.2-1.5,0.2
		c-1.1,0-2.2-0.3-3.3-0.9c-1.1-0.6-2-1.3-2.7-2.1l-4.4,4.5c1.2,1.3,2.8,2.3,4.7,3c1.9,0.7,3.8,1,5.8,1c1.4,0,2.7-0.2,4-0.6
		c1.3-0.4,2.4-0.9,3.4-1.7c1-0.8,1.8-1.7,2.4-2.9c0.6-1.2,0.9-2.6,0.9-4.2c0-1.4-0.3-2.6-0.8-3.5C418.6,86.3,417.9,85.5,417,84.9z"
		/>
</g>
<g id="bolt">
	<path id="lightning" class="st2" d="M669.9,170.6c12.7,1.8,24.3,3.5,37.3,5.4c-19.8,25.7-39.3,50.9-59.3,76.8
		c7.6,0.8,14.3,1.4,22.2,2.2c-25.4,36.7-50.3,72.6-75.1,108.5c-0.3-0.2-0.6-0.4-0.9-0.6c16.2-29.4,32.5-58.8,49-88.9
		c-10.1-1.4-19.5-2.7-29.8-4.2c13.8-24.7,27.3-48.8,41.1-73.5c-9.7-1.2-18.6-2.3-28.1-3.5c0.6-1.5,1-2.8,1.6-3.9
		C647.3,154,726.7,39,746.2,4c1.3-2.3,2.3-4.4,5.7-4c13.5,1.8,27.1,3.3,40.6,5c0.7,0.1,1.4,0.5,2.9,1
		C773.7,34.1,692.1,141.9,669.9,170.6z"/>
</g>
</svg>

  



</div>

<!--   
<div id="buttons">
<a class="contact button button--moema" href="#contact">Contact</a>
<a class="home button button--moema" href="#home">Home</a>
</div>
-->

</ul>
</div>
</div>
</div>
    


</body>
</html>
              
            
!

CSS

              
                #container {
    position: relative;
    width: 800px;
    height: 600px;
    margin: 0 auto;
    text-align: center;
    display: block;
    padding-top: 5%;
}

svg{
  margin: 0 auto;
}

a {
    font-family: arial, sans-serif;
    color: #0b87d5;
    text-decoration: none;
}

h1 {
   font-family: arial, sans-serif;
    font-size: 30px;
}


p {
    font-family: arial, sans-serif;
    font-size: 18px;
    color: #2c3739;
    text-align: center;
    padding-top: 20px;
}



#curtains {
    -webkit-animation-name: curtains; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-delay:4s;
    animation-name: curtains;
    animation-duration: 1s;
    animation-delay:4s;
}

@keyframes curtains {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-263px);}
}

@-webkit-keyframes curtains {
    0% {-webkit-transform: translateX(0px);}
    100% {-webkit-transform: translateX(-263px);}
}

#msg {
    position: absolute;
    width: 310px;
    height: 220px;
    margin-top: 240px;
    padding: 30px;
    -webkit-animation-name: message; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.2s; Chrome, Safari, Opera */
    animation-name: message;
    animation-duration: 0.2s;
    animation-delay:3s;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    opacity: 0;
    transform-origin: left 80%;
    -webkit-transform-origin: left 80%;
    margin-left: 412px;
}

@keyframes message {
      0% {opacity: 1;  transform: scale(0,0); }
    100% { opacity: 1; transform: scale(1,1);}
}

@-webkit-keyframes message {
      0% {opacity: 1; -webkit-transform: scale(0,0); }
    100% { opacity: 1; -webkit-transform: scale(1,1); }
}


.bubble 
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #2c3739 solid 4px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 173px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 18px 18px 18px 0;
border-color: transparent #2c3739;
display: block;
width: 0;
z-index: 0;
left: -22px;
top: 170px;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0);
      -webkit-animation-fill-mode: forwards;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-fill-mode: forwards;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
     -webkit-animation-fill-mode: forwards;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 1, 70deg);
    -webkit-animation-fill-mode: forwards;
  }
}

@keyframes hinge {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
  }
    
  100% {
    transform: rotate3d(0, 0, 1, 70deg);
    animation-fill-mode: forwards;
  }
}

#sign {
    -webkit-animation: hinge 3s;
    animation-name: hinge 3s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    display: inline-block;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

#bolt {
    -webkit-animation: fadeInRight 0.2s;
    animation-name: fadeInRight 0.2s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    display: inline-block;
    opacity:0;
}

@-webkit-keyframes lightning {
    0%, 10%, 20%, 30% {
    opacity: 0.3;
  }
    
    5%, 15%, 25%  {
    opacity: 1;
    }
    
    31%, 100% {
    opacity:0;
    }
}

@keyframes lightning {
    0%, 10%, 20%, 30% {
    opacity: 0.3;
  }
    
    5%, 15%, 25% {
    opacity: 1;
    }
    
    31%, 100% {
    opacity:0;
    }
}

#lightning {
    -webkit-animation: lightning 1s 2;
    animation-name: lightning 1s 2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    display: inline-block;
}



@-webkit-keyframes rotateOut {
    to {
    -webkit-transform: rotate3d(0, 0, 1, -150deg);
    transform: rotate3d(0, 0, 1, -150deg);
  }
}

@keyframes rotateOut {
to {

    -webkit-transform: rotate3d(0, 0, 1, -150deg);
    transform: rotate3d(0, 0, 1, -150deg);
  }
}

#hipster {
    -webkit-animation: rotateOut 0.5s;
    animation-name: rotateOut 0.5s;
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform-origin: 50% 60%;
    transform-origin: 50% 60%;
}

@-webkit-keyframes popin {
0% { -webkit-transform: scale(0.1); opacity: 0; }
50% { -webkit-transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(2.2); opacity: 1; }
}

@keyframes popin {
0% { transform: scale(0.1); opacity: 0;}
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.2); opacity: 1; }
}

#star1, #star2, #star3, #star4, #star5, #star6 {
    opacity: 0;
    -webkit-animation-name: popin;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-transform-origin: center center;
    animation-name: popin;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform-origin: center center;
}

#star1 {
    animation-delay: 2.9s;
    -webkit-animation-delay: 2.9s;
}

#star2 {
    animation-delay: 2.6s;
    -webkit-animation-delay: 2.6s;
}

#star3 {
    animation-delay: 2.3s;
    -webkit-animation-delay: 2.3s;
}


#star4 {
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s;
}


#star5 {
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
}

#star6 {
    animation-delay: 3.8s;
    -webkit-animation-delay: 3.8s;
}


              
            
!

JS

              
                
              
            
!
999px

Console