<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Primer/10.8.1/build.css" />
<div class="Box m-1" style="width: 450px;">
<div class="Box-body">
<label class="Label Label--gray mr-1">#discuss</label><label class="Label Label--gray mr-1">#dev</label><label class="Label Label--gray">#open-source</label>
<h1 class="mt-2 text-centered">Who's looking for open source contributors?</h1>
</div>
<div class="Box-row d-inline-flex v-align-middle width-full">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DOU9qJSH--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png" class="img-round mr-2" />
<div class="height-fit v-align-middle">
<strong>Ben Halpern</strong>
<div class="text-small text-gray-light">
@benhalpern
</div>
</div>
<div class="logo text-center d-table v-align-middle">
<h2>DEV</h2>
</div>
</div>
</box>
.img-round {
width: 50px;
height: 50px;
border-radius: 50px;
}
.logo {
margin-left: auto;
margin-right: 5px;
width: 55px;
color: white;
background-color: black;
border: 5px solid black;
}
body {
font-family: Roboto !important;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.