Personal Card

HTML
<div class="demo"> <article class="avatar"> <figure class="avatar__portrait" data-status="verified"> <img src="https://d13yacurqjgara.cloudfront.net/users/255/screenshots/683315/attachments/61523/rogie.png" alt="Rogie" /> </figure> <h1 class="avatar__title">Rogie King</h1> <div class="avatar__bio"> <p>Independent designer, front-end dev and artist that's lucky to be able to use his meaty stumps to draw and code.</p> </div> </article> </div>
SCSS
@charset "UTF-8"; *, *:before, *:after { box-sizing: border-box; } .avatar { position: relative; width: 250px; margin: auto; padding: 50px 0 0; border-radius: 5px; text-align: center; background: #eee; box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.5); } .avatar__portrait { position: absolute; left: 50%; top: -50px; margin: 0 0 0 -50px; width: 100px; height: 100px; border-radius: 50px; } .avatar__portrait:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50px; background: #333; box-shadow: 0 0 0 7px #eee; z-index: 1; } .avatar__portrait img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50px; z-index: 1; } .avatar__title { margin: 5px 0; font-weight: 100; } .avatar__bio { padding: 0 10px; font-size: 90%; font-style: italic; } .demo { display: flex; height: 100vh; background: linear-gradient(135deg, #4EFFDF, #48BBDE, #F47EC6); font-family: 'Raleway', sans-serif; color: #333; }
JAVASCRIPT
Expand for more options Login