.skill-card
    header.skill-card__header
        img(src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg", alt="HTML5 Logo").skill-card__icon
    section.skill-card__body
        h2.skill-card__title html
        span.skill-card__duration 6 ans d'expérience
        ul.skill-card__knowledge
            li HTML5
            li Sémantique
            li SVG
            li Canvas

body, html
    background-color: #EEE
    font-family: "Open Sans", sans-serif
    font-size: 16px
    font-weight: 400
    color: #000

.skill-card
    position: absolute
    top: 50%
    left: 50%
    transform: translateY(-50%) translateX(-50%)
    padding: 20px
    width: 15em
    background-color: #FFF
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
    cursor: pointer
    
    &:hover
        box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
    
        .skill-card__header
            height: 40px
        
            .skill-card__icon
                transform: translateX(-50%) translateY(-50%) scale(3)
            
        .skill-card__body
            height: 170px
            
            .skill-card__knowledge
                li
                    transform: translateX(0)
                    transition-timing-function: cubic-bezier(0, 1.5, 1, 1)
                    transition-duration: .5s
                
                    @for $i from 1 through 6
                        &:nth-child(#{$i})
                            transition-delay: $i * .25s
    
    .skill-card__header
        position: relative
        background-color: lighten(#E95A28, 5)
        height: 170px
        margin: -20px -20px 20px -20px
        transition: height .5s
        overflow: hidden
        
        .skill-card__icon
            position: absolute
            top: 50%
            left: 50%
            transform: translateY(-50%) translateX(-50%)
            display: block
            width: 128px
            height: 128px
            transition: transform .5s
            
    .skill-card__body
        height: 40px
        transition: height .5s
        overflow: hidden
            
        .skill-card__title
            font-size: 1.4em
            font-weight: 600
            text-transform: uppercase
            
        .skill-card__duration
            color: #9E9E9E
            font-style: italic
            
        .skill-card__knowledge
            margin-top: 10px
            color: #424242
            
            li
                margin-top: 5px
                transition-duration: 0
                transition-delay: .5s
                transform: translateX(-100%)