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. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                // SVG Symbols - place this right after <body> tag
svg(xmlns="http://www.w3.org/2000/svg" style="display: none;")

  // icon CodePen   
  symbol#icon-codepen(viewBox="0 0 32 32" aria-labelledby="codepen-title codepen-desc")
    title#codepen-title CodePen Home Button
    desc#codepen-desc click to go to the Codepen home page
    path(d="M3.872 20.864l10.752 7.2v-6.432l-5.952-3.968zM2.752 18.304l3.456-2.304-3.456-2.304v4.608zM17.376 28.064l10.752-7.2-4.8-3.2-5.952 3.968v6.432zM16 19.264l4.864-3.264-4.864-3.264-4.864 3.264zM8.672 14.336l5.952-3.968v-6.432l-10.752 7.2zM25.792 16l3.456 2.304v-4.608zM23.328 14.336l4.8-3.2-10.752-7.2v6.432zM32 11.136v9.728q0 0.736-0.608 1.152l-14.624 9.76q-0.384 0.224-0.768 0.224t-0.768-0.224l-14.624-9.76q-0.608-0.416-0.608-1.152v-9.728q0-0.736 0.608-1.152l14.624-9.76q0.384-0.224 0.768-0.224t0.768 0.224l14.624 9.76q0.608 0.416 0.608 1.152z")
    
  // icon menu (3 lines)  
  symbol#icon-menu(viewBox="0 0 32 32" aria-labelledby="menu-title menu-desc")
    title#menu-title main menu
    desc#menu-desc click to reveal main navigation items
    path(d="M4 6.667h24q0.552 0 0.943 0.391t0.391 0.943-0.391 0.943-0.943 0.391h-24q-0.552 0-0.943-0.391t-0.391-0.943 0.391-0.943 0.943-0.391zM4 22.667h24q0.552 0 0.943 0.391t0.391 0.943-0.391 0.943-0.943 0.391h-24q-0.552 0-0.943-0.391t-0.391-0.943 0.391-0.943 0.943-0.391zM4 14.667h24q0.552 0 0.943 0.391t0.391 0.943-0.391 0.943-0.943 0.391h-24q-0.552 0-0.943-0.391t-0.391-0.943 0.391-0.943 0.943-0.391z")
    
  // icon menu dots (horizontal)  
  symbol#icon-menu-dots(viewBox="0 0 32 32" aria-labelledby="menu-dots-title menu-dots-desc")
    title#menu-dots-title menu navigation
    desc#menu-dots-desc click to reveal navigation items
    path(d="M16.002 12.48c-1.944 0-3.522 1.576-3.522 3.52s1.578 3.52 3.522 3.52c1.944 0 3.518-1.576 3.518-3.52s-1.574-3.52-3.518-3.52zM16.002 8.32c1.944 0 3.518-1.578 3.518-3.52s-1.574-3.52-3.518-3.52c-1.944 0-3.522 1.576-3.522 3.52s1.578 3.52 3.522 3.52zM16.002 23.68c-1.944 0-3.522 1.576-3.522 3.52s1.578 3.52 3.522 3.52c1.944 0 3.518-1.576 3.518-3.52s-1.574-3.52-3.518-3.52z")
    
  // icon menu dots (vertical)  
  symbol#icon-menu-dots-v(viewBox="0 0 32 32" aria-labelledby="menu-dots-v-title menu-dots-v-desc")
    title#menu-dots-v-title menu navigation
    desc#menu-dots-v-desc click to reveal navigation items
    path(d="M16.002 12.48c-1.944 0-3.522 1.576-3.522 3.52s1.578 3.52 3.522 3.52c1.944 0 3.518-1.576 3.518-3.52s-1.574-3.52-3.518-3.52zM4.802 12.48c-1.944 0-3.522 1.576-3.522 3.52s1.578 3.52 3.522 3.52c1.944 0 3.518-1.578 3.518-3.52s-1.574-3.52-3.518-3.52zM27.202 12.48c-1.944 0-3.522 1.576-3.522 3.52s1.578 3.52 3.522 3.52c1.944 0 3.518-1.576 3.518-3.52s-1.574-3.52-3.518-3.52z")    

  // icon eye  
  symbol#icon-eye(viewBox="0 0 32 32" aria-labelledby="eye-title eye-desc")
    title#eye-title view sample
    desc#eye-desc count of unique views
    path(d="M16 6c-8.837 0-16 10-16 10s7.163 10 16 10 16-10 16-10-7.163-10-16-10zM16 22c-3.313 0-6-2.687-6-6s2.687-6 6-6 6 2.687 6 6-2.687 6-6 6zM16 12c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z")
    
  // icon chat bubble   
  symbol#icon-chat(viewBox="0 0 32 32" aria-labelledby="chat-title chat-desc")
    title#chat-title Pen Comments
    desc#chat-desc click to add a comment
    path(d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z")
 
  // icon heart   
  symbol#icon-heart(viewBox="0 0 32 32" aria-labelledby="heart-title heart-desc")
    title#heart-title Heart Pen
    desc#heart-desc click to heart pen example
    path(d="M23 2c-2.404 0-4.331 0.863-6.030 2.563-0.001 0.001-0.002 0.002-0.003 0.003h-0.001l-0.966 1.217-0.966-1.143c-0.001-0.001-0.002-0.002-0.003-0.003h-0.001c-1.7-1.701-3.626-2.637-6.030-2.637s-4.664 0.936-6.364 2.636c-1.699 1.7-2.636 3.96-2.636 6.364 0 2.402 0.935 4.662 2.633 6.361l11.947 12.047c0.375 0.379 0.887 0.592 1.42 0.592s1.045-0.213 1.42-0.592l11.946-12.047c1.698-1.699 2.634-3.958 2.634-6.361s-0.937-4.664-2.636-6.364c-1.7-1.7-3.96-2.636-6.364-2.636v0z")
    
  // icon search  
  symbol#icon-search(viewBox="0 0 808 1024" aria-labelledby="search-title search-desc")
    title#search-title Search
    desc#search-desc click to search Codepen
    path(d="M790.528 790.528q30.72 34.816 6.144 63.488l-47.104 47.104q-36.864 32.768-69.632 0l-194.56-194.56q-75.776 43.008-159.744 43.008-131.072 0-228.352-97.28t-97.28-228.352 92.16-224.256 223.232-93.184 229.376 97.28 98.304 228.352q0 90.112-47.104 165.888zM96.256 423.936q0 90.112 69.632 159.744t159.744 69.632 154.624-64.512 64.512-156.672q0-90.112-69.632-158.72t-159.744-68.608-154.624 64.512-64.512 154.624z")
  
  // icon caret  
  symbol#icon-caret(viewBox="0 0 366 1024")
    // title#caret-title Caret
    // desc#caret-desc click to search Codepen
    path(d="M365.568 256v512q0 14.336-10.24 25.6t-26.624 11.264-25.6-11.264l-256-256q-10.24-11.264-10.24-25.6t10.24-25.6l256-256q11.264-11.264 25.6-11.264t26.624 11.264 10.24 25.6z")

.container  
  .profile-card.flex.flex-d-col.jc-between
    // header
    header.page-header.navbar.flex.ai-center.jc-between(role="banner")
      // Main Nav
      .main-nav.flex.flex-wrap.ai-center
        // CodePen Logo
        a.cp-logo(href="https://codepen.io/")
          svg.icon.icon-codepen <use xlink:href="#icon-codepen" />
        a(href="#main-menu").menu-toggle Menu
          svg.icon.icon-caret.rotate-neg-90 <use xlink:href="#icon-caret" />
        // Main Menu
        nav#main-menu.menu(role="navigation")
          ul(aria-expanded="false")
            li
              a(href="#") Pens
            li
              a(href="#") Projects
            li
              a(href="#") Posts
            li
              a(href="#") Collections
      // User Nav 
      .user-nav.flex.ai-center     
        // Search / User Menu
        form.search.flex(role="search")
          input(type="search")
          button(type="submit")
            svg.icon.icon-search <use xlink:href="#icon-search" />           
          a(href="#user-menu").menu-toggle <span class="sr-only">User Menu</span>
            svg.icon.icon-menu-dots <use xlink:href="#icon-menu-dots" />  
          // User Menu
          nav#user-menu.menu
            ul
              li
                a(href="#") Settings
              li
                a(href="#") Profile           
              li
                a(href="#") Pens
              li
                a(href="#") Support
    // Main
    main#main.main-content.flex.flex-d-col.jc-between(role="main")
      // User Badges
      .user-badges.flex.ai-center.jc-between.filson
        .user-following
          p.title.mb-sm <span>30</span> followers
          p.badge.badge-pro.mb-0 Pro
        .user-followers
          p.title.mb-sm <span>38</span> following
          p.badge.badge-hired.mb-0 Hire Me
      // User Info
      .user-info.mb-sm
        figure.user-avatar.mask-rhombus
          img.mb-sm(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/avatar-ET.png")
          figcaption.user-handle
            a(href="#") @ericthayer
        h1.user-title.mb-0 Eric Thayer
        .user-location Denver, CO
      .user-sample-menu.flex.ai-center.jc-between.mb-sm
        p.mb-0 Pens <span class="seperator">></span> Showcase
        button.menu-toggle.bg-trans
          svg.icon.icon-menu <use xlink:href="#icon-menu" />        
        // Content Menu
        nav#content-menu.menu
          ul
            li
              a(href="#") Pens
            li
              a(href="#") Projects
            li
              a(href="#") Posts
            li
              a(href="#") Collections
      // Pen Sample
      .pen-samples
        //iframe.pen-sample.mb-sm(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/cp-shot-SwissRitual1.png" width="100%" frameborder="0" fullscreen="true" scrolling="no" sandbox="allow-scripts allow-pointer-lock allow-same-origin")
        img.pen-sample.mb-tiny(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/cp-shot-SwissRitual1.png" alt="")
        .stats.pen-stats
          h3.text-base Future Islands - Album Poster
          button
            svg.icon.icon-eye <use xlink:href="#icon-eye" />
            span 150
          button
            svg.icon.icon-chat <use xlink:href="#icon-chat" />
            span 7
          button
            svg.icon.icon-heart <use xlink:href="#icon-heart" />
            span 30
      
        
  
              
            
!

CSS

              
                :root {
  //font-size: calc( 1rem + (24 - 16) * ( (100vw - 400px) / ( 2000 - 400)));
  line-height: 1.47467;
}

$Lato: "Lato", $sans-serif;
$Filson: "filson-pro", $sans-serif;

.lato {
  font-family: $Lato;
}

.filson {
  font-family: $Filson;
}

body {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/cp-shot-profile-bg.svg") repeat, linear-gradient(to bottom, #8E6C8C, #333);
  background-size: cover;
  font-family: $Lato;
  justify-content: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $Filson;
}

.container {
  max-height: 667px;
  //max-width: 23.438rem;
  max-width: 375px;
  overflow: hidden;
}

.profile-card {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/profile-bg.svg) no-repeat center #639;
  background-size: cover;
  color: #FFF;
  //flex-grow: 1;
  //max-height: 41.688rem;
  // max-height: 667px;
  // max-width: 23.438rem;
  // max-width: 375px;
  //height: 100%;
  //width: 100%;
  position: relative;
}

a,
button {
  color: currentColor;
}

svg {
  fill: currentColor;
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  vertical-align: middle;
  position: relative;
  top: -.0625em;
  margin-right: .25rem;
  margin-left: .25rem;
  text-align: center;
  stroke-width: 0;
}

// menu visible

.is-visible {
  display: block;
}

ul {
  list-style-type: none;
  a {
    text-decoration: none;
  }
}

button {
  cursor: pointer;
  font-size: 1rem;
  &.bg-trans {
    background-color: transparent;
  }
}

// header

.page-header {
  background-color: rgba(black, .5);
  font-size: 1.125rem;
  padding: .5em .75em;
}

.main-content {
  flex-grow: 1;
  padding: .5em 1.25em .75em;
  width: 100%;
}

// nav menu

.menu {
  //display: none;
  opacity: 0;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  //will-change: transform;
  //transform: translateY(-100%);
  //transition: transform .4s cubic-bezier(.19,.13,.42,.88);
  transition: opacity .4s ease;
  &:target {
    //display: flex;
    opacity: 1;
    flex-basis: 100%;
    transform: initial;
    transition: opacity .4s ease;
    z-index: 100;
  }
  ul {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 0;
    padding-left: 0;
  }
  ul > li {
    display: flex;
    flex-grow: 1;
  }
  li > * {
    background-color: #333;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-grow: 1;
    //line-height: 1;
    padding: .5em;
    //will-change: font-size, padding;
    transition: all .4s ease;
    .icon {
      fill: #FFF;
      font-size: 1.75rem;
      margin: 0;
    }
    &:hover,
    &:focus,
    .active {
      //background-color: $link-color;
      background-color: #EEE;
      //background-color: mix(white, $vue-blue, 20%);
      color: #FFF;
      color: initial; 
      outline: none;
      .icon {
        fill: currentColor;
      }
    }
  }
}

.main-nav {
  a {
    text-decoration: none;
  }
}

.cp-logo {
  font-size: 1.2rem;
  margin-right: .5rem;
}

.user-badges {
  font-weight: 400;
  p {
    &.title {
      color: #DDD;
    }
    span {
      color: #FFF;
      font-weight: 700;
      margin-right: .25rem;
    }
  }
}

.badge {
  border-radius: 5em;
  font-family: $Filson;
  padding: .25em .5em;
  text-align: center;
  &-pro {
    background: #FED000;
    color: #222;
  }
  &-hired {
    border: 2px solid currentColor;
  }
}

.user-info {
  margin-top: -.5rem;
  text-align: center;
}

.user-title {
  //margin-bottom: .125rem;
}

.user-avatar {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  max-width: 10em;
  img {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);    
    width: 100%;
  }
}

.user-handle {
  background-color: #47246B;
  border-radius: 5em;
  display: inline-block; 
  flex-shrink: 0;
  line-height: 1;
  margin-top: -1em;
  padding: .25em .75em .5em;
  width: auto;
  a {
    text-decoration: none;
  }
}

.search {
  input {
    display: none;
  }
  button {
    background-color: transparent;
    font-size: 1.25rem;
    margin: 0;
    padding: 0;
  }
}

.user-sample-menu {
  button {
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
  }
}

.separator {
  padding-right: .5em;
  padding-left: .5em;
}

.pen-samples {
  position: relative;
  z-index: 1;
}

.pen-samples:after {
  background: #FFF;
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: auto;
  bottom: -5em;
  left: calc(50% - 350px);
  height: 200px;
  width: 700px;
  z-index: 0;
}

.pen-sample {
  background-size: cover;
  max-width: 100%;
  max-height: 160px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.stats {
  font-family: $Lato;
  position: relative;
  z-index: 2;
  h3 {
    color: #333;
    margin-bottom: 0;
  }
  button {
    color: #999;
  }
  button {
    background-color: transparent;
  }
  .icon {
    margin-right: .5rem;
  }
}
              
            
!

JS

              
                

              
            
!
999px

Console