"profile"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content"> <div class="card"> <div class="firstinfo"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/mrvanz/128.jpg"/> <div class="profileinfo"> <h1>Francesco Moustache</h1> <h3>Python Ninja</h3> <p class="bio">Lived all my life on the top of mount Fuji, learning the way to be a Ninja Dev.</p> </div> </div> </div> <div class="badgescard"> <span class="devicons devicons-django"></span><span class="devicons devicons-python"> </span><span class="devicons devicons-codepen"></span><span class="devicons devicons-javascript_badge"></span><span class="devicons devicons-gulp"></span><span class="devicons devicons-angular"></span><span class="devicons devicons-sass"> </span></div> </div>
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400"; body, .badgescard, .firstinfo { display: flex; justify-content: center; align-items: center; } html { height: 100%; } body { font-family: 'Open Sans', sans-serif; width: 100%; min-height: 100%; background: #009688; font-size: 16px; overflow: hidden; } *, *:before, *:after { box-sizing: border-box; } .content { position: relative; animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards; } .card { width: 500px; min-height: 100px; padding: 20px; border-radius: 3px; background-color: white; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; } .card:after { content: ''; display: block; width: 190px; height: 300px; background: cadetblue; position: absolute; animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both; } .badgescard { padding: 10px 20px; border-radius: 3px; background-color: #ECECEC; width: 480px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); position: absolute; z-index: -1; left: 10px; bottom: 10px; animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards; } .badgescard span { font-size: 1.6em; margin: 0px 6px; opacity: 0.6; } .firstinfo { flex-direction: row; z-index: 2; position: relative; } .firstinfo img { border-radius: 50%; width: 120px; height: 120px; } .firstinfo .profileinfo { padding: 0px 20px; } .firstinfo .profileinfo h1 { font-size: 1.8em; } .firstinfo .profileinfo h3 { font-size: 1.2em; color: #009688; font-style: italic; } .firstinfo .profileinfo p.bio { padding: 10px 0px; color: #5A5A5A; line-height: 1.2; font-style: initial; } @keyframes animatop { 0% { opacity: 0; bottom: -500px; } 100% { opacity: 1; bottom: 0px; } } @keyframes animainfos { 0% { bottom: 10px; } 100% { bottom: -42px; } } @keyframes rotatemagic { 0% { opacity: 0; transform: rotate(0deg); top: -24px; left: -253px; } 100% { transform: rotate(-30deg); top: -24px; left: -78px; } }

Related: See More


Questions / Comments: