cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="toko" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></symbol><symbol id="call" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></symbol><symbol id="postcard" viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol id="email" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol id="website" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></symbol></svg>

<header class="header container">
<h1>Contacts</h1>
</header>


<main class="main container">
<section class="accordion js-accordion" id="accordion">

<h3>Alorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Blorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>BLorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Clorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>CLorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Dlorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>DLorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Elorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ELorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

</section> 
</main>

<div class="subfooter container">
<div class="login-custom" id="loginCustom">
  <div class="accordion accordion-login js-accordion" id="accordionLogin">

    <h3>log in</h3>

    <div class="accordion_inner">
      <div class="form form-login">

        <form name="loginform" id="loginform" action="#!" method="post">

          <p class="login-username">
          <label for="user_login">User</label>
          <input type="text" name="log" id="user_login" class="input" value="" size="20" />
          </p>
          <p class="login-password">
          <label for="user_pass">Password</label>
          <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
          </p>

          <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" />Remember me</label></p>
          <p class="login-submit">
          <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Login" />
          <input type="hidden" name="redirect_to" value="#!" />
          </p>

        </form>
        <p class="small">Password Lost? <a href="#!?action=lostpassword">ask for a new password</a></p>
      </div>
    </div>
  </div>

</div><!-- /.login-custom -->
</div><!-- /.subfooter -->

<footer class="footer container">
<div class="colophon">
  <small class="small">by <a href="http://atelierbramdehaan.nl/">Bram de Haan</a> &middot; <a href="https://github.com/atelierbram/Accordion-Module">on Github</a> &middot; <a href="https://codepen.io/atelierbram/pen/NqZpVg">on Codepen</a> adapted from <a href="https://github.com/pinceladasdaweb/accordion">Pinceladas da Web</a></small>
</div>
</footer> 
            
          
!
            
              *,
:after,
:before {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  background-color: #cbdee6;
}

body {
  font: 100%/1.5 "Fira Sans", AvenirNext-Regular, "Segoe Ui", "Lucida Grande", Verdana, sans-serif;
  margin: 0;
  color: #182c35;
  font-weight: 400;
  min-height: 100%;
  box-sizing: border-box;
}

h1 {
  font-size: 2.5em;
  padding: .125em 0 .25em .5em;
}

h1,
h3 {
  font-family: "Fira Sans", AvenirNextCondensed-Demibold, "Segoe UI", "Trebuchet MS", Tahoma, sans-serif;
  margin: 0;
  color: #5e7b87;
  font-weight: 500;
}

img,
svg {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: #2394a4;
}

.footer {
  padding-top: 3em;
  padding-bottom: 1em;
  text-align: center;
}

.footer .small a {
  text-decoration: none;
  padding: .25em;
}

.footer .small a:hover {
  background-color: #5ec5ce;
  color: #fff;
}

.container,
.main {
  background-color: #fff;
}

.container {
  max-width: 40em;
  margin: 0 auto;
  overflow: auto;
}

.main {
  min-height: calc(100vh - 13em);
  padding: 2em 3em;
}

.header {
  min-height: 5em;
  padding-left: 2em;
}

.subfooter {
  min-height: 2em;
  padding-top: 3em;
}

.footer {
  min-height: 3em;
}

.form {
  max-width: 30em;
  padding: 1.5em 3em;
}

.form label {
  padding-left: .125em;
  color: #42758a;
}

.form p {
  margin: 0;
  padding: 0;
}

.form input[type=text],
.form input[type=password] {
  box-sizing: border-box;
  border-radius: 0;
  -webkit-appearance: none;
  background: #f4f8fa;
  border: 1px solid #cbdee6;
  color: #182c35;
  outline: 0;
  font-size: 24px;
  width: 100%;
  padding: .125em .25em;
  margin: 2px 6px 16px 0;
  text-align: left;
  height: 1.8em;
  vertical-align: top;
  font-family: inherit;
}

.form input[type=text][disabled],
.form input[type=password][disabled] {
  background-color: #eee;
}

.login-submit {
  float: right;
}

.button,
.form input[type=submit] {
  -webkit-appearance: none;
  display: inline-block;
  outline: 0;
  margin: 0;
  padding: .5em .75em;
  background: #119ad4;
  border: 1px solid #0f89bc;
  cursor: pointer;
  font-size: 1.25em;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 1px #063346;
  letter-spacing: 1px;
  overflow: visible;
  vertical-align: top;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(89, 196, 242, .5), 0 1px 0 rgba(24, 44, 53, .15);
  text-decoration: none;
  border-radius: 4px;
}

.button:hover,
.form input[type=submit]:hover {
  background: #0f89bc;
  text-decoration: none;
}

.button:active,
.form input[type=submit]:active {
  background: #0d78a5;
  box-shadow: inset rgba(0, 0, 0, .25) 0 1px 2px 0;
  border-color: #063346;
}

.button::-moz-focus-inner,
.form input[type=submit]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.accordion h3 {
  font-size: 1.25em;
  padding-top: .35em;
  padding-bottom: .175em;
  padding-left: 1em;
  color: #165b65;
  background-color: #dce9ee;
  border-left: 1px solid transparent;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #b5c3c9;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
  position: relative;
}

.accordion .toggle-active:before,
.accordion h3:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin-right: 1.1em;
  width: .8em;
}

.accordion h3:nth-of-type(even) {
  background-color: #edf4f7;
  border-top-color: #fff;
  border-bottom-color: #d2dbdf;
}

/* blue downward triangle for toggle header */
.accordion h3:after {
  margin-top: 16px;
  height: 8px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(31,127,142)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") no-repeat;
}

.accordion .toggle-active,
.accordion h3:nth-of-type(even).toggle-active {
  background-color: #79b8d2;
  color: #fff;
  text-shadow: 1px 1px 3px #265c72;
  border-top-color: #fff;
  border-bottom-color: #649cb4;
  font-weight: 300;
}

/* swap blue downward triangle with white upward triangle for active header */ 
.accordion .toggle-active:after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(255,255,255)' points='8,0 16,12 0,12'/%3E%3C/svg%3E") no-repeat;
}

.accordion>div {
  max-height: 999px;
  overflow: visible;
  -webkit-transition: max-height .3s;
  transition: max-height .3s;
}

.accordion .closed {
  max-height: 0;
  overflow: hidden;
}

.core .closed {
  display: none;
}

.accordion_inner {
  background-color: #ebf8f9;
}

.contact-list {
  margin: 0;
  padding: .5em 2.5em 1em;
  list-style: none;
}

.contact-list li {
  position: relative;
  margin: 0 0 0 -.75em;
  padding: 0 0 0 1em;
}

.content-contact {
  padding-top: 1em;
}

.content-contact p {
  margin: 0;
  padding: .5em 3em 1.5em;
}

.icon-svg-use {
  position: absolute;
  top: .27em;
  left: -.5em;
  height: 16px;
  width: 16px;
  fill: #3aa5bf;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
}

.footer .small a,
.login-remember {
  display: inline-block;
}
            
          
!
            
              /*!
 * domready (c) Dustin Diaz 2014 - License MIT
 * https://github.com/ded/domready/
 */
!function (name, definition) {

  if (typeof module != 'undefined') module.exports = definition()
  else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)
  else this[name] = definition()

}('domready', function () {

  var fns = [], listener
    , doc = document
    , hack = doc.documentElement.doScroll
    , domContentLoaded = 'DOMContentLoaded'
    , loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState)


    if (!loaded)
      doc.addEventListener(domContentLoaded, listener = function () {
        doc.removeEventListener(domContentLoaded, listener)
          loaded = 1
          while (listener = fns.shift()) listener()
      })

      return function (fn) {
        loaded ? setTimeout(fn, 0) : fns.push(fn)
      }

});
domready(function () {
  document.documentElement.className += ' domready';
});

/*!
 * Accordion
 * Simple Accordion done in Vanilla JS
 * Example and documentation at: https://github.com/atelierbram/Accordion-Module
 * Licensed under the MIT license: https://www.opensource.org/licenses/mit-license.php
 */

domready(function () {

  var accs = document.querySelectorAll('.js-accordion'), j;
  for (j = 0; j < accs.length; ++j) {

    var h3El = accs[j].querySelectorAll('h3');
    var size = h3El.length, i, h3Node;

    for (i = 0; i < size; i++) {
      h3Node = h3El[i];

      h3Node.setAttribute("class", "toggle");
      h3Node.nextElementSibling.classList.add("closed");

      h3Node.onclick = function () {
        var h3 = this;

        if (h3.getAttribute("class") == "toggle") {
          h3.setAttribute("class", "toggle-active");
          h3.nextElementSibling.classList.remove("closed");
          h3.nextElementSibling.classList.add("opened");
        }
        else {
          h3.setAttribute("class", "toggle");
          h3.nextElementSibling.classList.add("closed");
          h3.nextElementSibling.classList.remove("opened");
        }
      }
    }
  }

});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console