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;
}
