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

              
                .resume
  .base
    .profile
      .photo
        img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg')
      .info
        h4.name Kelly Chen
        small.job Front-end Web Designer
    .about
      h3 About me
      | 嗨!目前正努力學習中,希望自己的進步及成長能夠被看見,請多指教。
      br
      | 喜歡塗鴉、動漫和美好的小事物,歡迎交流 v(´∀`*v)
    .contact
      h3 Contact
      .call
        i.fa.fa-phone
        span (+886)900-000-000
      .address
        i.fa.fa-map-marker
        span Taipei, Taiwan
      .email
        i.fa.fa-envelope
        span ヽ(*´∀`)@gmail.com
      .website
        a(href='http://codepen.io/xichen', target='_blank') 
          i.fa.fa-home
          span codepen.io/xichen
    .follow
      h3 Follow
      .box
        a(href='javascript:void(0);')
          i.fa.fa-facebook
        a(href='javascript:void(0);')
          i.pif-plurkapp
        a(href='javascript:void(0);')
          i.fa.fa-twitter
        a(href='javascript:void(0);')
          i.fa.fa-pinterest-p
        a(href='javascript:void(0);')
          i.fa.fa-tumblr
        a(href='https://codepen.io/xichen/', target="_blank")
          i.fa.fa-codepen
  .func
    .work
      h3
        i.fa.fa-briefcase
        | Work Exrerience
      ul
        li
          span Front-end Web Designer
          small Apr 2016 - Now
        li
          span Design Assistant
          small Mar 2015 - Dec 2015
        li
          span Design Assistant (Part-time)
          small Oct 2014 - Jul 2015
    .edu
      h3
        i.fa.fa-graduation-cap
        | Education
      ul
        li
          span Department of Information Management
          small Set 2010 - Jun 2014
        li
          span Department of Data Processing
          small Set 2007 - Jun 2010
    .skills-prog
      h3
        i.fa.fa-code
        | Programming Skills
      ul
        li(data-percent='92')
          span HTML5 & PUG
          .skills-bar
            .bar
        li(data-percent='96')
          span CSS3 & SASS
          .skills-bar
            .bar
        li(data-percent='40')
          span JavaScript
          .skills-bar
            .bar
        li(data-percent='60')
          span jQuery
          .skills-bar
            .bar
        li(data-percent='33')
          span NodeJS
          .skills-bar
            .bar
        li(data-percent='52')
          span VueJS
          .skills-bar
            .bar
        li(data-percent='20')
          span PHP
          .skills-bar
            .bar
    .skills-soft
      h3
        i.fa.fa-th-list
        | Software Skills
      ul
        li(data-percent='94')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Photoshop
          small
        li(data-percent='80')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Illustrator
          small
        li(data-percent='89')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Sublime Text
          small
        li(data-percent='55')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Dreamweaver
          small
    .interests
      h3
        i.fa.fa-star
        | Interests
      .interests-items
        .draw
          i.fa.fa-paint-brush
          span Draw
        .guitar
          i.guitar
            svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 53.858 53.858')
              path(d='M6.901,37.275l9.621,9.62l4.185-4.184l-9.622-9.624L6.901,37.275z M11.085,36.64l6.019,6.019\l-0.593,0.618l-6.059-6.003L11.085,36.64z')
              path(d='M36.868,26.667c-0.353-0.705-0.856-1.542-1.346-2.242l-0.366-0.523l-0.088,0.06L50.797,8.235\L49.02,6.461L27.277,28.204l0.252,0.754c0.543,1.579,0.152,3.29-1.022,4.464c-1.669,1.668-4.34,1.669-6.009-0.001\c-0.784-0.782-1.232-1.9-1.232-3.067c0-1.143,0.438-2.21,1.232-3.005c1.124-1.123,2.881-1.546,4.408-1.018l0.748,0.25L47.396,4.839\l-1.836-1.837L29.236,19.276l0.504-0.856l-0.705-0.473c-0.6-0.375-1.231-0.742-1.753-0.872c-0.72-0.227-1.862-0.498-3.213-0.498\c-2.318,0-4.399,0.822-6.015,2.377c-1.597,1.533-2.323,3.29-2.875,4.812l-0.069,0.186c-0.09,0.246-0.268,0.732-0.365,0.901\c-0.359,0.105-1.264,0.299-1.836,0.366c-2.677,0.509-6.723,1.279-9.691,4.248c-1.125,1.125-3.021,3.529-3.092,7.005\c0,3.62,1.996,7.452,5.934,11.39c3.979,3.979,7.791,5.997,11.329,5.997c2.581,0,4.889-1.009,7.066-3.093\c2.968-2.968,3.738-7.01,4.247-9.689c0.05-0.199,0.109-0.512,0.171-0.838c0.05-0.26,0.125-0.657,0.176-0.874\c0.246-0.135,0.703-0.342,1.166-0.496c1.475-0.536,3.184-1.245,4.818-2.88c3.178-3.372,2.371-7.568,1.879-9.216L36.868,26.667z\M24.847,23.653c-2.265-0.469-4.627,0.241-6.185,1.86c-2.652,2.652-2.652,6.967,0,9.621c1.259,1.259,3.001,1.981,4.78,1.981\c1.778,0,3.52-0.723,4.779-1.981c1.623-1.621,2.318-3.96,1.86-6.184l3.281-3.282l0.108,0.162c0.365,0.545,0.758,1.166,0.907,1.616\c0.554,1.884,0.782,4.579-1.271,6.727c-1.141,1.197-2.512,1.787-3.826,2.248c-1.058,0.377-1.802,0.715-2.28,1.264l-0.095,0.123\c-0.237,0.396-0.427,1.125-0.699,2.692c-0.359,2.051-1.027,5.867-3.528,8.429c-1.555,1.556-3.305,2.344-5.2,2.344\c-2.856,0.001-6.192-1.793-9.645-5.185c-3.499-3.497-5.244-6.729-5.188-9.615c0-2.383,1.275-4.16,2.345-5.229\c2.489-2.488,6.207-3.139,8.424-3.527c1.591-0.265,2.321-0.47,2.786-0.782l0.122-0.106c0.477-0.407,0.74-1.046,1.046-1.786\l0.279-0.68c0.464-1.169,0.99-2.494,2.163-3.612c1.147-1.097,2.573-1.652,4.237-1.652c1.184,0,2.166,0.288,2.466,0.376\c0.149,0.05,0.391,0.183,0.625,0.312c0.214,0.118,0.432,0.236,0.628,0.324l0.381,0.254L24.847,23.653z')
              path(d='M23.458,26.252c-1.04,0.075-2.044,0.525-2.757,1.238c-0.762,0.762-1.174,1.772-1.161,2.844\c0.013,1.041,0.429,2.003,1.161,2.699c0.77,0.771,1.739,1.178,2.804,1.178c1.035,0,2.056-0.43,2.803-1.177\c0.77-0.769,1.177-1.739,1.177-2.802c0-1.034-0.43-2.056-1.177-2.802c-0.768-0.77-1.735-1.178-2.842-1.178\C23.462,26.252,23.46,26.252,23.458,26.252z M22.477,29.327c0.265-0.265,0.659-0.43,1.027-0.43c0.409,0,0.735,0.136,1.07,0.468\c0.198,0.166,0.326,0.529,0.326,0.928c0,0.408-0.137,0.735-0.43,1.028c-0.521,0.518-1.489,0.546-1.993,0\C21.927,30.771,21.927,29.876,22.477,29.327z')
              path(d='M53.605,8.544l-0.002,0c-0.109-0.623-0.848-3.106-3.078-5.336c-2.085-2.084-4.648-2.96-5.332-3.079\L44.546,0l-0.491,0.491c0,0-5.991,5.991-6.301,6.3l-0.457,0.455l1.775,1.776L45.295,2.8c0.867,0.332,2.211,0.988,3.455,2.184\c1.186,1.185,1.848,2.562,2.184,3.455l-6.221,6.223l1.773,1.774l7.248-7.246L53.605,8.544z')
            //- img(src='http://kelly.comxa.com/scratch/guitar.svg')
          span Guitar
        .movie
          i.fa.fa-film
          span Movie
        .music
          i.fa.fa-headphones
          span Music
        .game
          i.fa.fa-gamepad
          span Game
              
            
!

CSS

              
                $color: (main: #8d9e78, sub: #3d405b, func: #e07a5f, reverse: #fcfcfc, line: #cdcdcd)
$base: (bg: #eee, border: #bbb, preset: #555)
$wapper-w: 870px
$wapper-base: 225px
$wapper-func: $wapper-w - $wapper-base
@mixin size($w, $h)
  width: $w
  height: $h
*
  outline: none
body, html
  margin: 0
  background: map-get($base, bg)
  font-family: 'Ubuntu', '微軟正黑體', sans-serif
  letter-spacing: .65px
  font-size: 15px
  color: map-get($base, preset)
  cursor: default
a
  text-decoration: none
  color: map-get($base, preset)
  display: block
  transition-duration: .3s
ul
  list-style-type: none
  padding: 0
h3
  color: map-get($color, sub)
  margin: 10px 0
  text-transform: uppercase
  font-size: 18px
.resume
  width: $wapper-w
  background: #fbfbfb
  margin: 20px auto
  border: 1px solid map-get($base, border)
  box-shadow: 0 0 20px -3px map-get($base, border)
  position: relative
  display: flex
  &::before
    content: ''
    +size(100%, 6px)
    background: map-get($color, main)
    position: absolute
    bottom: 0
    left: 0
  &::after
    content: ''
    display: block
    clear: both
  .base, .func
    box-sizing: border-box
    float: left
    > div
      padding-bottom: 10px
      &:last-of-type
        padding-bottom: 0
  .base
    width: $wapper-base
    padding: 30px 15px
    background: rgba(map-get($base, bg), .6)
    .profile
      background: map-get($color, main)
      padding: 30px 15px 5px 15px
      margin: -30px -15px 45px -15px
      position: relative
      z-index: 2
      &::after
        content: ''
        position: absolute
        background: map-get($color, main)
        +size(100%, 30px)
        bottom: -15px
        left: 0
        transform: skewY(-5deg)
        z-index: -1
      .photo
        img
          width: 100%
          border-radius: 50%
      .info
        text-align: center
        color: map-get($color, reverse)
        .name
          margin-top: 10px
          margin-bottom: 0
          font-size: 1.5em
          font-weight: normal
    .contact
      div
        line-height: 24px
        a:hover
          color: map-get($color, func)
          span::after
            width: 100%
        &:hover
          i
            color: map-get($color, func)
        i
          color: map-get($color, main)
          +size(20px, 20px)
          font-size: 20px
          text-align: center
          margin-right: 15px
          transition-duration: .3s
        span
          position: relative
          &::after
            content: ''
            position: absolute
            background: map-get($color, func)
            height: 1px
            width: 0
            bottom: 0
            left: 0
            transition-duration: .3s
    .follow
      .box
        text-align: center
        vertical-align: middle
        a
          display: inline-block
          vertical-align: text-bottom
          &:hover i
            background: map-get($color, func)
            border-radius: 5px
            transform: rotate(45deg) scale(.8)
            &::before
              transform: rotate(-45deg) scale(1.5)
        i
          display: inline-block
          font-size: 30px
          background: map-get($color, main)
          +size(60px, 60px)
          border-radius: 50%
          line-height: 60px
          color: map-get($color, reverse)
          margin: 0 10px 10px 10px
          transition-duration: .3s
          &::before
            transition-duration: .3s
          &.fa::before
            display: block
  .func
    width: $wapper-func
    padding: 30px 25px
    &:hover
      > div
        transition-duration: .3s
        &:hover
          h3
            letter-spacing: 1.6px
            i
              transform: scale(1.2)
        &:not(:hover)
          opacity: .5
    h3
      transition-duration: .3s
      margin-top: 0
      i
        color: map-get($color, reverse)
        background: map-get($color, main)
        +size(42px, 42px)
        font-size: 20px
        line-height: 42px
        border-radius: 50%
        text-align: center
        vertical-align: middle
        margin-right: 8px
        transition-duration: .3s
    .work, .edu
      float: left
      small
        display: block
        opacity: .7
      ul li
        position: relative
        margin-left: 15px
        padding-left: 25px
        padding-bottom: 15px
        &:hover
          &::before
            animation: circle 1.2s infinite
          span
            color: map-get($color, func)
          @keyframes circle
            from
              box-shadow: 0 0 0 0px rgba(map-get($color, sub), 1)
            to
              box-shadow: 0 0 0 6px rgba(map-get($color, sub), 0)
        &:first-of-type
          &::before
            +size(10px, 10px)
            left: -2px
        &:last-of-type
          padding-bottom: 3px
          &::after
            border-radius: 1.5px
        &::before, &::after
          content: ''
          display: block
          position: absolute
        &::before
          +size(7px, 7px)
          border: 3px solid map-get($color, sub)
          background: map-get($color, reverse)
          border-radius: 50%
          left: 0
          z-index: 1
        &::after
          +size(3px, 100%)
          background: map-get($color, sub)
          left: 5px
          top: 0
        span
          transition-duration: .3s
    .work
      width: 42%
    .edu
      width: 58%
    .skills
      &-prog
        clear: both
        ul
          margin-left: 15px
          li
            margin-bottom: 8px
            display: flex
            align-items: center
            transition-duration: .3s
            &:hover
              color: map-get($color, func)
              .skills-bar .bar
                background: map-get($color, func)
                box-shadow: 0 0 0 1px map-get($color, func)
            span
              display: block
              width: 120px
            .skills-bar
              background: map-get($color, line)
              height: 2px
              width: calc(100% - 120px)
              position: relative
              border-radius: 2px
              .bar
                position: absolute
                top: -1px
                height: 4px
                background: map-get($color, main)
                box-shadow: 0 0 0 map-get($color, main)
                border-radius: 5px
                // transition-duration: .3s
                // use jquery add css transition-duration
      &-soft
        ul
          display: flex
          justify-content: space-between
          text-align: center
          li
            position: relative
            &:hover
              svg .cbar
                stroke: map-get($color, func)
                stroke-width: 4px
              span, small
                transform: scale(1.2)
            svg
              width: 95%
              fill: transparent
              transform: rotate(-90deg)
              circle
                stroke-width: 1px
                stroke: map-get($color, line)
              .cbar
                stroke-width: 3px
                stroke: map-get($color, main)
                stroke-linecap: round
                // transition-duration: .3s
                // use jquery add css transition-duration
            .soft-info
            span, small
              position: absolute
              display: block
              width: 100%
              top: 52%
              transition-duration: .3s
            span
              top: 40%
    .interests
      &-items
        box-sizing: border-box
        padding: 15px
        width: 100%
        border: 1px solid map-get($color, line)
        text-align: center
        display: flex
        justify-content: space-between
        div
          display: inline-block
          +size(80px, 80px)
          &:hover
            i
              transform: scale(1.2)
            span
              color: map-get($color, func)
              transition-duration: .3s
          i
            font-size: 45px
            width: 60px
            height: 60px
            line-height: 60px
            color: map-get($color, main)
            transition-duration: .3s
            &.guitar
              display: block
              margin: 0 auto
              svg
                +size(50px, 50px)
                margin-top: 5px
                fill: map-get($color, main)
          span
            display: block
          

              
            
!

JS

              
                $('.skills-prog li').find('.skills-bar').each (i) ->
  $(this).find('.bar').delay(i*150).animate {
    width: $(this).parents().attr('data-percent') + '%'
  }, 1000, 'linear', ->
    $(this).css 'transition-duration': '.5s'
  return
$('.skills-soft li').find('svg').each (i) ->
  circle = $(this).children('.cbar')
  r = circle.attr('r')
  c = Math.PI * (r * 2)
  percent = $(this).parent().data 'percent'
  cbar = ((100-percent)/100) * c
  circle.css 'stroke-dashoffset': c, 'stroke-dasharray': c
  circle.delay(i*150).animate {
    strokeDashoffset: cbar
  }, 1000, 'linear', ->
    circle.css 'transition-duration': '.3s'
  $(this).siblings('small').prop('Counter', 0).delay(i*150).animate {
    Counter: percent
  }, duration: 1000, step: (now) ->
    $(this).text Math.ceil(now) + '%'
  return
              
            
!
999px

Console