Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                div.profile-page
  div.content
    div.content__cover
      div.content__avatar
      div.content__bull
        - for(var i = 0; i < 5; i++)
          span
    div.content__actions
      a(href="#")
        svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512")
          path(fill="currentColor" d="M192 256A112 112 0 1 0 80 144a111.94 111.94 0 0 0 112 112zm76.8 32h-8.3a157.53 157.53 0 0 1-68.5 16c-24.6 0-47.6-6-68.5-16h-8.3A115.23 115.23 0 0 0 0 403.2V432a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48v-28.8A115.23 115.23 0 0 0 268.8 288z")
          path(fill="currentColor" d="M480 256a96 96 0 1 0-96-96 96 96 0 0 0 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592a48 48 0 0 0 48-48 111.94 111.94 0 0 0-112-112z")
        span Connect
      a(href="#")
        svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512")
          path(fill="currentColor" d="M208 352c-41 0-79.1-9.3-111.3-25-21.8 12.7-52.1 25-88.7 25a7.83 7.83 0 0 1-7.3-4.8 8 8 0 0 1 1.5-8.7c.3-.3 22.4-24.3 35.8-54.5-23.9-26.1-38-57.7-38-92C0 103.6 93.1 32 208 32s208 71.6 208 160-93.1 160-208 160z")
          path(fill="currentColor" d="M576 320c0 34.3-14.1 66-38 92 13.4 30.3 35.5 54.2 35.8 54.5a8 8 0 0 1 1.5 8.7 7.88 7.88 0 0 1-7.3 4.8c-36.6 0-66.9-12.3-88.7-25-32.2 15.8-70.3 25-111.3 25-86.2 0-160.2-40.4-191.7-97.9A299.82 299.82 0 0 0 208 384c132.3 0 240-86.1 240-192a148.61 148.61 0 0 0-1.3-20.1C522.5 195.8 576 253.1 576 320z")
        span Message
    div.content__title
      h1 Samantha Jones
      span New York, United States
    div.content__description
      p Web Producer - Web Specialist
      p Columbia University - New York
    ul.content__list
      li
        span 65
        | Friends
      li
        span 43
        | Photos
      li
        span 21
        | Comments
    div.content__button
      a(href="#" class="button")
        div.button__border
        div.button__bg
        p.button__text Show more
  div.bg
    div
      - for(var i = 0; i < 7; i++)
        span
  div#theme-switcher-wrapper.theme-switcher-wrapper
    span Themes color
    ul
      li
        em(data-theme="orange").is-active
      li
        em(data-theme="green")
      li
        em(data-theme="purple")
      li
        em(data-theme="blue")
  div#theme-switcher-button.theme-switcher-button
    svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512")
      path(fill="currentColor" d="M352 0H32C14.33 0 0 14.33 0 32v224h384V32c0-17.67-14.33-32-32-32zM0 320c0 35.35 28.66 64 64 64h64v64c0 35.35 28.66 64 64 64s64-28.65 64-64v-64h64c35.34 0 64-28.65 64-64v-32H0v32zm192 104c13.25 0 24 10.74 24 24 0 13.25-10.75 24-24 24s-24-10.75-24-24c0-13.26 10.75-24 24-24z")
              
            
!

CSS

              
                break-point = 990px

*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  background: #fff
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  color: hsla(0,0%,0%,.6)
  
.profile-page
  display: flex
  min-height: 100vh
  padding-top: 5rem
  @media (max-width: break-point)
    padding-top: 0
   
  .content
    display: flex
    flex-direction: column
    max-width: 800px
    width: 100%
    position: relative
    z-index: 2
    margin: auto
    padding: 2rem
    background: #fff
    border-radius: 2rem
    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)
    @media (max-width: break-point)
      max-width: 420px
      padding: 0
      border-radius: 0
      
    &__cover
      position: relative
      background: linear-gradient(150deg, #1d8cf8 20%,#3358f4 100%)
      
      .theme-orange &
         background: linear-gradient(150deg, #ff4086 20%,#fd8d76 100%)
      .theme-purple &
         background: linear-gradient(150deg, #8700ff 20%,#f000ff 100%)
      .theme-green &
         background: linear-gradient(150deg, #1dcc45 20%,#42b883 100%)
      .theme-blue &
         background: linear-gradient(150deg, #0098f0 20%,#00f2c3 100%)

    &__bull
      display: none
      height: 12rem
      position: relative
      overflow: hidden
      @media (max-width: break-point)
        display: block

      for i in (1..5)
        span:nth-child({i})
          display: block
          position: absolute
          z-index: 1
          border-radius: 50%

      span
        &:nth-child(1)
          width: 5rem
          height: 5rem
          top: -6%
          left: -3%
          background: hsla(0,0%,100%,.12)
        &:nth-child(2)
          width: 8rem
          height: 8rem
          top: 18%
          left: 18%
          background: hsla(0,0%,100%,.05)
        &:nth-child(3)
          width: 3rem
          height: 3rem
          top: 8%
          right: 2%
          background: hsla(0,0%,100%,.05)
        &:nth-child(4)
          width: 6rem
          height: 6rem
          top: 28%
          right: 12%
          background: hsla(0,0%,100%,.1)
        &:nth-child(5)
          width: 4rem
          height: 4rem
          top: 70%
          left: -6%
          background: hsla(0,0%,100%,.04)

    &__avatar
      width: 12rem
      height: 12rem
      position: absolute
      bottom: 0
      left: 50%
      z-index: 2
      transform: translate(-50%,50%)
      background: #8f6ed5 url(https://image.freepik.com/free-photo/friendly-brunette-looking-camera_23-2147774849.jpg) center center no-repeat
      background-size: cover
      border-radius: 50%
      box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)
      &::before
        content: ""
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        border-radius: 50%
      @media (max-width: break-point)
        width: 11rem
        height: 11rem
        border: .3rem solid #fff
        box-shadow: none
      
    &__actions
      display: flex
      justify-content: space-between
      padding: .2rem
      @media (max-width: break-point)
        padding: .8rem 2rem
      a
        display: flex
        flex-flow: row nowrap
        align-items: center
        justify-content: center
        height: 3rem
        padding: .2rem 1rem
        border-radius: 2rem
        text-decoration: none
        font-size: .9rem
        @media (max-width: break-point)
          padding: .5rem
        span
          @media (max-width: break-point)
            display: none
        svg
          width: 2rem
          margin-right: .4rem
          @media (max-width: break-point)
            margin: 0
          path
            &:last-child
              opacity: .5
        &:first-child
          color: #ff4086
          .theme-orange &
            color: #ff4086
          .theme-purple &
            color: #8700ff
          .theme-green &
            color: #1dcc45
          .theme-blue &
            color: #0098f0
        &:last-child
          color: #d782d9
          .theme-orange &
            color: #fd8d76
          .theme-purple &
            color: #f000ff
          .theme-green &
            color: #42b883
          .theme-blue &
            color: #00f2c3
        &:hover
          &:first-child
            background: #1d8cf8
            color: #fff
            .theme-orange &
              background: #ff4086
            .theme-purple &
              background: #8700ff
            .theme-green &
              background: #1dcc45
            .theme-blue &
              background: #0098f0
          &:last-child
            background: #1d8cf8
            color: #fff
            .theme-orange &
              background: #fd8d76
            .theme-purple &
              background: #f000ff
            .theme-green &
              background: #42b883
            .theme-blue &
              background: #00f2c3

    &__title
      margin-top: 4.5rem
      text-align: center
      order: 1
      @media (max-width: break-point)
        margin-top: 1.5rem
      h1
        margin-bottom: .1rem
        font-size: 2.4rem
        @media (max-width: break-point)
          font-size: 1.8rem
      span
        font-size: 1rem
        @media (max-width: break-point)
          font-size: .9rem
        
    &__description
      margin-top: 2.5rem
      text-align: center
      order: 2
      @media (max-width: break-point)
          margin-top: 1.5rem
          order: 3
      p
        margin-bottom: .2rem
        font-size: 1.2rem
        @media (max-width: break-point)
          font-size: 1rem
        
    &__list
      display: flex
      justify-content: center
      margin-top: 2rem
      list-style-type: none
      order: 3
      @media (max-width: break-point)
        margin-top: 1.5rem
        order: 2
      li
        padding: 0 1.5rem
        text-align: center
        font-size: 1rem
        @media (max-width: break-point)
          font-size: .8rem
        span
          display: block
          margin-bottom: .1rem
          font-weight: bold
          font-size: 1.6rem
          @media (max-width: break-point)
            font-size: 1.2rem
          
    &__button
      margin: 3rem 0 2rem
      text-align: center
      order: 4
      @media (max-width: break-point)
        margin: 1.5rem 0 2.2rem
        
      .button
        display: inline-block
        padding: 1.2rem 1.8rem
        text-align: center
        text-decoration: none
        background: linear-gradient(100deg, #1d8cf8 30%,#3358f4 100%)
        border-radius: 2rem
        box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)
        font-size: 1rem
        color: #fff
        cursor: pointer
        
        .theme-orange &
           background: linear-gradient(100deg, #ff4086 10%,#fd8d76 100%)
        .theme-purple &
           background: linear-gradient(100deg, #8700ff 10%,#f000ff 100%)
        .theme-green &
           background: linear-gradient(100deg, #1dcc45 10%,#42b883 100%)
        .theme-blue &
           background: linear-gradient(100deg, #0098f0 10%,#00f2c3 100%)

        &:hover
          color: #fff
        @media (max-width: break-point)
          padding: 1rem 1.4rem
          font-size: .9rem

  .bg
    width: 100%
    height: 50%
    position: absolute
    top: 0
    left: 0
    z-index: 1
    
    div
      content: ""
      width: 100%
      height: 100%
      position: absolute
      top: 0
      left: 0
      z-index: 1
      overflow: hidden
      background: linear-gradient(150deg, #1d8cf8 20%,#3358f4 100%)
      
      .theme-orange &
         background: linear-gradient(150deg, #ff4086 20%,#fd8d76 100%)
      .theme-purple &
         background: linear-gradient(150deg, #8700ff 20%,#f000ff 100%)
      .theme-green &
         background: linear-gradient(150deg, #1dcc45 20%,#42b883 100%)
      .theme-blue &
         background: linear-gradient(150deg, #0098f0 20%,#00f2c3 100%)

    for i in (1..7)
      span:nth-child({i})
        display: block
        position: absolute
        z-index: 2
        border-radius: 50%
        animation: floating 34s infinite
        
    span
      &:nth-child(1)
        width: 11rem
        height: 11rem
        top: 30%
        left: 16%
        background: hsla(0,0%,100%,.05)
        animation-duration: 34s
      &:nth-child(2)
        width: 8rem
        height: 8rem
        top: 18%
        left: 1%
        background: hsla(0,0%,100%,.12)
        animation-duration: 40s
      &:nth-child(3)
        width: 8rem
        height: 8rem
        top: 34%
        right: 10%
        background: hsla(0,0%,100%,.1)
        animation-duration: 38s
      &:nth-child(4)
        width: 4rem
        height: 4rem
        top: 34%
        right: 3%
        background: hsla(0,0%,100%,.2)
        animation-duration: 34s
      &:nth-child(5)
        width: 12rem
        height: 12rem
        top: 42%
        right: 28%
        background: hsla(0,0%,100%,.1)
        animation-duration: 40s
      &:nth-child(6)
        width: 8rem
        height: 8rem
        top: 72%
        left: 6%
        background: hsla(0,0%,100%,.05)
        animation-duration: 38s
      &:nth-child(7)
        width: 4rem
        height: 4rem
        top: 82%
        right: 8%
        background: hsla(0,0%,100%,.05)
        animation-duration: 34s
         
@keyframes floating
  0%
    -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg)
    transform: rotate(0deg) translate(-10px) rotate(0deg)
  100%
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg)
    transform: rotate(360deg) translate(-10px) rotate(-360deg)
 
.theme-switcher
  
  &-button
    position: fixed
    top: calc(50% - 3.6rem)
    right: 0
    z-index: 2;
    padding: 1rem
    background: hsla(0,0%,0%,.6)
    border-top-left-radius: 1rem
    border-bottom-left-radius: 1rem
    font-size: inherit
    color: #fd7686
    cursor: pointer
    
    .theme-orange &
      color: #fd7686
    .theme-purple &
      color: #8800ff
    .theme-green &
      color: #42b883
    .theme-blue &
      color: #1d8cf8

    svg
      width: 1.1rem

  &-wrapper
    width: 200px
    position: fixed
    top: calc(50% - 5rem)
    right: 5rem
    z-index: 2
    padding: 1.5rem 0
    background: linear-gradient(#222a42,#1d253b)
    box-shadow: 0 10px 50px 0 rgba(0,0,0,.2)
    border-radius: .25rem
    opacity: 0
    text-align: center
    font-size: 1rem
    color: inherit
    visibility: hidden
    transform: translateY(-15%) translateZ(0)
    transform-origin: 0 0
    transition: transform .15s cubic-bezier(0.430,0.195,0.020,1.000)

    &.is-open
      opacity: 1
      visibility: visible
      transform: translate3d(0,1px,0)

    span
      display: block
      font-size: .8rem
      color: hsla(0,0%,100%,.9)
      cursor: default

    ul
      margin-top: .8rem
      list-style-type: none
      font-size: 0

    li
      display: inline-block
      vertical-align: middle
      padding: 0 .2rem
      font-size: .8rem
      color: hsla(0,0%,100%,.9)
      cursor: pointer

      em
        display: block
        border-radius: 1rem

    [data-theme]
      width: 20px
      height: 20px
    
    [data-theme="orange"]
      background: #ff4086
    [data-theme="purple"]
      background: #8800ff
    [data-theme="green"]
      background: #42b883
    [data-theme="blue"]
      background: #1d8cf8
              
            
!

JS

              
                (() => {

  'use-strict'

  const themeSwiter = {

    init: function() {
      this.wrapper = document.getElementById('theme-switcher-wrapper')
      this.button = document.getElementById('theme-switcher-button')
      this.theme = this.wrapper.querySelectorAll('[data-theme]')
      this.themes = ['theme-orange', 'theme-purple', 'theme-green', 'theme-blue']
      this.events()
      this.start()
    },
    
    events: function() {
      this.button.addEventListener('click', this.displayed.bind(this), false)
      this.theme.forEach(theme => theme.addEventListener('click', this.themed.bind(this), false))
    },

    start: function() {
      let theme = this.themes[Math.floor(Math.random() * this.themes.length)]
      document.body.classList.add(theme)
    },

    displayed: function() {
      (this.wrapper.classList.contains('is-open'))
        ? this.wrapper.classList.remove('is-open')
        : this.wrapper.classList.add('is-open')
    },

    themed: function(e) {
      this.themes.forEach(theme => {
        if(document.body.classList.contains(theme))
          document.body.classList.remove(theme)
      })
      return document.body.classList.add(`theme-${e.currentTarget.dataset.theme}`)
    }

  }

  themeSwiter.init()

})()
              
            
!
999px

Console