Skip to content

Instantly share code, notes, and snippets.

@joashp

joashp/Profile Cards Flip View.markdown

Created October 18, 2015 06:03
Download ZIP

Revisions

  1. joashp created this gist Oct 18, 2015.
    7 changes: 7 additions & 0 deletions Profile Cards Flip View.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Profile Cards Flip View
    -----------------------


    A [Pen](http://codepen.io/joashp/pen/RWjKYq) by [Joash](http://codepen.io/joashp) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/joashp/pen/RWjKYq/license).
    48 changes: 48 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <div class="main-container">
    <div class="row">
    <div class="col-sm-10 col-sm-offset-1">
    <div class="col-md-offset-4 col-sm-offset-3 col-md-4 col-sm-6">
    <div class="card-container">
    <div class="card">
    <div class="front">
    <div class="cover">
    <img src="http://i.imgur.com/8CkzoaL.png"/>
    </div>
    <div class="user">
    <img class="img-circle" src="http://joashpereira.com/images/joash.png"/>
    </div>
    <div class="content text-center">
    <div class="main">
    <h3 class="name">Joash Pereira</h3>
    <p class="profession">Designer</p>
    <h5><i class="fa fa-map-marker fa-fw text-muted"></i> Goa, India</h5>
    <h5><i class="fa fa-building-o fa-fw text-muted"></i> JP Designs Inc. </h5>
    <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> joash@gmail.com</h5>
    </div>
    </div>
    </div> <!-- end front panel -->
    <div class="back">
    <div class="header">
    <h5 class="motto">"Life's a climb, but the view is great!"</h5>
    </div>
    <div class="content">
    <div class="main">
    <h4 class="text-center">Experince</h4>
    <p>4+ years experience</p>
    <h4 class="text-center">Areas of Expertise</h4>
    <p>Web design, Mobile UI/UX, Adobe Photoshop, HTML5, CSS3, AngularJS and many others...</p>
    </div>
    </div>
    <div class="footer">
    <div class="social-links text-center">
    <a href="https://www.facebook.com/joash.c.pereira" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
    <a href="https://plus.google.com/u/0/+JoashPereira" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
    <a href="twitter.com/@im_joash" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    1 change: 1 addition & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    /* no javascript */
    2 changes: 2 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    200 changes: 200 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,200 @@
    body {
    background-color: #2c3e50;
    }
    .main-container {
    padding: 100px 0px;
    }

    /* card container */
    .card-container {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    margin-bottom: 30px;
    }
    /* flip the pane when hovered */

    .card-container:hover .card,
    .card-container.hover.manual-flip .card {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
    }

    .card-container.static:hover .card,
    .card-container.static.hover .card {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    }

    .card {
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform .5s;
    -o-transition: -o-transform .5s;
    transition: transform .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    }
    /* hide back of pane during flip */

    .front,
    .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
    }
    /* front pane, placed above back */

    .front {
    z-index: 2;
    }

    .back {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
    z-index: 3;
    }

    /* your card style */
    .card {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
    }

    .card-container,
    .front,
    .back {
    width: 100%;
    height: 420px;
    border-radius: 4px;
    }

    .card .cover {
    height: 105px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    }

    .card .cover img {
    width: 100%;
    }

    .card .user {
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 120px;
    }

    .card .user img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #FFFFFF;
    width: 100%;
    }

    .card .content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
    }

    .text-center {
    text-align: center;
    }

    .card .content .main {
    min-height: 160px;
    }

    .card .back .content .main {
    height: 215px;
    }

    .card .name {
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-align: center;
    text-transform: capitalize;
    }

    .card h5 {
    margin: 5px 0;
    font-weight: 400;
    line-height: 20px;
    }

    .card .profession {
    color: #999999;
    text-align: center;
    margin-bottom: 20px;
    }

    .card .footer {
    border-top: 1px solid #EEEEEE;
    color: #999999;
    margin: 30px 0 0;
    padding: 10px 0 0;
    text-align: center;
    }

    .card .footer .social-links {
    font-size: 18px;
    }

    .card .footer .social-links a {
    margin: 0 7px;
    }

    .card .footer .btn-simple {
    margin-top: -6px;
    }

    .card .header {
    padding: 15px 20px;
    height: 90px;
    }

    .card .motto {
    border-bottom: 1px solid #EEEEEE;
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
    text-align: center;
    }
    /* card content style */

    .title {
    color: #506A85;
    text-align: center;
    font-weight: 300;
    font-size: 44px;
    margin-bottom: 90px;
    line-height: 90%;
    }

    .title small {
    font-size: 17px;
    color: #999;
    text-transform: uppercase;
    margin: 0;
    }
    2 changes: 2 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />