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.

            
              <html lang="de">

<head>
  <link rel="stylesheet" type="text/css" href="https://extern.logicbomb.eu/logd/Scripts/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="https://extern.logicbomb.eu/logd/Scripts/css/component.css" />
  <link href="https://sheratan-logd.com/newstyle.css?v=1.011" rel="stylesheet" type="text/css">
  <link href="https://sheratan-logd.com/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <script src="https://extern.logicbomb.eu/logd/Scripts/js/modernizr.custom.js"></script>
</head>

<body>
  <div class="container">
    <div id="splitlayout" class="splitlayout">
      <div class="intro">
        <div class="side side-left">
          <div class="intro-content">
            <div class="profile">
              <h1><span class="c104">Chi</span><span class="c37">r&eacute; </span><span class="c104">Ki</span><span class="c34">ba</span><span class="c24">ra</span><span class="c25">shi</span></h1>
              <img src="https://extern.logicbomb.eu/logd/Chire/test.gif" alt="profile1" />
              <p>
                <span style="font-size: 11px;">Klick mich</span>
              </p>
            </div>
          </div>
          <div class="overlay">
          </div>
        </div>
        <div class="side side-right">
          <div class="intro-content">
            <div class="profile">
              <h1><span class="c104">Ch</span><span class="c37">io </span><span class="c104">Ki</span><span class="c34">ba</span><span class="c24">ra</span><span class="c25">shi</span></h1>
              <img src="https://extern.logicbomb.eu/logd/Chire/chire_w.jpg" alt="profile2" />
              <p>
                <span style="font-size: 11px;">Klick mich, aber bitte nicht zu fest...</span>
              </p>
            </div>
          </div>
          <div class="overlay">
          </div>
        </div>
      </div>
      <!-- /intro -->
      <div class="page page-right">
        <div class="page-inner">
          <section>
            <h2>Steckbrief</h2>
            <table style="height: 197px;" border="1" width="626">
              <tbody>
                <tr>
                  <td><span style="color: #e0e0e0;">Name:</span></td>
                  <td><span class="c104">Ch</span><span class="c37">io </span><span class="c104">Ki</span><span class="c34">ba</span><span class="c24">ra</span><span class="c25">shi</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Deckname:</span></td>
                  <td><span class="c104">Ch</span><span class="c37">io </span><span class="c104">Koh</span><span class="c34">io</span><span class="c24">do</span><span class="c25">shi</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Alter:</span></td>
                  <td><span style="text-align: center; color: #e0e0e0;">sieht nicht &auml;lter als 25 aus</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Augenfarbe:</span></td>
                  <td><span style="text-align: center; color: #e0e0e0;">Wechselnde Farben</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Haarfarbe:</span></td>
                  <td><span style="color: #e0e0e0;">blonde lange Haare,
											<br />
											ebenso ist dies die Farbe des Fells f&uuml;r Ohren und Schweif. </span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Besonder&eacute; 
											<br />
											Merkmale: </span></td>
                  <td><span class="c104">Ch</span><span class="c37">io </span><span style="color: #e0e0e0;"> tr&auml;gt meist traditionelle Roben einer Schrein-Priesterin.
											<br />
											Ebenso hat sie Ohren und einen Schweif , welcher einem Fuchs &auml;hnelt.
											<br />
											Der Schweif fallt nur in bewegung auf, da die langen blonden Haare diesen
											<br />
											meist verdecken, w&auml;hrend die Ohren einem direkt ins Augespringen,
											<br />
											obwohl Ohren und Schweif die Farbe der Haare haben. </span></td>
                </tr>
              </tbody>
            </table>
          </section>
          <section>
            <h2>Geschichte</h2>
            <p>
              Anfangs war er sehr gew&ouml;hnlich und sogar sterblich und Lebte vor Jahrtausenden sein Leben. Er war ein jemand der vor Einfallsreichtum fast schon Platzte und all seine Ideen hatten ihre Vor und Nachteile und dennoch stand er zu seinen Erfindungen.
              Doch wollte niemand wirklich etwas mit ihm zu tun haben, was daran lag das er ein intelligentes doch zerstreutes K&ouml;pfchen hatte, wodurch er in eine missliche Lage in die Andre kam, doch war dies kein Grund der ihn davon abhielt seine
              Ideen um zu setzen.
            </p>
            <p>
              Die G&ouml;tter jener Welt aus der er stammte hatten seine Werke und auch Ideen wahrgenommen und fanden das diese entlohnt werden sollten. <span class="c104">Chi</span><span class="c37">r&eacute; </span>der in diesem Moment unter einem
              Kirschbaum lag und die Bl&uuml;ten beobachtete, erhielt an dieser Stelle seine G&ouml;ttlichen Kr&auml;fte und scheinbare Unsterblichkeit ohne Vorwarnung, wodurch er sich selbst zu einem Teil der Bl&uuml;ten machte und durch die Winde wehte
              und zerstreut wurde. Jedoch was die G&ouml;tter nicht wusten hatten die D&auml;monen ihnen einen Streichspielen wollen, wodurch <span class="c104">Chi</span><span class="c37">r&eacute; </span>zu etwas anderm wurde als geplannt, denn die
              seine menschliche Form wurde ver&auml;ndert noch bevor er g&ouml;ttlich ernannt wurde.<span class="c104">Chi</span><span class="c37">r&eacute;</span> war am Anfang sehr &uuml;berrascht von dem was nun passierte und dennoch war er fasziniert
              von diesen Bl&uuml;ten das diese zu seinem Zeichen wurde und diese nun immer noch ein Teil von ihm waren.
            </p>
            <p>
              Er wurde durch die Winde getragen und landete bei den anderen G&ouml;ttern die ihn zu ihresgleichen machten und ihn zum Gott der Zerstreuung machen wolten jedoch als Sie sahen was aus ihm wurde, kam es nicht zu dem den daf&uuml;r hatte er zuviele tierische
              Eigenschaften angenommen.Seine Kr&auml;fte blieben ihm, jedoch entfernten Sie ihn von Ihrer Seite und viele Mhyten entstanden &uuml;ber <span class="c104">Chi</span><span class="c37">r&eacute;</span>, der nun auf der Welt
              wanderte. Einige Mhyten erz&auml;hlten von seiner Zeit vor den Kr&auml;ften , andere von einer Bestie die nicht mal die G&ouml;tter zu B&auml;ndigen wagten.
            </p>
            <p>
              Lange wurden diese Geschichten &uuml;berliefert und einige hatten eine Art Steckbrief &uuml;ber ihn Geschrieben und gezeichnet, so wie er einst mal aussah, jedoch geriet er in Vergessenheit, da ihn lange niemand mehr gesehen hatte.
            </p>
            <p>
              Selbst die anderen G&ouml;tter, die nun in der Welt herrschten vergaßen das es ihn gab, da sie ihn selbst nur noch f&uuml;r einen Mhytos hielten.
              <br /> Irgendwann wurde er v&ouml;llig vergessen und wachte in dieser Welt wieder auf, eine Welt die anderster als sein eigene waren, wo es mehr Wesen wir er gab.
            </p>
          </section>
          <section>
            <h2>Neue Welt, neue Regeln</h2>
            <p>
              Ewig dauerte es, doch f&uuml;r ihn war es nur ein Schlaf, bis er im hier und jetzt einer anderen Welt erwachte.
              <br /> Nichts war mehr so wie er es kannte, nicht mal er selbst war noch das was er von sich wusste.
            </p>
            <p>
              Es dauerte nicht lange bis er sich an die umst&auml;nde gew&ouml;hnt hatte, in einer Welt in der er keine Gottheit war,
              <br /> sondern so gew&ouml;hnlich war , wie es nunmal in hier war, besonderst in der Stadt Sheratan, in welcher er landete.
              <br /> Er konnte einiges schon &uuml;ber diese Welt in erfahrung bringen, so dass er nicht g&auml;nzlich aus der Masse herraus stach,
              <br /> jedoch erlag er des &ouml;ffteren mal der Versuchung, in alte Gewonheiten zu verfallen.
            </p>
            <p>
              
            </p>
            <br />
            <h2>Sein Fluch ? </h2>
            <p>
              Immer wen <span class="c104">Chi</span><span class="c37">r&eacute; </span>zu viel seiner Macht einsetzt, kommt sein Fluch durch und &auml;ndert seine Gestallt.
              <br /> Je nach dem wie viel er aufeinanderfolgent benutzt kommen nur einzelne Merkmale wie Fuchsohren oder Schweif hervor,
              <br /> jedoch wenn es zu viel war, verwandelt er sich in eine weibliche Kitsune <span class="c104">Ch</span><span class="c37">io </span>.
              <br /> Nun k&ouml;nnte man sagen das ist kein Fluch, jedoch &auml;ndert sich hierbei auch ein wenig die Pers&ouml;nlichkeit von <span class="c104">Chi</span><span class="c37">r&eacute;</span>.
            </p>
          </section>
          <section>
            <h2>Die Frau hinter dem Mann</h2>
            <img src="https://extern.logicbomb.eu/logd/Chire/chio.png" alt="chioChips" />
          </section>
          <section style="max-width: 90%;">
            <h2><span style="color: #ff0000;">OOC geblubber O.o</span></h2>
            <span style="font-size: small;"><span style="color: #ff0000;">Texte Basieren auf meine Fantasie und die Ereignisse teils auch. Ansonsten sind die Ereignisse die hier sowie im Tagebuch beschrieben sind, alles Geschehnisse di&eacute; </span>
            <span class="c66"><span class="c104">Chi</span><span class="c37">r&eacute;</span><span class="c03"><span style="color: #e00000;"> </span></span><span style="color: #e00000;">in Sheratan erlebt hat.</span></span>
            </span>
            <p>
              <span style="font-size: small;"><span style="color: #ff0000;">Also bitte, bitte , Finger weg von dem hier nieder geschriebenen , ausser du bekommst es besser hin .</span></span>
            </p>
            <p>
              <br />
              <span style="font-size: small;"><span style="color: #ff0000;">Bilder wurden von mir in den weiten des Internets gefunden und dann bearbeitet.</span></span>
            </p>
            <p>
              <span style="color: #ff0000; font-size: small;">Hauptavatar (m&auml;nnlich) wird von <span style="color: #dcdcdc;">Tom Riley</span> dargestellt. </span>
            </p>
            <p>
              <span style="color: #ff0000; font-size: small;">Hauptavatar (weiblich) wird von <span style="color: #dcdcdc;">arashi-x1999</span> dargestellt. </span>
            </p>
            <p>
              <span style="color: #ff0000; font-size: small;">Sollte ein K&uuml;nstler hier sein Bild sehen und es nicht wollen , so wird das Bild verst&auml;ndlich unverz&uuml;glich gel&ouml;scht.</span>
            </p>
          </section>
        </div>
        <!-- /page-inner -->
      </div>
      <!-- /page-right -->
      <div class="page page-left">
        <div class="page-inner">
          <section>
            <h2>Steckbrief</h2>
            <table style="height: 197px;" border="1" width="626">
              <tbody>
                <tr>
                  <td><span style="color: #e0e0e0;">Name:</span></td>
                  <td><span class="c104">Chi</span><span class="c37">r&eacute; </span><span class="c104">Ki</span><span class="c34">ba</span><span class="c24">ra</span><span class="c25">shi</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Deckname:</span></td>
                  <td><span class="c104">Chi</span><span class="c37">r&eacute; </span><span class="c104">Koh</span><span class="c34">io</span><span class="c24">do</span><span class="c25">shi</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Alter:</span></td>
                  <td><span style="text-align: center; color: #e0e0e0;">sieht nicht &auml;lter als 25 aus</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Augenfarbe:</span></td>
                  <td><span style="text-align: center; color: #e0e0e0;">Wechselnde Farben</span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Haarfarbe:</span></td>
                  <td><span style="color: #e0e0e0;">dunkel braune Haare,
											<br />
											die heller werden und
											<br />
											mit Kirschbl&uuml;ten rosa Str&auml;hnen und 
											<br />
											einer blau Violeten Str&auml;hne an der rechten Seite </span></td>
                </tr>
                <tr>
                  <td><span style="color: #e0e0e0;">Besonder&eacute; 
											<br />
											Merkmale: </span></td>
                  <td><span style="color: #e0e0e0;">Immer umgeben von Kirschbl&uuml;ten</span>
                    <br />
                    <span style="color: #e0e0e0;">Tr&auml;gt gerne Masken um sein Gesicht zu verbergen.</span>
                    <br />
                    <span style="color: #e0e0e0;">Tr&auml;gt einen M&auml;nner Kimono und ein Katana ,</span>
                    <br />
                    <span style="color: #e0e0e0;"> welche in den Farben seiner Bl&uuml;ten strahlen. </span></td>
                </tr>
              </tbody>
            </table>
          </section>
          <section>
            <h2>Geschichte</h2>
            <p>
              Anfangs war er sehr gew&ouml;hnlich und sogar sterblich und Lebte vor Jahrtausenden sein Leben. Er war ein jemand der vor Einfallsreichtum fast schon Platzte und all seine Ideen hatten ihre Vor und Nachteile und dennoch stand er zu seinen Erfindungen.
              Doch wollte niemand wirklich etwas mit ihm zu tun haben, was daran lag das er ein intelligentes doch zerstreutes K&ouml;pfchen hatte, wodurch er in eine missliche Lage in die Andre kam, doch war dies kein Grund der ihn davon abhielt seine
              Ideen um zu setzen.
            </p>
            <p>
              Die G&ouml;tter jener Welt aus der er stammte hatten seine Werke und auch Ideen wahrgenommen und fanden das diese entlohnt werden sollten. <span class="c104">Chi</span><span class="c37">r&eacute; </span>der in diesem Moment unter einem
              Kirschbaum lag und die Bl&uuml;ten beobachtete, erhielt an dieser Stelle seine G&ouml;ttlichen Kr&auml;fte und scheinbare Unsterblichkeit ohne Vorwarnung, wodurch er sich selbst zu einem Teil der Bl&uuml;ten machte und durch die Winde wehte
              und zerstreut wurde. Jedoch was die G&ouml;tter nicht wusten hatten die D&auml;monen ihnen einen Streichspielen wollen, wodurch <span class="c104">Chi</span><span class="c37">r&eacute; </span>zu etwas anderm wurde als geplannt, denn die
              seine menschliche Form wurde ver&auml;ndert noch bevor er g&ouml;ttlich ernannt wurde.<span class="c104">Chi</span><span class="c37">r&eacute;</span> war am Anfang sehr &uuml;berrascht von dem was nun passierte und dennoch war er fasziniert
              von diesen Bl&uuml;ten das diese zu seinem Zeichen wurde und diese nun immer noch ein Teil von ihm waren.
            </p>
            <p>
              Er wurde durch die Winde getragen und landete bei den anderen G&ouml;ttern die ihn zu ihresgleichen machten und ihn zum Gott der Zerstreuung machen wolten jedoch als Sie sahen was aus ihm wurde, kam es nicht zu dem den daf&uuml;r hatte er zuviele tierische
              Eigenschaften angenommen.Seine Kr&auml;fte blieben ihm, jedoch entfernten Sie ihn von Ihrer Seite und viele Mhyten entstanden &uuml;ber <span class="c104">Chi</span><span class="c37">r&eacute;</span>, der nun auf der Welt
              wanderte. Einige Mhyten erz&auml;hlten von seiner Zeit vor den Kr&auml;ften , andere von einer Bestie die nicht mal die G&ouml;tter zu B&auml;ndigen wagten.
            </p>
            <p>
              Lange wurden diese Geschichten &uuml;berliefert und einige hatten eine Art Steckbrief &uuml;ber ihn Geschrieben und gezeichnet, so wie er einst mal aussah, jedoch geriet er in Vergessenheit, da ihn lange niemand mehr gesehen hatte.
            </p>
            <p>
              Selbst die anderen G&ouml;tter, die nun in der Welt herrschten vergaßen das es ihn gab, da sie ihn selbst nur noch f&uuml;r einen Mhytos hielten.
              <br /> Irgendwann wurde er v&ouml;llig vergessen und wachte in dieser Welt wieder auf, eine Welt die anderster als sein eigene waren, wo es mehr Wesen wir er gab.
            </p>
          </section>
          <section>
            <h2>Neue Welt, neue Regeln</h2>
            <p>
              Ewig dauerte es, doch f&uuml;r ihn war es nur ein Schlaf, bis er im hier und jetzt einer anderen Welt erwachte.
              <br /> Nichts war mehr so wie er es kannte, nicht mal er selbst war noch das was er von sich wusste.
            </p>
            <p>
              Es dauerte nicht lange bis er sich an die umst&auml;nde gew&ouml;hnt hatte, in einer Welt in der er keine Gottheit war,
              <br /> sondern so gew&ouml;hnlich war , wie es nunmal in hier war, besonderst in der Stadt Sheratan, in welcher er landete.
              <br /> Er konnte einiges schon &uuml;ber diese Welt in erfahrung bringen, so dass er nicht g&auml;nzlich aus der Masse herraus stach,
              <br /> jedoch erlag er des &ouml;ffteren mal der Versuchung, in alte Gewonheiten zu verfallen.
            </p>
            <p>
              
            </p>
            <br />
            <h2>Sein Fluch ? </h2>
            <p>
              Immer wen <span class="c104">Chi</span><span class="c37">r&eacute; </span>zu viel seiner Macht einsetzt, kommt sein Fluch durch und &auml;ndert seine Gestallt.
              <br /> Je nach dem wie viel er aufeinanderfolgent benutzt kommen nur einzelne Merkmale wie Fuchsohren oder Schweif hervor,
              <br /> jedoch wenn es zu viel war, verwandelt er sich in eine weibliche Kitsune <span class="c104">Ch</span><span class="c37">io </span>.
              <br /> Nun k&ouml;nnte man sagen das ist kein Fluch, jedoch &auml;ndert sich hierbei auch ein wenig die Pers&ouml;nlichkeit von <span class="c104">Chi</span><span class="c37">r&eacute;</span>.
            </p>
          </section>
          <section>
            <h2>Der Mann hinter der Frau</h2>
            <img src="https://extern.logicbomb.eu/logd/Chire/CHIRE.jpg" alt="CHIRE" />
          </section>
          <section style="max-width: 90%;">
            <h2><span style="color: #ff0000;">OOC geblubber O.o</span></h2>
            <span style="font-size: small;">
								<span style="color: #ff0000;">Texte Basieren auf meine Fantasie und die Ereignisse teils auch. Ansonsten sind die Ereignisse die hier sowie im Tagebuch beschrieben sind, alles Geschehnisse die 
									</span>
            <span class="c66"><span class="c104">Chi</span><span class="c37">r&eacute;</span><span class="c03"><span style="color: #e00000;"> </span></span>
            <span style="color: #e00000;">in Sheratan erlebt hat.</span></span>
            </span>
            <p>
              <span style="font-size: small;"><span style="color: #ff0000;">Also bitte, bitte , Finger weg von dem hier nieder geschriebenen , ausser du bekommst es besser hin .</span></span>
            </p>
            <p>
              <br />
              <span style="font-size: small;"><span style="color: #ff0000;">Bilder wurden von mir in den weiten des Internets gefunden und dann bearbeitet.</span></span>
            </p>
            <p>
              <span style="color: #ff0000; font-size: small;">Hauptavatar (m&auml;nnlich) wird von <span style="color: #dcdcdc;">Tom Riley</span> dargestellt. </span>
            </p>
            <p>
              <span style="color: #ff0000; font-size: small;">Hauptavatar (weiblich) wird von <span style="color: #dcdcdc;">arashi-x1999</span> dargestellt. </span>
            </p>
            <p>
              <span style="color: #ff0000; font-size: small;">Sollte ein K&uuml;nstler hier sein Bild sehen und es nicht wollen , so wird das Bild verst&auml;ndlich unverz&uuml;glich gel&ouml;scht.</span>
            </p>
          </section>
        </div>
        <!-- /page-inner -->
      </div>
      <!-- /page-left -->
      <a class="back back-right" title="back to intro" href="#">&#8680;</a><a class="back back-left" title="back to intro" href="#">&#8678;</a>
    </div>
    <!-- /splitlayout -->
  </div>
  <!-- /container -->
  <script src="https://extern.logicbomb.eu/logd/Scripts/js/classie.js"></script>
  <script src="https://extern.logicbomb.eu/logd/Scripts/js/cbpSplitLayout.js"></script>
</body>

</html>
            
          
!
            
              /**
 * cbpSplitLayout.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * https://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
(function() {
 
    'use strict';
 
    // http://stackoverflow.com/a/11381730/989439
    function mobilecheck() {
        var check = false;
        (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    }
 
    var splitlayout = document.getElementById( 'splitlayout' ),
        leftSide = splitlayout.querySelector( 'div.intro > div.side-left' ),
        rightSide = splitlayout.querySelector( 'div.intro > div.side-right' ),
        pageLeft = splitlayout.querySelector( 'div.page-left' ),
        pageRight = splitlayout.querySelector( 'div.page-right' ),
        eventtype = mobilecheck() ? 'touchstart' : 'click',
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )];
 
    function init() {
        if( mobilecheck() ) {
            classie.add( splitlayout, 'mobile-layout' );
        }
        classie.add( splitlayout, 'reset-layout' );
 
        leftSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) {
            reset();
            classie.add( splitlayout, 'open-left' );
        } );
 
        rightSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) {
            reset();
            classie.add( splitlayout, 'open-right' );
        } );
 
        // back to intro
        // after transition ends:
        var onEndTransFn = function() {
                this.removeEventListener( transEndEventName, onEndTransFn );
                classie.add( splitlayout, 'reset-layout' );
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            },
            backToIntro = function( ev ) {
                ev.preventDefault();
                ev.stopPropagation();
                var dir = classie.has( ev.target, 'back-right' ) ? 'left' : 'right',
                    page = dir === 'right' ? pageRight : pageLeft;
                classie.remove( splitlayout, 'open-' + dir );
                classie.add( splitlayout, 'close-' + dir );
                page.addEventListener( transEndEventName, onEndTransFn );
            };
 
        splitlayout.querySelector( 'a.back-left' ).addEventListener( eventtype, backToIntro );
        splitlayout.querySelector( 'a.back-right' ).addEventListener( eventtype, backToIntro );
    }
 
    function reset() {
        classie.remove( splitlayout, 'close-right' );
        classie.remove( splitlayout, 'close-left' );
        classie.remove( splitlayout, 'reset-layout' );
    }
 
    init();
 
})();
            
          
!
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