css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="pl-PL">
<html>

		</div>
	<head>
<script src="jawa.js"></script>;
	<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<title>Poradnia psychiczna</title>
		<div id="header">
		</div>

	</head>
	<body id="glowka" class="tlo"><div id="tlo">
<div id="caly">
<div class="left">
<div id="acdnmenu">
<ul>
	<li>Strona Glówna
	<ul>
		<li>Psychoterapia
		<ul>
			<li><a href="?0">Komu Pomagamy?</a></li>
			<li><a href="accordion-menu">Jak pracujemy?</a></li>
			<li><a href="?1">Konsultacja i sesja psychoterapi</a></li>
            <li><a href="?1">Grupa Terapeutyczna</a></li>
            <li><a href="?1">Regulamin</a></li>
            <li><a href="?1">Cennik</a></li>
		</ul>
		</li>
		
	</ul>
	</li>
	<li>Zespól Orodka
	<ul style="background: transparent url('2.jpg') no-repeat 160px bottom;">
		<li><a href="?3">dr Monika Nosowskat</a></li>
        <li><a href="?3">mgr Adam Solek</a></li>
        <li><a href="?3">mgr Monika Semczuk-Solek</a></li>
        <li><a href="?3">mgr Janusz Moczydlowski</a></li>
        <li><a href="?3">mgr Joanna Dutkowska</a></li>
        <li><a href="?3">mgr Tomasz Kloc</a></a></li>
		<ul>
			<li><a href="?4">How-To Resources</a></li>
			<li><a href="?5">Product Support</a></li>
		</ul>
		</li>
		<li><a href="?6">Opening Time</a></li>
	</ul>
	</li>
	<li id="li3">Technical Solutions
	<ul>
		<li><a href="?b">Javascript Code</a></li>
		<li><a href="?c">CSS Code</a></li>
		<li><img alt="" src="3.jpg" style="width: 190px; height: 84px;" /></li>
	</ul>
	</li>
</ul>
</div>
</div>

<div class="right">
  <ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
		<div class="slide">
			<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>
</div>

<div id="footer">
<form name="a">
<p align="center"><input name="b" type="text" /></p>
</form>
<script type="text/javascript">// <![CDATA[
			function zegar()
			{
				czas = new Date ();
				
				godz = czas.getHours();
				min = czas.getMinutes();
				sek = czas.getSeconds();
				if(godz < 10)
				{
				godz = "0" + godz
				}
				if(min < 10)
				{
				min = "0" + min
				}
				if(sek < 10)
				{
				sek = "0" + sek
				}
				
				
				document.a.b.value= godz + " : " + min + " : " + sek;
				setTimeout("zegar()", 900);
			}
				
				
				
// ]]></script></div>
</div>
</div>
</body>
</html>
            
          
!
            
              .tlo{
background-image:url("http://strony-www-za-darmo.pl/swzd/uploads/images/abstrakcyjnla.jpg");
background-repeat:repeat;
}
#glowka{
padding-left:0px;
padding-right:0px;
min-width:1000px;
}
.tlo{
background-image:url("drzewo.jpeg");
background-repeat:repeat;
}
#glowka{
padding-left:0px;
padding-right:0px;
min-width:1000px;
}

#caly{
padding-left:200px;
padding-right:200px;
}

div {
	border-radius: 2px;
}

#header {
	z-index: 1;
	position: center;
	width: 90%;
	
	height: 200px;
	background-image:url("http://www.hotelbonifacio.pl/sites/default/files/imagecache/slideshow_img/tlo_drzewa_1920x550.jpg");
	background-position:center;
	background-repeat:no-repeat;
	width:90%;
	margin-bottom: 20px;
	margin-top: 50px;

}


.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 20%;
	height: 100%;
	background-color/transparent;
	margin-bottom: 20px;
  margin-left:-1%;
	
}

.right {
	position: relative;
	float: right;
	margin-top: 50px;
	width: 78%;
	height:100%;
	min-height: 450px;
	background-color/transparent;
	margin-bottom: 10px;
    margin-left:-2%;
}

#footer {
	position: relative;
	height: 50px;
	width: 1440!important;
	background-image: url("http://klikaj.wen.ru/tlo3.jpg");
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	<form name="a">
			<input type="text" name="b"/>
			</form>
		<script>
			function zegar()
			{
				czas = new Date ();
				
				godz = czas.getHours();
				min = czas.getMinutes();
				sek = czas.getSeconds();
				
				document.a.b.value= godz + " : " + min + " : " + sek;
				setTimeout("zegar()", 900);
				}
				</script> >
}

#footer p {
	position: relative;
}

/* ##### Top level items #####*/
#acdnmenu 
{
    /* Note about height: 
    Set "height:auto;" if flexible height is required. 
    A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
    height: 300px;
    width: 100%; /*or pixel value*/
    font-size:0;
}


#acdnmenu ul.top
{
	padding-left:0;
    border:1px solid #0B4E78;
    background:none;
  background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
#acdnmenu div.heading, #acdnmenu a.link
{
    padding:8px; padding-left:32px;
    text-align:left;
    font:normal 12px Verdana;
    color:#BBB; 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) left top;
    text-decoration:none;
    outline:none; 
}
#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link
{
    color:#DDD;
    font-weight:normal;
    text-decoration:none;   
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover
{
    color:#FFF;
    text-decoration:underline;   
  
  
}

/* arrow image for the top headings */
#acdnmenu div.arrowImage {
    width:12px;
    height:12px;
    top:9px;
    right:6px; left:auto; /*Setting "left:8px;right:auto;" will position the arrow image to the left*/
    background-image:url(arrows.gif);
    background-position:0 0;
  
}

#acdnmenu div.current div.arrowImage {
    background-position:0 -12px;
  
}

#acdnmenu li.separator
{
    border-top:1px solid black;
    border-bottom:1px solid #0B4E78; 
  
  
}


/* ##### Sub level items #####*/
#acdnmenu ul.sub
{
	padding-left:14px; /*This determines the hierarchical offset*/ 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% -30px;/**/
}
#acdnmenu ul.sub ul.sub
{
    background:none; 
  
  
}

#acdnmenu ul.sub div.heading
{
    text-align:left;
    font:normal 12px Arial;
    padding:5px; padding-left:20px;
    color:#BBB;
    background:none; 
}
#acdnmenu ul.sub div.heading a
{
    color:#BBB;
  
}

#acdnmenu ul.sub div.current
{
    color:#DDD;
    background:none; 
}

#acdnmenu ul.sub a.link
{
    font:normal 11px Arial;
    color:#BBB;
    padding:5px; padding-left:20px;
    text-decoration:none;
    background:none; 
}

#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, #acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current
{
    color:#FFF;
    text-decoration:underline;
    background:none; 
}


#acdnmenu ul.sub div.arrowImage {
    width:12px;
    height:12px;
    top:6px;
    left:4px;
    background-image:url(arrows.gif);
    background-position:0 -24px;
}
#acdnmenu ul.sub div.current div.arrowImage {
    background-position:0 -36px;
  
}



/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu,  #acdnmenu ul
{
    display:block;
    font-size:0px;
    line-height:0px;
  
}
#acdnmenu li {font-size:12px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;} 
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}

#acdnmenu ul
{
	position:relative;/*!*/
	overflow:hidden;
	padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}

#acdnmenu div.heading, #acdnmenu div.current
{
	position:relative;
    cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}
 

                                  /*slajder*/
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: -1%;
    height: 420px;
    display: block;;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 100px;
    height: 107%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}



#caly{
padding-left:200px;
padding-right:200px;
}

div {
	border-radius: 2px;
}

#header {
	z-index: 1;
	position: center;
	width: 100%;
	
	height: 1%;
	background-image:url("http://strony-www-za-darmo.pl/swzd/uploads/images/abstrakcyjne-tla.jpg");
	background-position:center;
	background-repeat:no-repeat;
	width:90%;
	margin-bottom: 20px;
	margin-top:

}


.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 20%;
	height: 100%;
	background-color/transparent;
	margin-bottom: 20px;
  margin-left:-1%;
	
}

.right {
	position: relative;
	float: right;
	margin-top: 50px;
	width: 78%;
	height:100%;
	min-height: 450px;
	background-color/transparent;
	margin-bottom: 10px;
    margin-left:-2%;
}

#footer {
	position: relative;
	height: 50px;
	width: 1440!important;
	background-image: url("http://klikaj.wen.ru/tlo3.jpg");
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	<form name="a">
			<input type="text" name="b"/>
			</form>
		<script>
			function zegar()
			{
				czas = new Date ();
				
				godz = czas.getHours();
				min = czas.getMinutes();
				sek = czas.getSeconds();
				
				document.a.b.value= godz + " : " + min + " : " + sek;
				setTimeout("zegar()", 900);
				}
				</script> >
}

#footer p {
	position: relative;
}

/* ##### Top level items #####*/
#acdnmenu 
{
    /* Note about height: 
    Set "height:auto;" if flexible height is required. 
    A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
    height: 300px;
    width: 100%; /*or pixel value*/
    font-size:0;
}


#acdnmenu ul.top
{
	padding-left:0;
    border:1px solid #0B4E78;
    background:none;
  background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
#acdnmenu div.heading, #acdnmenu a.link
{
    padding:8px; padding-left:32px;
    text-align:left;
    font:normal 12px Verdana;
    color:#BBB; 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) left top;
    text-decoration:none;
    outline:none; 
}
#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link
{
    color:#DDD;
    font-weight:normal;
    text-decoration:none;   
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover
{
    color:#FFF;
    text-decoration:underline;   
  
  
}

/* arrow image for the top headings */
#acdnmenu div.arrowImage {
    width:12px;
    height:12px;
    top:9px;
    right:6px; left:auto; /*Setting "left:8px;right:auto;" will position the arrow image to the left*/
    background-image:url(arrows.gif);
    background-position:0 0;
  
}

#acdnmenu div.current div.arrowImage {
    background-position:0 -12px;
  
}

#acdnmenu li.separator
{
    border-top:1px solid black;
    border-bottom:1px solid #0B4E78; 
  
  
}


/* ##### Sub level items #####*/
#acdnmenu ul.sub
{
	padding-left:14px; /*This determines the hierarchical offset*/ 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% -30px;/**/
}
#acdnmenu ul.sub ul.sub
{
    background:none; 
  
  
}

#acdnmenu ul.sub div.heading
{
    text-align:left;
    font:normal 12px Arial;
    padding:5px; padding-left:20px;
    color:#BBB;
    background:none; 
}
#acdnmenu ul.sub div.heading a
{
    color:#BBB;
  
}

#acdnmenu ul.sub div.current
{
    color:#DDD;
    background:none; 
}

#acdnmenu ul.sub a.link
{
    font:normal 11px Arial;
    color:#BBB;
    padding:5px; padding-left:20px;
    text-decoration:none;
    background:none; 
}

#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, #acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current
{
    color:#FFF;
    text-decoration:underline;
    background:none; 
}


#acdnmenu ul.sub div.arrowImage {
    width:12px;
    height:12px;
    top:6px;
    left:4px;
    background-image:url(arrows.gif);
    background-position:0 -24px;
}
#acdnmenu ul.sub div.current div.arrowImage {
    background-position:0 -36px;
  
}



/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu,  #acdnmenu ul
{
    display:block;
    font-size:0px;
    line-height:0px;
  
}
#acdnmenu li {font-size:12px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;} 
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}

#acdnmenu ul
{
	position:relative;/*!*/
	overflow:hidden;
	padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}

#acdnmenu div.heading, #acdnmenu div.current
{
	position:relative;
    cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}
 

                                  /*slajder*/
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: -1%;
    height: 420px;
    display: block;;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 100px;
    height: 107%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}



            
          
!
            
              var amenuOptions =
{
    menuId: "acdnmenu",
    linkIdToMenuHtml: null,
    expand: "single",
    license: "2a8e9"
};

var amenu = new McAcdnMenu(amenuOptions);

/* Accordion Menu v2013.3.18. Copyright www.menucool.com */
function McAcdnMenu(s){var k=function(a,b){return a.getElementsByTagName(b)},h="className",N=0,v="firstChild",j=function(b,c){var a=c==0?b.nextSibling:b[v];while(a&&a.nodeType!=1)a=a.nextSibling;return a},a="length",u="attachEvent",y="addEventListener",n=function(e){var b=e.childNodes,d=[];if(b)for(var c=0,f=b[a];c<f;c++)b[c].nodeType==1&&d.push(b[c]);return d},o="nodeName",cb=function(c){var b=[],d=c[a];while(d--)b.push(String.fromCharCode(c[d]));return b.join("")},b="parentNode",d="style",X=function(b,d){var c=b[a];while(c--)if(b[c]===d)return true;return false},c="offsetHeight",r="insertBefore",l=function(b,a){return X(b[h].split(" "),a)},D="setAttribute",p=function(a,b,c){if(!l(a,b))if(a[h]=="")a[h]=b;else if(c)a[h]=b+" "+a[h];else a[h]+=" "+b},i="replace",f="height",U=function(a,b){var c=new RegExp("(^| )"+b+"( |$)");a[h]=a[h][i](c,"$1");a[h]=a[h][i](/ $/,"")},t=null,m,e,M=document,q="createElement",A="getElementById",bb=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],z,H,ab=[/(?:.*\.)?(\w)([\w\-])[^.]*(\w)\.[^.]+$/,/.*([\w\-])\.(\w)(\w)\.[^.]+$/,/^(?:.*\.)?(\w)(\w)\.[^.]+$/,/.*([\w\-])([\w\-])\.com\.[^.]+$/,/^(\w)[^.]*(\w)$/],O=function(a){return a[i](/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},x=function(e,b,f){var d=[];if(f&&((new Date).getTime()-500>H||N))return 1;for(var c=0;c<e[a];c++)d[d[a]]=String.fromCharCode(e.charCodeAt(c)-(b&&b>7?b:3));return d.join("")},R=function(f,d){var e=function(b){for(var d=b.substr(0,b[a]-1),f=b.substr(b[a]-1,1),e="",c=0;c<d[a];c++)e+=d.charCodeAt(c)-f;return unescape(e)},b=O(document.domain)+Math.random(),c=e(b);z="%66%75%6E%63%74%69%6F%6E%20%71%51%28%73%2C%6B%29%7B%76%61%72%20%72%3D%27%27%3B%66%6F%72%28%76%61%72%20%69%";if(c[a]==39)try{b=(new Function("$","_",x(z))).apply(this,[c,d]);z=b}catch(g){}},g=function(a,b){return b?M[a](b):M[a]},Q=function(){m={a:s.license||"5432",b:s.menuId,c:s.linkIdToMenuHtml,e:s.expand,g:s.linkIdToMenuHtml}},S=function(n){for(var f=-1,h=-1,j=g("location").href.toLowerCase()[i]("www.","")[i](/([\-\[\].$()*+?])/g,"\\$1")+"$",l=new RegExp(j,"i"),d,e=k(n,x("d",0,true)),c=0;c<e[a];c++)if(e[c].href){d=e[c].href[i]("www.","").match(l);if(d&&d[0][a]>=h){f=c;h=d[0][a]}}if(f==-1){j=g("location").href.toLowerCase()[i]("www.","")[i](/([\-\[\].$()*+])/g,"\\$1")[i](/([?&#])([^?&#]+)/g,"($1$2)?")[i](/\(\?/g,"(\\?");l=new RegExp(j,"i");for(c=0;c<e[a];c++)if(e[c].href){d=e[c].href[i]("www.","").match(l);if(d&&d[0][a]>h){f=c;h=d[0][a]}}}if(f!=-1){t=e[f];(new Function("a","b","c","d","e","f","g","h","i","j","k",function(d){for(var b=[],c=0,e=d[a];c<e;c++)b[b[a]]=String.fromCharCode(d.charCodeAt(c)-4);return b.join("")}("n,o0+gyvvirx+04-?zev$rAQexl_g,+yhukvt+-a,-0xA4?mj,r@25-xAm?ipwi$mj,r@259-xAm2ri|xWmfpmrk?ipwi$mj,r@26**m_fa2rshiReqi%A+FSH]+-xAm_fa?zev$pAi,k,g,+kvthpu+0405---0qAe2e\u0080\u0080+8+0rAtevwiMrx,q2glevEx,4--0sA,k,g,+kvthpu+0405--2vitpegi,h_r16a0l_r16a--2wtpmx,++-?mj,%p\u0080\u0080p2wyfwxvmrk,406-AA+ps+\u0080\u0080e2eAAj,r/+e+0s--\u0081ipwi$mj,x-x_fa2mrwivxFijsvi,k,g,+jylh{l[l{Uvkl+0405-0g,+Hjjvykpvu'Tlu|'W|yjohzl'Yltpukly+0405--0x-?"))).apply(this,[m,b,x,ab,O,Y,g,bb,n[b],p,t])}};function K(i){var m=k(i,"ul");if(m[a]){var f=i.childNodes,s=m[0];p(s,"sub");var c=g(q,"div");c[h]="heading";for(var b=f[a]-1;b>-1;b--)if(f[b][o]!="UL"){if(f[b][o]=="A"){var l=j(f[b],0);l&&l[D]("c","2")}c[r](f[b],c[v])}var t=g(q,"div");t[h]="arrowImage";c[r](t,c[v]);for(var u=n(s),b=0;b<u[a];b++)K(u[b],"sub");i[r](c,i[v])}else{var e=n(i);if(e&&e[a]==1&&e[0][o]=="A"){p(e[0],"link",1);e[0][d].display="block"}}}var Y=function(d,b){var c=function(c){var b=c.charCodeAt(0).toString();return b.substring(b[a]-1)};return d+c(b[parseInt(x("5"))])+b[1]+c(b[0])};function V(i){p(i,"top",0);var e=n(i),b=e[a];while(b--&&b>0){var c=g(q,"li");c[h]="separator";c[d][f]="0px";c[d].overflow="hidden";i[r](c,e[b])}for(var b=0;b<e[a];b++)K(e[b],"top")}var I=function(a){this.a=null;this.H=null;this.Q=null;this.b=null;this.h(a)},B=function(a){return a[b][b].id==m.b?a:a[b][b]?B(a[b]):null};I.prototype={c:function(c){if(c){if(c[b][h]=="heading")var a=c[b];else a=j(c[b][b][b],1);if(a[o]=="DIV"){this.l(a,1);j(a,0)[D]("c","1");this.c(a)}}},d:function(a){R(a,m.a)},f:function(d,r,i,p){this.l(d,1);var s=this.H&&l(d[b][b],"top")?this.H:this.m(r),f=null;if(i){f=n(d[b][b]);for(var g=0;g<f[a];g++)if(f[g][o]=="LI"){var m=j(f[g],1);m&&m!=d&&this.l(m,0)}}if(p){var q=B(d.parentNode);if(i)for(var k=n(this.b),c,h=0;h<k[a];h++){c=j(k[h],1);c&&l(c,"heading")&&this.l(c,k[h]==q)}else{c=j(q,1);c&&l(c,"heading")&&this.l(c,1)}this.n(d[b][b])}this.a=setInterval(function(){e.k(r,s,true,f,i&&p)},15)},g:function(a,b){this.l(a,0);this.a=setInterval(function(){e.k(b,0,false,null,0)},15)},h:function(c){var b=k(c,"ul");if(b[a])b=b[0];else return;V(b);this.d(b);S(b);this.c(t);this.i(c);this.b=b;b[d].visibility="visible"},i:function(y){var q=j(y,1);if(m.e=="multiple")this.Q=0;else if(m.e=="full")this.Q=2;else this.Q=1;var v=0,u=0;if(this.Q==2){var z=0,g,r=n(q),h;if(y[c]==q[c])u="auto";else u=y[c];for(var i=0;i<r[a];i++){h=k(r[i],"ul")[0];if(!h)continue;if(z<h[c])z=h[c];if(h.getAttribute("c")=="1")g=h;h[d][f]="0"}if(u=="auto")v=q[c]+z;else if(u>q[c])v=u;else v=q[c];y[d][f]=v+"px";this.H=v-q[c];if(this.H<1)this.H=1;for(var i=0;i<r[a];i++){h=k(r[i],"ul")[0];if(!h)continue;if(this.H<this.m(h))h[d].overflowY="auto"}if(g)g[d][f]=this.H+"px";else for(i=0;i<r[a];i++){g=k(r[i],"ul");if(g[a]){g=g[0];g[D]("c","1");g[d][f]=this.H+"px";p(j(g[b],1),"current",0);t=g[b];break}}}else{var w=k(q,"ul"),s=w[a];while(s--)if(w[s].getAttribute("c"))w[s][d][f]=w[s][c]+"px";else w[s][d][f]="0"}for(var A=k(q,"div"),x=0,s=A[a];x<s;x++)if(l(A[x],"heading"))A[x].onclick=function(){clearInterval(e.a);e.a=null;var a=j(this,0);if(!a||a[o]!="UL")return;if(a[c]<1){var d=l(this[b][b],"top");e.f(this,a,e.Q==1||e.Q==2&&d,0)}else e.g(this,a)}},j:function(g,e){var a=g[b][b];if(this.Q==2&&l(a[b][b],"top"))return;if(!l(a,"top")){a[d][f]=a[c]+e+"px";this.j(a,e)}},k:function(j,l,u,o,t){var g=j[c],p=true,b,h;if(o)for(var s=0;s<o[a];s++){b=k(o[s],"ul");if(b[a])b=b[0];if(b&&b!=j)if(b[c]>0){p=false;h=Math.ceil(b[c]/3);if(h>b[c])h=b[c];b[d][f]=b[c]-h+"px";this.j(b,-h)}}if(t)for(var v=B(j.parentNode),q=n(this.b),r,m=0;m<q[a];m++)if(q[m]!=v){r=k(q[m],"ul");if(r[a]){b=r[0];if(b[c]>0){p=false;h=Math.ceil(b[c]/3);if(h>b[c])h=b[c];b[d][f]=b[c]-h+"px";this.j(b,-h)}}}var i;if(u){if(g>=l&&p){j[d][f]=l+"px";clearInterval(e.a);e.a=null;return}i=Math.ceil((l-g)/3);if(g+i>l)i=l-g;j[d][f]=g+i+"px";this.j(j,i)}else{if(g<=0){j[d][f]="0";clearInterval(e.a);e.a=null;return}i=Math.ceil((g-l)/3);if(g-i<0)i=g;j[d][f]=g-i+"px";this.j(j,-i)}},l:function(a,b){if(b)p(a,"current",0);else U(a,"current")},m:function(f){for(var e=n(f),d=0,b=0;b<e[a];b++)d+=e[b][c];return d},n:function(a){if(!l(a,"top")){a[d][f]=this.m(a)+"px";this.n(a[b][b])}}};var P=function(c){var a;if(window.XMLHttpRequest)a=new XMLHttpRequest;else a=new ActiveXObject("Microsoft.XMLHTTP");a.onreadystatechange=function(){if(a.readyState==4&&a.status==200){var e=a.responseText,h=/^[\s\S]*<body[^>]*>([\s\S]+)<\/body>[\s\S]*$/i;if(h.test(e))e=e[i](h,"$1");e=e[i](/^\s+|\s+$/g,"");var f=g(q,"div");f[d].padding="0";f[d].margin="0";c[b][r](f,c);f.innerHTML=e;c[d].display="none";G()}};a.open("GET",c.href,true);a.send()},G=function(){var a;if(typeof console!=="undefined"&&typeof console.log==="function"){a=console.log;console.log=function(){a.call(this,++N,arguments)}}var b=g(A,m.b);if(b)e=new I(b);if(a)console.log=a},F=function(){H=(new Date).getTime();if(m.c){var a=g(A,m.c);if(a)P(a);else alert('<a id="'+m.e+'"> not found.')}else G()},W=function(d){var b=false;function a(){if(b)return;b=true;setTimeout(d,4)}if(g("addEventListener"))document[y]("DOMContentLoaded",a,false);else if(g(u)){try{var e=window.frameElement!=null}catch(f){}if(g("documentElement").doScroll&&!e){function c(){if(b)return;try{g("documentElement").doScroll("left");a()}catch(d){setTimeout(c,10)}}c()}document[u]("onreadystatechange",function(){document.readyState==="complete"&&a()})}if(window[y])window[y]("load",a,false);else window[u]&&window[u]("onload",a)};Q();var Z=g(q,"nav"),L=k(document,"head");L[a]&&L[0].appendChild(Z);W(F);var T=function(l){for(var h=n(e.b),b,g=0;g<h[a];g++){b=k(h[g],"ul");if(b[a]&&b[0][c]>0){var i=j(h[g],1);if(l)e.g(i,b[0]);else b[0][d][f]="0";e.l(i,0);break}}},C=function(a,d){if(e&&e.b&&e.a==null)if(a){var f=j(a,1);if(l(f,"heading"))var c=f;else c=j(f[b][b][b],1);c[o]=="DIV"&&e.f(c,j(c,0),d,1)}else a===0&&T(d);else setTimeout(function(){C(a,d)},50)},w=0,J=function(a){if(e)C(0,a);else if(w<10){w++;setTimeout(function(){J(a)},20)}},E=function(c,b){var a=g(A,c);if(a&&a[o]=="LI")C(a,b);else if(w<10){w++;setTimeout(function(){E(c,b)},20)}};return{init:F,open:function(L_li_id,L_closeOthers){E(L_li_id,L_closeOthers)},close:function(L_slide){J(L_slide)}}}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console