<div class="container">
    <div class="main">
        <div class="front">
            <i class="fa fa-user fa-5x icon"></i>
            <div class="">Carl Jhonson</div>
            <div class="data-wrapper">
                <div class="circle"><i class="fa fa-code"></i></div>
                <div class="data">
                    <span class="title">UI/UX Developer</span>
                    <p>Lorem ipsum dolor sit amet, consectetur i!</p>
                </div>
            </div>
        </div>
        <div class="back">
            <div class="skills">
                <h2>Dev Skills</h2>
                <div class="skill-ele">
                    <div class="stars">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                    <span class="tech">HTML5</span>
                </div>
               <div class="skill-ele">
                   <div class="stars">
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                   </div>
                    <span class="tech">CSS3</span>
                </div>
                <div class="skill-ele">
                    <div class="stars">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                    <span class="tech">JavaScript</span>
                </div>
                <div class="skill-ele">
                    <div class="stars">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                    <span class="tech">ReactJS</span>
                </div>
            </div>
            <div class="social">
                <i class="fa fa-2x fa-github"></i>
                <i class="fa fa-2x fa-linkedin-square"></i>
                <i class="fa fa-2x fa-codepen"></i>
                <i class="fa fa-2x fa-twitter-square"></i>
                <i class="fa fa-2x fa-facebook-square"></i>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="front green">
            <i class="fa fa-user fa-5x icon"></i>
            <div class="">Katy Smith</div>
            <div class="data-wrapper">
                <div class="circle"><i class="fa fa-code"></i></div>
                <div class="data">
                    <span class="title">Full-Stack Developer</span>
                    <p>Lorem ipsum dolor sit amet, consectetur i!</p>
                </div>
            </div>
        </div>
        <div class="back green">
            <div class="skills">
                <h2>Dev Skills</h2>
                <div class="skill-ele">
                    <div class="stars">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                    <span class="tech">Java Core</span>
                </div>
               <div class="skill-ele">
                   <div class="stars">
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                       <i class="fa fa-star" aria-hidden="true"></i>
                   </div>
                    <span class="tech">CSS3</span>
                </div>
                <div class="skill-ele">
                    <div class="stars">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                    <span class="tech">JavaScript</span>
                </div>
                <div class="skill-ele">
                    <div class="stars">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                    <span class="tech">Django</span>
                </div>
            </div>
            <div class="social">
                <i class="fa fa-2x fa-github"></i>
                <i class="fa fa-2x fa-linkedin-square"></i>
                <i class="fa fa-2x fa-codepen"></i>
                <i class="fa fa-2x fa-twitter-square"></i>
                <i class="fa fa-2x fa-facebook-square"></i>
            </div>
        </div>
    </div>
</div>

body 
    background radial-gradient(ellipse at center, #ffa84c 0%,#ff7b0d 100%)
.container
    margin 10vh auto
    justify-content center
    display flex
    flex-flow row wrap
.main
    display flex
    margin  .5em 
    transition .5s all ease
    transform-style preserve-3d
    position relative
    cursor pointer
    width 33.3%
    min-width 200px
    max-width 350px
    height 410px
    box-shadow 1px 1px 5px #000
    .front, .back
        background #34495E
        position absolute
        width 100%
        min-width 200px
        max-width 350px
        height 410px
        transition .5s all ease
        transform-style preserve-3d
        transform rotateY(0deg)
        backface-visibility hidden
        .data-wrapper
            position absolute
            bottom 0
            width 100%
            height 140px
            background white
            color #ccc
            .data
                color #000
                width 80%
                margin 2em auto
                .title
                    font-weight bold
                    font-size 18px
            .circle
                color #fff
                position absolute
                border-radius 50%
                height 50px
                width 50px
                line-height 50px
                text-align center
                font-weight bold
                background #019875
                top -1.5em
                left 40%
    .icon
        font-size 10em
        padding .2em 0 0 0
    .front
        text-align center
        color white
    .back
        color #fff
        transform rotateY(180deg)
        .social
            width auto
            bottom  0
            margin auto
            text-align center
            i
                margin 5px
        .skills
            margin 0 auto
            text-align center
            padding 1.5em
            .skill-ele
                height 50px
                line-height 50px
                overflow hidden
                position relative
                &:hover
                    .stars
                        left 0
                .stars
                    transition .5s all ease
                    width 100%
                    height 50px
                    line-height 50px
                    background #545353
                    position absolute
                    left -100%
                    color gold
                    
    &:hover
        .front
            transform rotateY(180deg)
            z-index 2
        .back
            transform rotateY(0deg)