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.

            
              <header id="header" class="text-center">
  <nav id="nav-bar" class="navbar">
    <input id="navbar-close" type="radio" name="navbar" checked>
    <input id="navbar-open" type="radio" name="navbar">
    <a href="https://animadio.org" accesskey="a" title="Go to Animadio Official Website">
      <img id="header-img" src="https://animadio.org/img/logo-nav.png" alt="Animadio Logo">
    </a>
    <ul>
      <li>
        <a class="nav-link" accesskey="o" href="#css-only" title="Access to CSS Only">
          <i class="fab fa-css3 fa-lg" aria-hidden="true"></i>
          <span>CSS Only</span>
        </a>
      </li>
      <li>
        <a class="nav-link" accesskey="b" href="#browsers" title="Access to Browsers">
          <i class="fab fa-firefox fa-lg" aria-hidden="true"></i>
          <span>Browsers</span>
        </a>
      </li>
      <li>
        <a class="nav-link" accesskey="c" href="#content" title="Access to Content">
          <i class="fas fa-archive fa-lg" aria-hidden="true"></i>
          <span>Content</span>
        </a>
      </li>
      <li>
        <a class="nav-link" accesskey="i" href="#installation" title="Access to Installation">
          <i class="fas fa-download fa-lg" aria-hidden="true"></i>
          <span>Installation</span>
        </a>
      </li>
    </ul>
    <ul>
      <li>
        <a class="color-github-onto" href="https://github.com/animadio" rel="noreferrer noopener" target="_blank" title="Open-Source code is waiting to be read !">
          <i class="fab fa-github fa-lg" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="color-tw-onto" href="https://twitter.com/animadio" rel="noreferrer noopener" target="_blank" title="Frontend news & techniques !">
          <i class="fab fa-twitter fa-lg" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="color-purple-onto" href="https://join.slack.com/t/animadio/shared_invite/enQtNTY1NTc5NzgyNDA3LTI2YWIxM2ZkMGM5ODBkNjNjZmI5ZGVlNTM1ZWEwMWI5ZDJjNzViYjNmNWE2MjllMTc3MDhlMzYzZDYzNTkxNjU" rel="noreferrer noopener" target="_blank" title="Speak with the dev team !">
          <i class="fab fa-slack-hash fa-lg" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="color-black-onto" href="https://codepen.io/animadio" rel="noreferrer noopener" target="_blank" title="Animadio Elements Examples !">
          <i class="fab fa-codepen fa-lg" aria-hidden="true"></i>
        </a>
      </li>
    </ul>
    <label for="navbar-close" title="Close the Navigation Menu">
      <i class="fas fa-angle-double-up fa-lg" aria-hidden="true"></i>
    </label>
    <label for="navbar-open" title="Open the Navigation Menu">
      <i class="fas fa-angle-double-down fa-lg" aria-hidden="true"></i>
    </label>
  </nav>
  <h1>Animadio Product Landing Page</h1>
  <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/r9jIpB9dNRg" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <p>Immediate takeoff with Animadio, the only <strong>free & open-source framework</strong> that offers real interactivity to the click & much more :</p>
  <ul>
    <li>Eight types of selectors working with hover, focus, active & <strong>checked states</strong></li>
    <li><strong>Flexbox & Grid</strong> systems included with common options</li>
    <li>Click anywhere on the page to <strong>enable & disable any design effect</strong> anywhere else</li>
    <li>Management of <strong>keyframes animations</strong> & their options</li>
    <li>Complete & simple customization with directly modifiable <strong>CSS variables</strong></li>
    <li>100% <strong>pure CSS</strong> ; so JavaScript is not needed to work !</li>
  </ul>
  <form id="form" class="form" action="https://www.freecodecamp.com/email-submit">
    <fieldset>
      <legend>Get News</legend>
      <ul>
        <li>
          <label for="email">Put your email address here:</label>
          <input id="email" type="email" name="email" placeholder="me@domain.mail" required>
        </li>
        <li>
          <input id="submit" type="submit" value="Send">
        </li>
      </ul>
    </fieldset>
  </form>
</header>
<main class="text-center">
  <section id="css-only">
    <h2>CSS Only</h2>
    <p>Animadio is a <strong>CSS framework</strong> whose library is composed only of CSS source code: jQuery, or even Javascript, are not included or needed in production...</p>
    <p>Grunt is the only JavaScript app used in the framework developement side for recursive tasks (concat, source map, webkit &amp; min) to build the library files (but it can be used to concat CSS elements of your choice by forking the repository)</p>
    <p>You can simply use the library &amp; if you want or if you need : <strong>you can overload the CSS variables</strong>.</p>
  </section>
  <section id="browsers">
    <h2>Browsers</h2>
    <p>Animadio uses PostCSS with autoprefixer to provide a <strong>maximum of compatibility</strong> for all main browsers, including mainly <strong>Firefox, Chrome &amp; Opera</strong>, secondarily Edge, Safari &amp; Explorer (except for some effects, especially all Skew animations)</p>
  </section>
  <section id="content">
    <h2>Content</h2>

    <p>The library distribution is available here :</p>
    <a class="btn-purple" href="https://github.com/animadio/animadio/tree/master/dist/animadio.css" rel="noreferrer noopener" target="_blank" title="Animadio on GitHub">
      <i class="fas fa-infinity fa-lg" aria-hidden="true"></i>
      animadio.css
    </a>

    <p>But if you only need a part of it :</p>

    <ul class="row">
      <li>
        <a class="btn-red" href="https://github.com/animadio/animadio/tree/master/dist/animadio-grid.css" rel="noreferrer noopener" target="_blank" title="Grid on GitHub">
          <i class="fas fa-th fa-lg" aria-hidden="true"></i>
          animadio-grid.css
        </a>
      </li>
      <li>
        <a class="btn-green" href="https://github.com/animadio/animadio/tree/master/dist/animadio-elements.css" rel="noreferrer noopener" target="_blank" title="Elements on GitHub">
          <i class="fas fa-sitemap fa-lg" aria-hidden="true"></i>
          animadio-elements.css
        </a>
      </li>
      <li>
        <a class="btn-blue" href="https://github.com/animadio/animadio/tree/master/dist/animadio-states.css" rel="noreferrer noopener" target="_blank" title="States on GitHub">
          <i class="fas fa-cogs fa-lg" aria-hidden="true"></i>
          animadio-states.css
        </a>
      </li>
    </ul>
  </section>
  <section id="installation">
    <h2>Installation</h2>
    <figure>
      <a href="https://www.jsdelivr.com/package/npm/animadio" rel="noreferrer noopener" target="_blank" title="CDN package">
        <img src="https://img.shields.io/jsdelivr/npm/hy/animadio.svg?label=jsDelivr+Downloads" alt="jsDelivr Yearly Downloads">
      </a>
      <a href="https://www.npmjs.com/package/animadio" rel="noreferrer noopener" target="_blank" title="NPM package">
        <img src="https://img.shields.io/npm/dy/animadio.svg?label=NPM+Downloads" alt="NPM Yearly Downloads">
      </a>
    </figure>
    <input id="menu-install-radio1" class="menu-radio1" type="radio" name="menu-install" checked>
    <input id="menu-install-radio2" class="menu-radio2" type="radio" name="menu-install">
    <input id="menu-install-radio3" class="menu-radio3" type="radio" name="menu-install">
    <nav class="menu">
      <label for="menu-install-radio1">
        CDN
        <i class="fas fa-caret-down fa-2x" aria-hidden="true"></i>
      </label>
      <label for="menu-install-radio2">
        Package Manager
        <i class="fas fa-caret-down fa-2x" aria-hidden="true"></i>
      </label>
      <label for="menu-install-radio3">
        Download
        <i class="fas fa-caret-down fa-2x" aria-hidden="true"></i>
      </label>
    </nav>
    <ul class="menu-relay">
      <li class="menu-target1">
        <section>
          <h4>CDN</h4>
          <p>During development, add this tag to your HTML :</p>
          <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/animadio.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
          <p>Then in production, add this one :</p>
          <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/min/animadio.min.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
          <p>But if you only need a part of Animadio, you can use one of those 3 files :</p>
          <ul>
            <li><span class="font-bold color-red deco-under">animadio-grid</span> for <span class="color-red">Global & Grid parts</span></li>
            <li><span class="font-bold color-green deco-under">animadio-elements</span> for <span class="color-green">Global & Elements parts</span></li>
            <li><span class="font-bold color-blue deco-under">animadio-states</span> for <span class="color-blue">Global & States parts</span></li>
          </ul>
          <input id="menu-cdn-radio1" class="menu-radio1" type="radio" name="menu-cdn">
          <input id="menu-cdn-radio2" class="menu-radio2" type="radio" name="menu-cdn">
          <input id="menu-cdn-radio3" class="menu-radio3" type="radio" name="menu-cdn">
          <nav class="menu">
            <label for="menu-cdn-radio1">
              Grid
              <i class="fas fa-caret-down fa-2x" aria-hidden="true"></i>
            </label>
            <label for="menu-cdn-radio2">
              Elements
              <i class="fas fa-caret-down fa-2x" aria-hidden="true"></i>
            </label>
            <label for="menu-cdn-radio3">
              States
              <i class="fas fa-caret-down fa-2x" aria-hidden="true"></i>
            </label>
          </nav>
          <ul class="menu-relay">
            <li class="menu-target1">
              <h5 class="color-red-deco-double">Animadio-Grid</h5>
              <p>Development :</p>
              <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/animadio-grid.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
              <p>Production :</p>
              <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/min/animadio-grid.min.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
            </li>
            <li class="menu-target2">
              <h5 class="color-green-deco-double">Animadio-Elements</h5>
              <p>Development :</p>
              <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/animadio-elements.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
              <p>Production :</p>
              <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/min/animadio-elements.min.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
            </li>
            <li class="menu-target3">
              <h5 class="color-blue-deco-double">Animadio-States</h5>
              <p>Development :</p>
              <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/animadio-states.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
              <p>Production :</p>
              <pre><span class="color-silver">&lt;</span><span class="color-red">link</span><span class="color-salmon font-italic"> href=</span>"https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/min/animadio-states.min.css"<span class="color-salmon font-italic"> rel=</span>"stylesheet"<span class="color-silver">&gt;</span></pre>
            </li>
          </ul>
        </section>
      </li>
      <li class="menu-target2">
        <section>
          <h4>Package Manager</h4>
          <p>Animadio is available through NPM & Yarn !</p>
          <ul>
            <li>
              <h5>NPM</h5>
              <pre>$ npm i animadio</pre>
            </li>
            <li>
              <h5>Yarn</h5>
              <pre>$ yarn add animadio</pre>
            </li>
          </ul>
        </section>
      </li>
      <li class="menu-target3">
        <section>
          <h4>Download</h4>
          <p>If you prefer to download the files, you can choose between release or repository.</p>
          <ul>
            <li>
              <h5>Release</h5>
              <a class="btn-github" href="https://github.com/animadio/animadio/releases" rel="noreferrer noopener" target="_blank">
                <i class="fab fa-github-alt fa-3x" aria-hidden="true"></i>
                <strong>Get the Latest Release !</strong>
              </a>
            </li>
            <li>
              <h5>Repository</h5>
              <pre>$ git clone https://github.com/animadio/animadio.git</pre>
            </li>
          </ul>
        </section>
      </li>
    </ul>
  </section>
</main>
<footer class="foot">
  <ul>
    <li>
      <h3>Project</h3>
      <ul>
        <li>
          <a href="https://github.com/animadio/animadio" rel="noreferrer noopener" target="_blank">GitHub</a>
        </li>
        <li>
          <a href="https://github.com/animadio/animadio/releases" rel="noreferrer noopener" target="_blank">Release</a>
        </li>
        <li>
          <a href="https://github.com/animadio/animadio/wiki" rel="noreferrer noopener" target="_blank">About</a>
        </li>
        <li>
          <a href="https://github.com/animadio/animadio/blob/master/LICENSE" rel="noreferrer noopener" target="_blank">License</a>
        </li>
        <li>
          <a href="https://github.com/animadio/animadio/issues" rel="noreferrer noopener" target="_blank">Issues</a>
        </li>
        <li>
          <a href="https://github.com/animadio/animadio/pulls" rel="noreferrer noopener" target="_blank">Requests</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>Community</h3>
      <ul>
        <li>
          <a href="https://join.slack.com/t/animadio/shared_invite/enQtNjAxMjg0OTUyODM5LWE5ZjNhNWYxMzVjZTdlMjhkNDhiNDVlYmQ1NjY3NTVhZGFmNDg2ODVhMmYyYmQwMDBkYmYyY2Q0NGQ5OGY3NWY" rel="noreferrer noopener" target="_blank">Slack</a>
        </li>
        <li>
          <a href="https://twitter.com/animadio" rel="noreferrer noopener" target="_blank">Twitter</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio" rel="noreferrer noopener" target="_blank">CodePen</a>
        </li>
        <li>
          <a href="https://github.com/animadio" rel="noreferrer noopener" target="_blank">Contribute</a>
        </li>
        <li>
          <a href="https://github.com/orgs/animadio/people" rel="noreferrer noopener" target="_blank">Team</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>Examples</h3>
      <ul>
        <li>
          <a href="https://codepen.io/animadio/pen/LamGvj" rel="noreferrer noopener" target="_blank">Btn</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/KKPmGvE" rel="noreferrer noopener" target="_blank">Card</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/YgLwbe" rel="noreferrer noopener" target="_blank">Foot</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/EMLPzN" rel="noreferrer noopener" target="_blank">Form</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/NJMxmm" rel="noreferrer noopener" target="_blank">Gallery</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/rRvxbe" rel="noreferrer noopener" target="_blank">Menu</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/rRvxRe" rel="noreferrer noopener" target="_blank">Navbar</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/QoryoX" rel="noreferrer noopener" target="_blank">Slider</a>
        </li>
        <li>
          <a href="https://codepen.io/animadio/pen/ZPoQNb" rel="noreferrer noopener" target="_blank">Table</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <a class="color-npm" accesskey="n" href="https://www.npmjs.com/package/animadio" rel="noreferrer noopener" target="_blank" title="View Animadio @NPM">
        <i class="fab fa-npm fa-3x" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <a class="color-github" accesskey="g" href="https://github.com/animadio/animadio" rel="noreferrer noopener" target="_blank" title="View Animadio @GitHub">
        <i class="fab fa-github fa-3x" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <a class="color-jsd" accesskey="j" href="https://www.jsdelivr.com/package/npm/animadio" rel="noreferrer noopener" target="_blank" title="View Animadio @JSDelivr">
        <i class="fab fa-js-square fa-3x" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</footer>
            
          
!
            
              main {
  display: flex;
  flex-direction: column;
}

.navbar {
  --navbar-background-color: var(--black);
}
.foot {
  --foot-first-child-background-color: var(--red);
}

@media (min-width: 576px) {
  .navbar {
    --navbar-background-color: var(--red);
}
  .foot {
    --foot-first-child-background-color: var(--obsidian);
  }
}

@media (min-width: 768px) {
  .navbar {
    --navbar-background-color: var(--obsidian);
}
  .foot {
    --foot-first-child-background-color: var(--ruby);
  }
}

@media (min-width: 992px) {
  .navbar {
    --navbar-background-color: var(--ruby);
}
  .foot {
    --foot-first-child-background-color: var(--black);
  }
}
            
          
!
            
              // No JavaScript at all !
            
          
!
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.

Console