Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

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

Behavior

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.

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <header class="fixed-top shadow">
  <nav class="navbar text-uppercase p-0">
    <div class="container d-flex">
      <a class="navbar-brand" href="https://www.badiali.es" rel="noopener noreferrer" target="_blank">Luis <strong class="d-block">Badiali</strong></a>
      <ul class="navbar-nav d-none d-md-block ml-auto mr-5">
        <li class="nav-item">
          <a class="nav-link" href="https://www.badiali.es" rel="noopener noreferrer" target="_blank">Contactar</a>
        </li>
      </ul>
      <button class="hamburger hamburger--squeeze d-flex justify-content-center align-items-center p-0" type="button" data-toggle="modal" data-target="#menuModal">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    </div>
  </nav>
</header>

<div class="modal offcanvas-menu shadow d-block pr-0" id="menuModal" tabindex="-1" aria-labelledby="menuModalLabel" aria-hidden="true" data-backdrop="">
  <div class="modal-dialog m-0 h-100">
    <div class="modal-content border-0 rounded-0">
      <div class="modal-header justify-content-center border-0 p-4">
        <figure class="d-inline-flex flex-column align-items-center m-0">
          <img class="rounded-circle" src="https://es.gravatar.com/userimage/3890878/26e5ee1b5d2703e9580d47bab83c0723.png?size=200" width="90">
          <figcaption class="mt-2">@badiali</figcaption>
        </figure>
      </div>
      <div class="modal-body text-uppercase px-0 py-4 flex-1">
        <ul class="nav flex-column justify-content-center">
          <li class="nav-item">
            <a class="nav-link" href="https://www.linkedin.com/in/badiali/" rel="noopener noreferrer" target="_blank">Sobre mí</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://dev.to/badiali" rel="noopener noreferrer" target="_blank">Artículos</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.badiali.es" rel="noopener noreferrer" target="_blank">Contactar</a>
          </li>
        </ul>
      </div>
      <div class="modal-footer justify-content-center border-0 p-4">
        <ul class="list-unstyled list-inline m-0">
          <li class="list-inline-item mr-2">
            <a class="d-block" href="https://twitter.com/badiali/" title="Twitter | Luis Badiali" target="_blank" rel="noopener noreferrer">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 500 500">
                <path class="icon--color" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
              </svg>
              <span class="sr-only">Twitter</span>
            </a>
          </li>
          <li class="list-inline-item mx-2">
            <a class="d-block" href="https://instagram.com/dev.badiali/" title="Instagram | Luis Badiali" target="_blank" rel="noopener noreferrer">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 448 512">
                <path class="icon--color" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
              </svg>
              <span class="sr-only">Instagram</span>
            </a>
          </li>
          <li class="list-inline-item mx-2">
            <a class="d-block" href="https://github.com/badiali/" title="GitHub | Luis Badiali" target="_blank" rel="noopener noreferrer">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 496 512">
                <path class="icon--color" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
              </svg>
              <span class="sr-only">GitHub</span>
            </a>
          </li>
          <li class="list-inline-item mx-2">
            <a class="d-block" href="https://codepen.io/badiali/" title="CodePen | Luis Badiali" target="_blank" rel="noopener noreferrer">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
                <path class="icon--color" d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"></path>
              </svg>
              <span class="sr-only">CodePen</span>
            </a>
          </li>
          <li class="list-inline-item mx-2">
            <a class="d-block" href="https://es.linkedin.com/in/badiali/" title="LinkedIn | Luis Badiali" target="_blank" rel="noopener noreferrer">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 448 512">
                <path class="icon--color" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
              </svg>
              <span class="sr-only">LinkedIn</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

              
            
!

CSS

              
                $primary: rgb(32,50,72);
$secondary: rgb(135,211,158);
$navbarHeight: 100px;

@mixin hamburger-inner {
  .hamburger-inner {
    background-color: $primary;
    border-radius: 0;
    &::before,
    &::after {
      background-color: $primary;
      border-radius: 0;
    }
  }
}

body {
  padding-top: $navbarHeight;
  font-family: 'Inter', sans-serif;
  background-color: $primary;
}
button {
  &:focus {
    outline: none;
  }
}

// Navbar
.navbar {
  height: $navbarHeight;
  background-color: $secondary;
  .navbar-brand {
    font-size: 1.8rem;
    line-height: .9em;
  }
  a {
    color: $primary;
  }
}

/*
 * Icono de menu animado
 * https://jonsuh.com/hamburgers/
 */
.hamburger {
  @include hamburger-inner;
  &.is-active {
    @include hamburger-inner;
    &:hover { opacity: 1; }
  }
  &:hover { opacity: 1; }
}

// Off-canvas menu
.modal.offcanvas-menu {
  width: 320px;
  max-width: 80%;
  transition: transform .2s ease-in-out;
  transform: translateX(-100%);
  .modal-content {
    height: inherit;
    color: $secondary;
    background-color: darken($primary,5);
    .nav {
      .nav-link {
        color: $secondary;
        text-align: center;
      }
    }
  }
  &.show {
    transform: translateX(0);
  }
}

// Iconos redes sociales
$iconSize: 24px;
.icon {
  display: block;
  width: $iconSize;
  height: $iconSize;
}
.icon--color { fill: $secondary; }

              
            
!

JS

              
                const $hamburger = $(".hamburger")
const $menuModal = $("#menuModal")

$hamburger.on("click", function() {
  $hamburger.toggleClass("is-active")
});

$menuModal.on("hidden.bs.modal", function() {
  $hamburger.removeClass("is-active")
})
              
            
!
999px

Console